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.

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

feat(navbar): add group-list sub-component + minor design fixes #72

Merged
merged 3 commits into from
Sep 26, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
148 changes: 41 additions & 107 deletions src/lib/components/organisms/Navbar/Navbar.stories.tsx
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}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

est-ce qu'on peut pas mettre un className dans Link, ca nous eviter de devoir mettre un span ?

{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
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
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
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
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
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
});
Loading