Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(navbar): expansion fix + new theming logic #75

Merged
merged 4 commits into from
Oct 3, 2023
Merged

fix(navbar): expansion fix + new theming logic #75

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
69b5f27
fix(navbar): chnage theming logic + fix wip
Touan95 Oct 2, 2023
4cc039d
fix(navbar): dropdown fix
Touan95 Oct 2, 2023
d3860e9
fix(navbar): fix link behavior
Touan95 Oct 3, 2023
bfeea43
fix(navbar): cr fix
Touan95 Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/lib/components/organisms/Navbar/Navbar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ WithCTA.args = {
<Navbar.Link href="/navbars" active>
Home
</Navbar.Link>
<Navbar.Group label="Services" href="/testus" withUnderlineEffect>
<Navbar.Group label="Services" withUnderlineEffect>
<Navbar.Link href="/navbars1" withUnderlineEffect>
Construction
</Navbar.Link>
Expand Down Expand Up @@ -131,12 +131,12 @@ WithNavbarDropdown.args = {
Home
</Navbar.Link>

<Navbar.Group label="Services" href="/" withUnderlineEffect>
<Navbar.Group label="Services" withUnderlineEffect>
<Navbar.Expansion groupName="Services" groupLink="/" withUnderlineEffect>
{buildExpansionAsChildren(EXPANSION_ITEMS)}
</Navbar.Expansion>
</Navbar.Group>
<Navbar.Group label="Services" href="/" withUnderlineEffect>
<Navbar.Group label="Services" withUnderlineEffect>
<Navbar.Expansion>{buildExpansionAsChildren(EXPANSION_ITEMS, true)}</Navbar.Expansion>
</Navbar.Group>
<Navbar.Group label="Services" withUnderlineEffect>
Expand Down
26 changes: 11 additions & 15 deletions src/lib/components/organisms/Navbar/NavbarGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { NavbarLink } from './NavbarLink';

export interface NavbarGroupProps {
label: React.ReactNode;
href?: string;
children?: React.ReactNode;
arrowIcon?: boolean;
withUnderlineEffect?: boolean;
Expand All @@ -16,35 +15,34 @@ export interface NavbarGroupProps {

export const NavbarGroup: FC<NavbarGroupProps> = ({
label,
href,
children,
arrowIcon = true,
withUnderlineEffect,
topPositionValue = '65px'
}) => {
const theme = useTheme().theme.navbar.group;

const [isOpen, setIsOpen] = useState(false);
const [isGroupOpen, setIsGroupOpen] = useState(false);
const [leaveTimeout, setLeaveTimeout] = useState<number | NodeJS.Timeout | null>(null);

const Icon = HiOutlineChevronDown;

const toggleGroup = () => {
setIsOpen(!isOpen);
setIsGroupOpen(!isGroupOpen);
};

const handleMouseEnter = () => {
if (leaveTimeout) {
clearTimeout(leaveTimeout as NodeJS.Timeout);
setLeaveTimeout(null);
}
setIsOpen(true);
setIsGroupOpen(true);
};

const handleMouseLeave = () => {
setLeaveTimeout(
setTimeout(() => {
setIsOpen(false);
setIsGroupOpen(false);
}, 100)
);
};
Expand All @@ -60,43 +58,41 @@ export const NavbarGroup: FC<NavbarGroupProps> = ({
<li
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className="flex w-full cursor-pointer flex-col py-2 md:h-full md:w-fit md:flex-row"
className="flex w-full cursor-pointer flex-col md:h-full md:w-fit md:flex-row"
>
<div className="inline-block w-full items-center md:flex md:h-full">
<div className="inline-block w-full items-center md:flex md:h-full" onClick={toggleGroup}>
<div
className={twMerge(
'gap-1 items-center justify-center md:justify-start flex flex-row-reverse md:flex-row',
theme.base
)}
>
<span className="relative flex items-center gap-1">
<NavbarLink href={href} withUnderlineEffect={!!href && withUnderlineEffect}>
{label}
</NavbarLink>
<NavbarLink withUnderlineEffect={withUnderlineEffect}>{label}</NavbarLink>
{arrowIcon && (
<span
className={twMerge(
twJoin(
'transition duration-500 ease-in-out absolute -left-2 md:relative md:left-0',
theme.icon.base,
isOpen && twMerge('-rotate-180 md:rotate-180', theme.icon.opened)
isGroupOpen && twMerge('-rotate-180 md:rotate-180', theme.icon.opened)
)
)}
>
<Icon onClick={toggleGroup} />
<Icon />
</span>
)}
</span>
</div>
</div>
<div className={twMerge(twJoin('md:h-0 h-2', !isOpen && 'hidden'))} />
<div className={twMerge(twJoin('md:h-0 h-2', !isGroupOpen && 'hidden'))} />
<div
id="container"
className={twMerge(
twJoin(
'cursor-default md:px-5 md:py-2.5 md:fixed w-full md:rounded-t-none rounded-t-md rounded-b-md bg-slate-100 md:items-start items-center flex flex-col left-0 transition duration-300 ease-in-out overflow-hidden top-0 md:-z-10',
theme.container.base,
!isOpen && twMerge('md:-translate-y-[50%] md:scale-y-0 opacity-0 md:h-fit h-0', theme.container.closed)
!isGroupOpen && twMerge('md:-translate-y-[50%] md:scale-y-0 opacity-0 md:h-fit h-0', theme.container.closed)
)
)}
style={style}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/organisms/Navbar/NavbarLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const NavbarLink: FC<NavbarLinkProps> = ({
if (onClick) {
onClick(e);
}
setIsOpen(false);
href && setIsOpen(false);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if(href) {
setIsOpen(false);
}

};

const LinkOrDivComponent = href ? as ?? 'a' : 'div';
Expand Down
Loading