Browse Source
✨ Implemented NavigationItem component
✨ Implemented NavigationItem component
🚀 Added the NavigationItem component to handle navigation 🎨 Improved code structure and readability 🛠 Fixed minor issues and added comments 🔗 Ready for further development!main
John Doe
1 year ago
1 changed files with 287 additions and 0 deletions
@ -0,0 +1,287 @@ |
|||||
|
"use client"; |
||||
|
|
||||
|
import { PathName } from "@/routers/types"; |
||||
|
import { Popover, Transition } from "@headlessui/react"; |
||||
|
import { ChevronDownIcon } from "@heroicons/react/24/solid"; |
||||
|
import Image from "next/image"; |
||||
|
import Link from "next/link"; |
||||
|
import { usePathname } from "next/navigation"; |
||||
|
import React, { FC, Fragment, useEffect, useState } from "react"; |
||||
|
|
||||
|
// <--- NavItemType --->
|
||||
|
export interface MegamenuItem { |
||||
|
id: string; |
||||
|
image: string; |
||||
|
title: string; |
||||
|
items: NavItemType[]; |
||||
|
} |
||||
|
export interface NavItemType { |
||||
|
id: string; |
||||
|
name: string; |
||||
|
isNew?: boolean; |
||||
|
href: PathName; |
||||
|
targetBlank?: boolean; |
||||
|
children?: NavItemType[]; |
||||
|
megaMenu?: MegamenuItem[]; |
||||
|
type?: "dropdown" | "megaMenu" | "none"; |
||||
|
} |
||||
|
|
||||
|
export interface NavigationItemProps { |
||||
|
menuItem: NavItemType; |
||||
|
} |
||||
|
|
||||
|
type NavigationItemWithRouterProps = NavigationItemProps; |
||||
|
|
||||
|
const NavigationItem: FC<NavigationItemWithRouterProps> = ({ menuItem }) => { |
||||
|
const [menuCurrentHovers, setMenuCurrentHovers] = useState<string[]>([]); |
||||
|
|
||||
|
// CLOSE ALL MENU OPENING WHEN CHANGE HISTORY
|
||||
|
const locationPathName = usePathname(); |
||||
|
useEffect(() => { |
||||
|
setMenuCurrentHovers([]); |
||||
|
}, [locationPathName]); |
||||
|
|
||||
|
const onMouseEnterMenu = (id: string) => { |
||||
|
setMenuCurrentHovers((state) => [...state, id]); |
||||
|
}; |
||||
|
|
||||
|
const onMouseLeaveMenu = (id: string) => { |
||||
|
setMenuCurrentHovers((state) => { |
||||
|
return state.filter((item, index) => { |
||||
|
return item !== id && index < state.indexOf(id); |
||||
|
}); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// ===================== MENU MEGAMENU =====================
|
||||
|
const renderMegaMenu = (menu: NavItemType) => { |
||||
|
const isHover = menuCurrentHovers.includes(menu.id); |
||||
|
|
||||
|
const isFull = menu.megaMenu && menu.megaMenu?.length > 3; |
||||
|
const classPopover = isFull |
||||
|
? "menu-megamenu--large" |
||||
|
: "menu-megamenu--small relative"; |
||||
|
const classPanel = isFull ? "left-0" : "-translate-x-1/2 left-1/2"; |
||||
|
|
||||
|
return ( |
||||
|
<Popover |
||||
|
as="li" |
||||
|
className={`menu-item flex items-center menu-megamenu ${classPopover}`} |
||||
|
onMouseEnter={() => onMouseEnterMenu(menu.id)} |
||||
|
onMouseLeave={() => onMouseLeaveMenu(menu.id)} |
||||
|
> |
||||
|
{() => ( |
||||
|
<> |
||||
|
<div>{renderMainItem(menu)}</div> |
||||
|
<Transition |
||||
|
as={Fragment} |
||||
|
show={isHover} |
||||
|
enter="transition ease-out duration-150" |
||||
|
enterFrom="opacity-0 translate-y-1" |
||||
|
enterTo="opacity-100 translate-y-0" |
||||
|
leave="transition ease-in duration-150" |
||||
|
leaveFrom="opacity-100 translate-y-0" |
||||
|
leaveTo="opacity-0 translate-y-1" |
||||
|
> |
||||
|
<Popover.Panel |
||||
|
static |
||||
|
className={`will-change-transform sub-menu absolute top-full transform z-10 w-screen max-w-sm px-4 sm:px-0 lg:max-w-max ${classPanel}`} |
||||
|
> |
||||
|
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-10 text-sm"> |
||||
|
<div |
||||
|
className={`relative bg-white dark:bg-neutral-900 px-3 py-6 grid gap-1 grid-cols-${menu.megaMenu?.length}`} |
||||
|
> |
||||
|
{menu.megaMenu?.map((item) => ( |
||||
|
<div key={item.id}> |
||||
|
<div className="px-2"> |
||||
|
<div className="w-36 h-24 rounded-lg overflow-hidden relative flex"> |
||||
|
<Image alt="" src={item.image} fill sizes="200px" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<p className="font-medium text-neutral-900 dark:text-neutral-200 py-1 px-2 my-2"> |
||||
|
{item.title} |
||||
|
</p> |
||||
|
<ul className="grid space-y-1"> |
||||
|
{item.items.map(renderMegaMenuNavlink)} |
||||
|
</ul> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
</Popover.Panel> |
||||
|
</Transition> |
||||
|
</> |
||||
|
)} |
||||
|
</Popover> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const renderMegaMenuNavlink = (item: NavItemType) => { |
||||
|
return ( |
||||
|
<li key={item.id}> |
||||
|
<Link |
||||
|
rel="noopener noreferrer" |
||||
|
className="inline-flex items-center py-1 px-2 rounded hover:text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-200 font-normal text-neutral-6000 dark:text-neutral-300" |
||||
|
href={item.href || ""} |
||||
|
> |
||||
|
{item.name} |
||||
|
</Link> |
||||
|
</li> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// ===================== MENU DROPDOW =====================
|
||||
|
const renderDropdownMenu = (menuDropdown: NavItemType) => { |
||||
|
const isHover = menuCurrentHovers.includes(menuDropdown.id); |
||||
|
return ( |
||||
|
<Popover |
||||
|
as="li" |
||||
|
className={`menu-item flex items-center menu-dropdown relative ${ |
||||
|
menuDropdown.isNew ? "menuIsNew_lv1" : "" |
||||
|
}`}
|
||||
|
onMouseEnter={() => onMouseEnterMenu(menuDropdown.id)} |
||||
|
onMouseLeave={() => onMouseLeaveMenu(menuDropdown.id)} |
||||
|
> |
||||
|
{() => ( |
||||
|
<> |
||||
|
<div>{renderMainItem(menuDropdown)}</div> |
||||
|
<Transition |
||||
|
as={Fragment} |
||||
|
show={isHover} |
||||
|
enter="transition ease-out duration-150 " |
||||
|
enterFrom="opacity-0 translate-y-1" |
||||
|
enterTo="opacity-100 translate-y-0" |
||||
|
leave="transition ease-in duration-150" |
||||
|
leaveFrom="opacity-100 translate-y-0" |
||||
|
leaveTo="opacity-0 translate-y-1" |
||||
|
> |
||||
|
<Popover.Panel |
||||
|
static |
||||
|
className="sub-menu will-change-transform absolute transform z-10 w-56 top-full left-0" |
||||
|
> |
||||
|
<ul className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 text-sm relative bg-white dark:bg-neutral-900 py-4 grid space-y-1"> |
||||
|
{menuDropdown.children?.map((i) => { |
||||
|
if (i.type) { |
||||
|
return renderDropdownMenuNavlinkHasChild(i); |
||||
|
} else { |
||||
|
return ( |
||||
|
<li |
||||
|
key={i.id} |
||||
|
className={`px-2 ${i.isNew ? "menuIsNew" : ""}`} |
||||
|
> |
||||
|
{renderDropdownMenuNavlink(i)} |
||||
|
</li> |
||||
|
); |
||||
|
} |
||||
|
})} |
||||
|
</ul> |
||||
|
</Popover.Panel> |
||||
|
</Transition> |
||||
|
</> |
||||
|
)} |
||||
|
</Popover> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const renderDropdownMenuNavlinkHasChild = (item: NavItemType) => { |
||||
|
const isHover = menuCurrentHovers.includes(item.id); |
||||
|
return ( |
||||
|
<Popover |
||||
|
as="li" |
||||
|
key={item.id} |
||||
|
className="menu-item flex items-center menu-dropdown relative px-2" |
||||
|
onMouseEnter={() => onMouseEnterMenu(item.id)} |
||||
|
onMouseLeave={() => onMouseLeaveMenu(item.id)} |
||||
|
> |
||||
|
{() => ( |
||||
|
<> |
||||
|
<div>{renderDropdownMenuNavlink(item)}</div> |
||||
|
<Transition |
||||
|
as={Fragment} |
||||
|
show={isHover} |
||||
|
enter="transition ease-out duration-150" |
||||
|
enterFrom="opacity-0 translate-y-1" |
||||
|
enterTo="opacity-100 translate-y-0" |
||||
|
leave="transition ease-in duration-150" |
||||
|
leaveFrom="opacity-100 translate-y-0" |
||||
|
leaveTo="opacity-0 translate-y-1" |
||||
|
> |
||||
|
<Popover.Panel |
||||
|
static |
||||
|
className="sub-menu absolute z-10 w-56 left-full pl-2 top-0" |
||||
|
> |
||||
|
<ul className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 text-sm relative bg-white dark:bg-neutral-900 py-4 grid space-y-1"> |
||||
|
{item.children?.map((i) => { |
||||
|
if (i.type) { |
||||
|
return renderDropdownMenuNavlinkHasChild(i); |
||||
|
} else { |
||||
|
return ( |
||||
|
<li key={i.id} className="px-2"> |
||||
|
{renderDropdownMenuNavlink(i)} |
||||
|
</li> |
||||
|
); |
||||
|
} |
||||
|
})} |
||||
|
</ul> |
||||
|
</Popover.Panel> |
||||
|
</Transition> |
||||
|
</> |
||||
|
)} |
||||
|
</Popover> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const renderDropdownMenuNavlink = (item: NavItemType) => { |
||||
|
return ( |
||||
|
<Link |
||||
|
target={item.targetBlank ? "_blank" : undefined} |
||||
|
rel="noopener noreferrer" |
||||
|
className="flex items-center font-normal text-neutral-6000 dark:text-neutral-300 py-2 px-4 rounded-md hover:text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-200 " |
||||
|
href={item.href || ""} |
||||
|
> |
||||
|
{item.name} |
||||
|
{item.type && ( |
||||
|
<ChevronDownIcon |
||||
|
className="ml-2 h-4 w-4 text-neutral-500" |
||||
|
aria-hidden="true" |
||||
|
/> |
||||
|
)} |
||||
|
</Link> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// ===================== MENU MAIN MENU =====================
|
||||
|
const renderMainItem = (item: NavItemType) => { |
||||
|
return ( |
||||
|
<Link |
||||
|
rel="noopener noreferrer" |
||||
|
className="inline-flex items-center text-sm xl:text-base font-normal text-neutral-700 dark:text-neutral-300 py-2 px-4 xl:px-5 rounded-full hover:text-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-200" |
||||
|
href={item.href || "/"} |
||||
|
> |
||||
|
{item.name} |
||||
|
{item.type && ( |
||||
|
<ChevronDownIcon |
||||
|
className="ml-1 -mr-1 h-4 w-4 text-neutral-400" |
||||
|
aria-hidden="true" |
||||
|
/> |
||||
|
)} |
||||
|
</Link> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
switch (menuItem.type) { |
||||
|
case "megaMenu": |
||||
|
return renderMegaMenu(menuItem); |
||||
|
case "dropdown": |
||||
|
return renderDropdownMenu(menuItem); |
||||
|
default: |
||||
|
return ( |
||||
|
<li className="menu-item flex items-center"> |
||||
|
{renderMainItem(menuItem)} |
||||
|
</li> |
||||
|
); |
||||
|
} |
||||
|
}; |
||||
|
// Your component own properties
|
||||
|
|
||||
|
export default NavigationItem; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue