Skip to content

Commit

Permalink
feat(navbar): add group-list sub-component + minor design fixes (#72)
Browse files Browse the repository at this point in the history 
* feat(navbar): add group-list sub-component + minor design fixes

* feat(navbar): cr fix

* feat(navbar): cr fix
  • Loading branch information
@Touan95
Touan95 authored Sep 26, 2023
1 parent 283f179 commit 452030e
Show file tree
Hide file tree
Showing 6 changed files with 120 additions and 127 deletions.
148 changes: 41 additions & 107 deletions src/lib/components/organisms/Navbar/Navbar.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Meta, Story } from '@storybook/react/types-6-0';
import { Link } from 'react-router-dom';
import { Navbar } from '.';
import { ProgressBar } from '../../atoms';
import { Avatar } from '../../atoms/Avatar';
Expand All @@ -15,6 +16,39 @@ export default {
}
} as Meta;

const EXPANSION_ITEMS = [
{
label: 'Construction',
href: '/'
},
{
label: 'Food',
href: '/'
},
{
label: 'Animals',
href: '/'
},
{
label: 'House',
href: '/'
}
];

const buildExpansionAsChildren = (items: { label: string; href: string }[], withUnderlineEffect?: boolean) => {
return (
<>
{items.map((item, index) => (
<span key={index} className="w-full md:w-fit">
<Navbar.Link as={Link} href={item.href} withUnderlineEffect={withUnderlineEffect}>
{item.label}
</Navbar.Link>
</span>
))}
</>
);
};

const Template: Story<NavbarComponentProps> = (args) => <Navbar {...args} />;

