Skip to content

Commit

Permalink
Implement review
Browse files Browse the repository at this point in the history
  • Loading branch information
soniaklimas committed Dec 10, 2024
1 parent a8491b6 commit 0b36b9d
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 87 deletions.
134 changes: 64 additions & 70 deletions apps/storefront/src/app/[locale]/(main)/_components/navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,93 +34,87 @@ export const Navigation = ({ menu }: { menu: Maybe<Menu> }) => {
{menu.items.map((item) => (
<NavigationMenuItem key={item.id}>
<Link
href={item.url || "#"}
href={item.url}
className="text-inherit no-underline hover:underline"
>
<NavigationMenuTrigger showIcon={!!item.children?.length}>
{item.label}
</NavigationMenuTrigger>
</Link>
{item.children?.length ? (
{!!item.children?.length && (
<NavigationMenuContent>
<div className="grid w-full grid-cols-6 p-6">
<div className="col-span-2 flex flex-col gap-3 pr-6">
{item.children?.length
? item.children
?.filter((child) => !child.collectionImageUrl)
.map((child) => (
<Link
key={child.id}
href={child.url}
className="group block space-y-1 rounded-md p-3 hover:bg-accent"
onClick={() => {
setCurrentMenuItem("");
}}
>
<div className="text-sm font-medium leading-none">
{child.label}
</div>
<div className="text-sm leading-snug text-muted-foreground">
{child.description &&
isValidJson(child.description) ? (
<RichText
className="py-1"
jsonStringData={child.description}
/>
) : (
<p className="py-1">{child.description}</p>
)}
</div>
</Link>
))
: null}
{!!item.children?.length &&
item.children
?.filter((child) => !child.collectionImageUrl)
.map((child) => (
<Link
key={child.id}
href={child.url}
className="group block space-y-1 rounded-md p-3 hover:bg-accent"
// onClick={() => setCurrentMenuItem("")}
>
<div className="text-sm font-medium leading-none">
{child.label}
</div>
<div className="text-sm leading-snug text-muted-foreground">
{child.description &&
isValidJson(child.description) ? (
<RichText
className="py-1"
jsonStringData={child.description}
/>
) : (
<p className="py-1">{child.description}</p>
)}
</div>
</Link>
))}
</div>

<div className="col-span-4 grid grid-cols-3 gap-3">
{item.children?.length
? item.children
?.filter((child) => child.collectionImageUrl)
.slice(0, 3)
.map((child) => (
<Link
key={child.id}
href={child.url}
className="group relative min-h-[270px] overflow-hidden rounded-lg bg-accent"
onClick={() => setCurrentMenuItem("")}
>
<div
className="h-1/2 bg-cover bg-center"
style={{
backgroundImage: `url(${child?.collectionImageUrl})`,
}}
/>
<div className="flex h-1/2 flex-col justify-start bg-muted/50 p-6">
<div className="relative z-20 space-y-2">
<div className="text-lg font-medium leading-none group-hover:underline">
{child.label}
</div>
<div className="text-sm leading-snug text-muted-foreground">
{child.description &&
isValidJson(child.description) ? (
<RichText
className="py-1"
jsonStringData={child.description}
/>
) : (
<p className="py-1">
{child.description}
</p>
)}
</div>
{!!item.children?.length &&
item.children
?.filter((child) => child.collectionImageUrl)
.slice(0, 3)
.map((child) => (
<Link
key={child.id}
href={child.url}
className="group relative min-h-[270px] overflow-hidden rounded-lg bg-accent"
onClick={() => setCurrentMenuItem("")}
>
<div
className="h-1/2 bg-cover bg-center"
style={{
backgroundImage: `url(${child?.collectionImageUrl})`,
}}
/>
<div className="flex h-1/2 flex-col justify-start bg-muted/50 p-6">
<div className="relative z-20 space-y-2">
<div className="text-lg font-medium leading-none group-hover:underline">
{child.label}
</div>
<div className="text-sm leading-snug text-muted-foreground">
{child.description &&
isValidJson(child.description) ? (
<RichText
className="py-1"
jsonStringData={child.description}
/>
) : (
<p className="py-1">{child.description}</p>
)}
</div>
</div>
</Link>
))
: null}
</div>
</Link>
))}
</div>
</div>
</NavigationMenuContent>
) : null}
)}
</NavigationMenuItem>
))}
</NavigationMenuList>
Expand Down
12 changes: 4 additions & 8 deletions apps/storefront/src/components/mobile-navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,6 @@ export const MobileNavigation = ({
menu: Maybe<Menu>;
onMenuItemClick: (isMenuItemClicked: boolean) => void;
}) => {
const handleMenuItemClick = () => {
onMenuItemClick(true);
};

if (!menu || menu?.items?.length === 0) {
return null;
}
Expand All @@ -22,20 +18,20 @@ export const MobileNavigation = ({
<ul className="grid py-4">
{menu.items.map((item) => (
<li key={item.id} className="p-2 text-stone-500">
<Link href={item.url} onClick={() => handleMenuItemClick()}>
<Link href={item.url} onClick={() => onMenuItemClick(true)}>
{item.label}
</Link>
{item.children?.length ? (
{!!item.children?.length && (
<ul className="mt-2 pl-6">
{item.children.map((child) => (
<li key={child.id} className="py-1 pl-2 text-stone-700">
<Link href={child.url} onClick={() => handleMenuItemClick()}>
<Link href={child.url} onClick={() => onMenuItemClick(true)}>
{child.label}
</Link>
</li>
))}
</ul>
) : null}
)}
</li>
))}
</ul>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,6 @@ export const butterCMSMenuGetInfra =
return null;
}

console.log(
"<<<< SUBMENU",
JSON.stringify(
submenu?.data?.data?.navigation_menu_item_second_level,
null,
2,
),
);

const selectedMenu = menu.data.data.navigation_menu.find(
(menu: ButterCMSMenuItem) =>
menu.name.toLowerCase() === slug?.toLowerCase(),
Expand Down

0 comments on commit 0b36b9d

Please sign in to comment.