"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[7298],{"./src/components/layout/Header/Dropdown.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CategoriesDropdown:()=>CategoriesDropdown,Default:()=>Default,InDarkMode:()=>InDarkMode,LongSubmenu:()=>LongSubmenu,PagesDropdown:()=>PagesDropdown,SingleItem:()=>SingleItem,StickyMode:()=>StickyMode,WithNestedSubmenus:()=>WithNestedSubmenus,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Layout/Header/Dropdown",component:__webpack_require__("./src/components/layout/Header/Dropdown.tsx").A,parameters:{layout:"centered",nextjs:{appDirectory:!0}},tags:["autodocs"],decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"p-8 min-h-[400px]",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("nav",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("ul",{className:"flex items-center gap-6",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})})})]},shopMenu={title:"Shop",submenu:[{title:"All Products",path:"/shop"},{title:"Categories",path:"/shop/categories"},{title:"New Arrivals",path:"/shop/new-arrivals"},{title:"Best Sellers",path:"/shop/best-sellers"},{title:"Sale",path:"/shop/sale"}]},Default={args:{menuItem:shopMenu,stickyMenu:!1}},StickyMode={args:{menuItem:shopMenu,stickyMenu:!0}},CategoriesDropdown={args:{menuItem:{title:"Categories",submenu:[{title:"Electronics",path:"/categories/electronics"},{title:"Clothing",path:"/categories/clothing"},{title:"Home & Garden",path:"/categories/home-garden"},{title:"Sports",path:"/categories/sports"}]},stickyMenu:!1}},PagesDropdown={args:{menuItem:{title:"Pages",submenu:[{title:"About Us",path:"/about"},{title:"Contact",path:"/contact"},{title:"FAQ",path:"/faq"},{title:"Privacy Policy",path:"/privacy"},{title:"Terms of Service",path:"/terms"}]},stickyMenu:!1}},LongSubmenu={args:{menuItem:{title:"Brands",submenu:[{title:"Apple",path:"/brands/apple"},{title:"Samsung",path:"/brands/samsung"},{title:"Sony",path:"/brands/sony"},{title:"Nike",path:"/brands/nike"},{title:"Adidas",path:"/brands/adidas"},{title:"Puma",path:"/brands/puma"},{title:"Microsoft",path:"/brands/microsoft"},{title:"Google",path:"/brands/google"}]},stickyMenu:!1}},SingleItem={args:{menuItem:{title:"Help",submenu:[{title:"Help Center",path:"/help"}]},stickyMenu:!1}},InDarkMode={args:{menuItem:shopMenu,stickyMenu:!1},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"dark bg-gray-900 p-8 min-h-[400px]",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("nav",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("ul",{className:"flex items-center gap-6",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})})})]},WithNestedSubmenus={args:{menuItem:{title:"Admin",submenu:[{title:"Dashboard",path:"/admin"},{title:"Store Management",submenu:[{title:"Products",path:"/admin/products"},{title:"Categories",path:"/admin/categories"}]},{title:"Users",submenu:[{title:"All Users",path:"/admin/users"},{title:"Roles & Permissions",path:"/admin/users/roles"}]},{title:"Settings",submenu:[{title:"General",path:"/admin/settings/general"},{title:"Payments",path:"/admin/settings/payments"},{title:"Shipping",path:"/admin/settings/shipping"},{title:"Notifications",path:"/admin/settings/notifications"}]},{title:"Reports",submenu:[{title:"Sales",path:"/admin/reports/sales"},{title:"Inventory",path:"/admin/reports/inventory"},{title:"Customers",path:"/admin/reports/customers"}]}]},stickyMenu:!1},parameters:{docs:{description:{story:'Dropdown menu with nested submenus. Hover over "Users", "Settings", or "Reports" to see the nested submenu fly out to the right.'}}}},__namedExportsOrder=["Default","StickyMode","CategoriesDropdown","PagesDropdown","LongSubmenu","SingleItem","InDarkMode","WithNestedSubmenus"]},"./src/components/layout/Header/Dropdown.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/next/dist/compiled/react/index.js"),next_navigation__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/nextjs/dist/export-mocks/navigation/index.js"),next_link__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/next/link.js"),next_link__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(next_link__WEBPACK_IMPORTED_MODULE_3__),_components_ui_icons__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/components/ui/icons/index.ts");const SubmenuItem=({item,pathUrl,onNavigate})=>{const[isOpen,setIsOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return item.submenu&&item.submenu.length>0?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("li",{role:"none",className:"relative",onMouseEnter:()=>setIsOpen(!0),onMouseLeave:()=>setIsOpen(!1),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button",{type:"button",onClick:()=>setIsOpen(!isOpen),"aria-expanded":isOpen,"aria-haspopup":"menu",className:"flex items-center justify-between w-full text-custom-sm text-dark dark:text-gray-200 hover:text-blue hover:bg-gray-1 dark:hover:bg-gray-700 py-[7px] px-4.5 "+(pathUrl.startsWith(item.path||"")&&"/"!==item.path&&item.path?"text-blue bg-gray-1 dark:bg-gray-700":""),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{children:item.title}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_4__.In,{name:"chevron-right",className:"fill-current ml-2",size:14,"aria-hidden":"true"})]}),isOpen&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("ul",{role:"menu","aria-label":`${item.title} submenu`,className:"absolute left-full top-0 min-w-[180px] bg-white dark:bg-gray-800 shadow-lg border border-gray-3 dark:border-gray-600 rounded-md py-2 z-50",children:item.submenu?.map((subItem,i)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(SubmenuItem,{item:subItem,pathUrl,onNavigate},i))})]}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("li",{role:"none",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(next_link__WEBPACK_IMPORTED_MODULE_3___default(),{href:item.path??"#",role:"menuitem",onClick:onNavigate,className:"flex text-custom-sm text-dark dark:text-gray-200 hover:text-blue hover:bg-gray-1 dark:hover:bg-gray-700 py-[7px] px-4.5 "+(pathUrl===item.path?"text-blue bg-gray-1 dark:bg-gray-700":""),children:item.title})})},__WEBPACK_DEFAULT_EXPORT__=({menuItem,stickyMenu})=>{const[dropdownToggler,setDropdownToggler]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1),[forceClosed,setForceClosed]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1),pathUrl=(0,next_navigation__WEBPACK_IMPORTED_MODULE_2__.usePathname)()||"",menuButtonRef=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null),menuId=(0,react__WEBPACK_IMPORTED_MODULE_1__.useId)(),closeDropdown=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(()=>{setDropdownToggler(!1),setForceClosed(!0)},[]),handleMouseLeave=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(()=>{setForceClosed(!1),setDropdownToggler(!1)},[]),handleKeyDown=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(e=>{switch(e.key){case"Escape":setDropdownToggler(!1),setForceClosed(!0),menuButtonRef.current?.focus();break;case"ArrowDown":dropdownToggler||(e.preventDefault(),setDropdownToggler(!0),setForceClosed(!1));break;case"ArrowUp":dropdownToggler&&(e.preventDefault(),setDropdownToggler(!1))}},[dropdownToggler]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("li",{role:"none",className:"group relative before:w-0 before:h-[3px] before:bg-blue before:absolute before:left-0 before:top-0 before:rounded-b-[3px] before:ease-out before:duration-200 hover:before:w-full "+(pathUrl.includes(menuItem.title)?"before:!w-full":""),onKeyDown:handleKeyDown,onMouseLeave:handleMouseLeave,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button",{ref:menuButtonRef,type:"button",onClick:()=>{setDropdownToggler(!dropdownToggler),setForceClosed(!1)},"aria-expanded":dropdownToggler,"aria-haspopup":"menu","aria-controls":menuId,className:`hover:text-blue text-custom-sm font-medium text-dark dark:text-gray-200 flex items-center gap-1.5 capitalize ${stickyMenu?"xl:py-4":"xl:py-6"} ${pathUrl.includes(menuItem.title)?"!text-blue":""}`,children:[menuItem.title,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_4__.In,{name:"chevron-down",className:"fill-current cursor-pointer",size:16,"aria-hidden":"true"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("ul",{id:menuId,role:"menu","aria-label":`${menuItem.title} submenu`,className:`dropdown ${forceClosed?"dropdown-closed":dropdownToggler?"dropdown-open":""} xl:group-hover:translate-y-0`,children:menuItem.submenu?.map((item,i)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(SubmenuItem,{item,pathUrl,onNavigate:closeDropdown},i))})]})}}}]);