export const DefaultNavbar = Template.bind({});
Expand Down Expand Up @@ -98,122 +132,22 @@ WithNavbarDropdown.args = {
</Navbar.Link>

<Navbar.Group label="Services" href="/" withUnderlineEffect>
<div className="flex w-full gap-5">
<span className="w-1/12 border-r">
<Navbar.Link href="/">Services</Navbar.Link>
</span>
<div className="flex w-full justify-between px-10">
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
</div>
</div>
<Navbar.Expansion groupName="Services" groupLink="/" withUnderlineEffect>
{buildExpansionAsChildren(EXPANSION_ITEMS)}
</Navbar.Expansion>
</Navbar.Group>
<Navbar.Group label="Services" href="/" withUnderlineEffect>
<div className="flex w-full gap-5">
<span className="w-1/12 border-r">
<Navbar.Link href="/">Services</Navbar.Link>
</span>
<div className="flex w-full justify-between px-10">
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
</div>
</div>
<Navbar.Expansion>{buildExpansionAsChildren(EXPANSION_ITEMS, true)}</Navbar.Expansion>
</Navbar.Group>
<Navbar.Group label="Services" href="/" withUnderlineEffect>
<div className="flex w-full gap-5">
<span className="w-1/12 border-r">
<Navbar.Link href="/">Services</Navbar.Link>
</span>
<div className="flex w-full justify-between px-10">
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
<div>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</div>
</div>
</div>
<Navbar.Group label="Services" withUnderlineEffect>
<Navbar.Expansion groupName="Services">{buildExpansionAsChildren(EXPANSION_ITEMS)}</Navbar.Expansion>
</Navbar.Group>
<Navbar.Link href="/navbars">About</Navbar.Link>
<Navbar.Link href="/navbars">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
<Navbar.Link>
<div className="flex gap-3 md:order-2">
<div className="flex justify-center gap-3 md:order-2">
<Button>Get started</Button>
</div>
</Navbar.Link>
Expand Down
8 changes: 4 additions & 4 deletions src/lib/components/organisms/Navbar/Navbar.theme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,17 @@ export type NavBarTheme = {
};

export const NAV_BAR_THEME: NavBarTheme = {
base: 'border-gray-200 z-[1000] flex min-h-[65px]',
base: 'border-gray-200 flex min-h-[65px] z-10',
innerBase: 'mx-auto flex items-center justify-between gap-5',
brand: 'flex items-center',
fixedTransparentStyle: '',
background: 'bg-primary-500',
collapse: {
base: 'w-full md:block h-full',
list: 'mt-4 flex flex-col md:mt-0 md:flex-row items-center w-full justify-end md:gap-10 gap-0 h-full'
list: 'mt-4 flex flex-col md:mt-0 md:flex-row items-center w-full md:justify-end md:gap-10 gap-0 h-full'
},
link: {
base: 'block pr-4 pl-3 md:p-0 py-6 mx-auto',
base: 'block pr-4 pl-3 md:p-0 md:py-0 py-2 mx-auto',
active: 'bg-primary-700 text-white md:bg-transparent md:text-primary-700',
disabled: 'text-gray-400 hover:cursor-not-allowed',
underline: 'h-[2px] rounded-lg bg-secondary-200 transition-all duration-500'
Expand All @@ -58,7 +58,7 @@ export const NAV_BAR_THEME: NavBarTheme = {
opened: '-rotate-180 md:rotate-180'
},
container: {
base: '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 -z-10',
base: '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',
opened: 'md:-translate-y-full md:scale-y-0 opacity-0 md:h-fit h-0'
}
}
Expand Down
48 changes: 48 additions & 0 deletions src/lib/components/organisms/Navbar/NavbarExpansion.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import cs from 'classnames';
import type { FC } from 'react';
import { Navbar } from '.';

export type NavbarExpansionItem = {
label: string;
href: string;
};

export interface NavbarExpansionProps {
groupName?: string;
groupLink?: string;
withUnderlineEffect?: boolean;
children?: React.ReactNode;
}

export const NavbarExpansion: FC<NavbarExpansionProps> = ({
groupName,
groupLink,
withUnderlineEffect = false,
children
}) => {
return (
<div className="flex md:container md:max-h-96 md:min-h-[200px] md:py-5">
{groupName && (
<div className="hidden h-fit min-w-[120px] md:block">
<div className="w-fit">
{groupLink ? (
<Navbar.Link href={groupLink} withUnderlineEffect={withUnderlineEffect}>
{groupName}
</Navbar.Link>
) : (
<span className="underline">{groupName}</span>
)}
</div>
</div>
)}
<div
className={cs({
'flex flex-col flex-wrap gap-4 gap-x-20 px-5 py-6 md:py-0': true,
'border-l-0 md:border-l': groupName
})}
>
{children}
</div>
</div>
);
};
26 changes: 16 additions & 10 deletions src/lib/components/organisms/Navbar/NavbarGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const NavbarGroup: FC<NavbarGroupProps> = ({
setLeaveTimeout(
setTimeout(() => {
setIsOpen(false);
}, 50)
}, 100)
);
};

Expand All @@ -58,26 +58,32 @@ export const NavbarGroup: FC<NavbarGroupProps> = ({
};

return (
<div
<li
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className="flex h-full w-full cursor-pointer items-center md:w-fit"
className="flex w-full cursor-pointer flex-col py-2 md:w-fit md:flex-row"
>
<li className="relative inline-block w-full items-center">
<div className="inline-block w-full items-center md:h-full">
<div className={twMerge(cs(theme.base, 'flex flex-row-reverse md:flex-row'))}>
<div className="relative flex items-center">
<span className="relative flex items-center gap-1">
<NavbarLink href={href} withUnderlineEffect={!!href && withUnderlineEffect}>
{label}
</NavbarLink>
{arrowIcon && (
<Icon onClick={toggleGroup} className={twMerge(cs(theme.icon.base, isOpen && theme.icon.opened))} />
<span className={twMerge(cs(theme.icon.base, isOpen && theme.icon.opened))}>
<Icon onClick={toggleGroup} />
</span>
)}
</div>
</span>
</div>
</li>
<div className={twMerge(cs(theme.container.base, !isOpen && theme.container.opened))} style={style}>
</div>
<div className={twMerge(cs('md:h-0 h-2', !isOpen && 'hidden'))} />
<div
className={twMerge(cs('cursor-default', theme.container.base, !isOpen && theme.container.opened))}
style={style}
>
{children}
</div>
</div>
</li>
);
};
12 changes: 7 additions & 5 deletions src/lib/components/organisms/Navbar/NavbarLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,19 @@ export const NavbarLink: FC<NavbarLinkProps> = ({
const LinkComponent = as || 'a';

return (
<li className="group relative whitespace-nowrap text-center md:text-left">
<li className="group relative w-full whitespace-nowrap text-center md:w-fit md:text-left">
<LinkComponent
href={href}
className={classNames(theme.base, active && theme.active, disabled && theme.disabled)}
{...props}
onClick={handleOnClick}
>
{children}
{withUnderlineEffect && (
<span className={classNames('absolute bottom-0 left-0 w-0 group-hover:w-full', theme.underline)}></span>
)}
<span className="w-full">
{children}
{withUnderlineEffect && (
<span className={classNames('absolute bottom-0 left-0 w-0 group-hover:w-full', theme.underline)}></span>
)}
</span>
</LinkComponent>
</li>
);
Expand Down
5 changes: 4 additions & 1 deletion src/lib/components/organisms/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Navbar as NavbarComponent } from './Navbar';
import { NavbarBrand } from './NavbarBrand';
import { NavbarCollapse } from './NavbarCollapse';
import { NavbarExpansion } from './NavbarExpansion';
import { NavbarGroup } from './NavbarGroup';
import { NavbarLink } from './NavbarLink';
import { NavbarToggle } from './NavbarToggle';
Expand All @@ -11,11 +12,13 @@ NavbarCollapse.displayName = 'Navbar.Collapse';
NavbarLink.displayName = 'Navbar.Link';
NavbarToggle.displayName = 'Navbar.Toggle';
NavbarGroup.displayName = 'Navbar.Group';
NavbarExpansion.displayName = 'Navbar.Expansion';

export const Navbar = Object.assign(NavbarComponent, {
Brand: NavbarBrand,
Collapse: NavbarCollapse,
Link: NavbarLink,
Toggle: NavbarToggle,
Group: NavbarGroup
Group: NavbarGroup,
Expansion: NavbarExpansion
});

0 comments on commit 452030e

Please sign in to comment.