add cart menu

app/layout.tsx

@@ -1,5 +1,5 @@
 import { CartProvider } from 'components/cart/cart-context'
-// import { Navbar } from 'components/layout/navbar'
+import { Navbar } from 'components/layout/navbar'
 import NavbarV2 from 'components/layout/navbar/NavbarV2'
 import { WelcomeToast } from 'components/welcome-toast'
 import { GeistSans } from 'geist/font/sans'

components/layout/UserNav/UserNav.tsx

@@ -17,50 +17,50 @@
 
 // const countItem = (count: number, item: LineItem) => count + item.quantity
 
-// const UserNav: React.FC<{
+const UserNav: React.FC<{
-//   className?: string
+  className?: string
-// }> = ({ className }) => {
+}> = ({ className }) => {
-//   const { data } = useCart()
+  //   const { data } = useCart()
-//   const { data: isCustomerLoggedIn } = useCustomer()
+  //   const { data: isCustomerLoggedIn } = useCustomer()
-//   const {
+  //   const {
-//     toggleSidebar,
+  //     toggleSidebar,
-//     closeSidebarIfPresent,
+  //     closeSidebarIfPresent,
-//     openModal,
+  //     openModal,
-//     setSidebarView,
+  //     setSidebarView,
-//     openSidebar,
+  //     openSidebar,
-//     displaySidebar,
+  //     displaySidebar,
-//   } = useUI()
+  //   } = useUI()
 
-//   const itemsCount = data?.lineItems?.reduce(countItem, 0) ?? 0
+  //   const itemsCount = data?.lineItems?.reduce(countItem, 0) ?? 0
-//   const DropdownTrigger = isCustomerLoggedIn
+  //   const DropdownTrigger = isCustomerLoggedIn
-//     ? DropdownTriggerInst
+  //     ? DropdownTriggerInst
-//     : React.Fragment
+  //     : React.Fragment
 
-//   return (
+  return (
-//     <nav className={cn(s.root, className)}>
+    <nav>Button</nav>
-//       <ul className={s.list}>
+    // <nav className={cn(s.root, className)}>
-//         {process.env.COMMERCE_CART_ENABLED && (
+    //   <ul className={s.list}>
-//           <li className={s.item}>
+    //     {process.env.COMMERCE_CART_ENABLED && (
-//             <Button
+    //       <li className={s.item}>
-//               className={s.item}
+    //           className={s.item}
-//               variant="naked"
+    //           variant="naked"
-//               onClick={() => {
+    //           onClick={() => {
-//                 setSidebarView('CART_VIEW')
+    //             setSidebarView('CART_VIEW')
-//                 openSidebar()
+    //             openSidebar()
-//               }}
+    //           }}
-//               aria-label={`Cart items: ${itemsCount}`}
+    //           aria-label={`Cart items: ${itemsCount}`}
-//             >
+    //         >
-//               <Bag className={displaySidebar ? undefined : 'text-white'} />
+    //           <Bag className={displaySidebar ? undefined : 'text-white'} />
 
-//               {itemsCount > 0 && (
+    //           {itemsCount > 0 && (
-//                 <span className={s.bagCount}>{itemsCount}</span>
+    //             <span className={s.bagCount}>{itemsCount}</span>
-//               )}
+    //           )}
-//             </Button>
+    //         </Button> */}
-//           </li>
+    //       </li>
-//         )}
+    //     )}
-//       </ul>
+    //   </ul>
-//     </nav>
+    // </nav>
-//   )
+  )
-// }
+}
 
-// export default UserNav
+export default UserNav

components/layout/UserNav/index.ts

@@ -1,3 +1,3 @@
-// export { default } from './UserNav'
+export { default } from './UserNav'
 // export { default as MenuSidebarView } from './MenuSidebarView'
 // export { default as CustomerMenuContent } from './CustomerMenuContent'

components/layout/navbar/NavbarV2.tsx

@@ -2,7 +2,7 @@
 
 import { FC, useEffect, useMemo, useRef } from 'react'
 import Link from 'next/link'
-// import { UserNav } from '@components/common'
+import UserNav from '../UserNav'
 import { useRouter, usePathname } from 'next/navigation'
 import Image from 'next/image'
 
@@ -18,6 +18,7 @@ import {
 // Product data
 import { GLOVES_DATA } from '@/data/Gloves'
 import { INDUSTRIAL_DATA } from '@/data/Industrial'
+import CartModal from '@/components/cart/modal'
 
 let _scrollTopValue: number | null = null
 
@@ -573,6 +574,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
                       {/* Cart */}
                       <div className="ml-4 flow-root lg:ml-8">
                         {/* <UserNav /> */}
+                        <CartModal />
                       </div>
                     </div>
                   </div>
@@ -583,46 +585,6 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
         </nav>
       </header>
 
-      {/* <NavbarRoot>
-        <Container clean className="mx-auto max-w-8xl px-6">
-          <div className={s.nav}>
-            <div className="flex items-center flex-1">
-              <Link href="/" className={s.logo} aria-label="Logo">
-                <Logo />
-              </Link>
-
-              <nav className={s.navMenu}>
-                {NAVIGATION.map((menuContent) => (
-                  <Link
-                    key={menuContent.category}
-                    href={menuContent.link}
-                    className={s.link}
-                  >
-                    {menuContent.category}
-                  </Link>
-                ))}
-              </nav>
-            </div> */}
-
-      {/* {process.env.COMMERCE_SEARCH_ENABLED && (
-            <div className="justify-center flex-1 hidden lg:flex">
-              <Searchbar />
-            </div>
-          )} */}
-
-      {/* <div className="flex items-center justify-end flex-1 space-x-8">
-              <UserNav />
-            </div>
-          </div>
-
-          {process.env.COMMERCE_SEARCH_ENABLED && (
-            <div className="flex pb-4 lg:px-6 lg:hidden">
-              <Searchbar id="mobile-search" />
-            </div>
-          )}
-        </Container>
-      </NavbarRoot> */}
-
       <div
         style={{
           height:

components/layout/navbar/index.tsx

@@ -13,7 +13,7 @@ export async function Navbar() {
   const menu = await getMenu('next-js-frontend-header-menu')
 
   return (
-    <nav className="relative flex items-center justify-between p-4 lg:px-6">
+    <nav className="relative flex items-center justify-between p-100 lg:px-6">
       <div className="block flex-none md:hidden">
         <Suspense fallback={null}>
           <MobileMenu menu={menu} />