New Updates.

site/components/common/Layout/Layout.tsx

@@ -1,12 +1,11 @@
 import cn from 'clsx'
-import React from 'react'
+import s from './Layout.module.css'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { CommerceProvider } from '@framework'
+import LoginView from '@components/auth/LoginView'
 import { useUI } from '@components/ui/context'
-import type { Page } from '@commerce/types/page'
 import { Navbar, Footer } from '@components/common'
-import type { Category } from '@commerce/types/site'
 import ShippingView from '@components/checkout/ShippingView'
 import CartSidebarView from '@components/cart/CartSidebarView'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
@@ -14,13 +13,14 @@ import { Sidebar, Button, LoadingDots } from '@components/ui'
 import PaymentMethodView from '@components/checkout/PaymentMethodView'
 import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
 import { CheckoutProvider } from '@components/checkout/context'
-import MenuSidebarView from '../UserNav/MenuSidebarView'
-
+import {
+  AuthMenuSidebarView,
+  MenuSidebarView,
+} from '@components/common/UserNav'
+import type { Page } from '@commerce/types/page'
+import type { Category } from '@commerce/types/site'
 import type { Link as LinkProps } from '../UserNav/MenuSidebarView'
 
-import LoginView from '@components/auth/LoginView'
-import s from './Layout.module.css'
-
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">
     <LoadingDots />
@@ -89,7 +89,7 @@ const SidebarView: React.FC<{
       {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
       {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
       {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
-      {sidebarView === 'MOBILE_CUSTOMERMENU_VIEW' && <MenuSidebarView />}
+      {sidebarView === 'MOBILE_CUSTOMERMENU_VIEW' && <AuthMenuSidebarView />}
       {sidebarView === 'MOBILE_MENU_VIEW' && <MenuSidebarView links={links} />}
     </Sidebar>
   )

site/components/common/UserNav/AuthMenuSidebarView/AuthMenuSidebarView.module.css

@@ -0,0 +1,3 @@
+.root {
+  min-height: 100vh;
+}

site/components/common/UserNav/AuthMenuSidebarView/AuthMenuSidebarView.tsx

@@ -0,0 +1,11 @@
+import { useUI } from '@components/ui/context'
+import SidebarLayout from '@components/common/SidebarLayout'
+
+export default function AuthMenuSidebarView() {
+  const { closeSidebar } = useUI()
+  return (
+    <SidebarLayout handleClose={() => closeSidebar()}>
+      THIS IS A SIDEBAR VIEW
+    </SidebarLayout>
+  )
+}

site/components/common/UserNav/AuthMenuSidebarView/index.ts

@@ -0,0 +1 @@
+export { default } from './AuthMenuSidebarView'

site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.tsx

@@ -1,12 +1,13 @@
-import s from './DropdownCustomerAuth.module.css'
 import cn from 'clsx'
-import Link from 'next/link'
 import { useTheme } from 'next-themes'
-import { Moon, Sun } from '@components/icons'
-import useLogout from '@framework/auth/use-logout'
 import { useRouter } from 'next/router'
-
-import { DropdownMenuItem } from '@components/ui/Dropdown/Dropdown'
+import { Moon, Sun } from '@components/icons'
+import s from './CustomerMenuContent.module.css'
+import useLogout from '@framework/auth/use-logout'
+import {
+  DropdownMenuItem,
+  DropdownContent,
+} from '@components/ui/Dropdown/Dropdown'
 
 const LINKS = [
   {
@@ -24,20 +25,17 @@ const LINKS = [
 ]
 
 export default function CustomerMenuContent() {
+  const router = useRouter()
   const logout = useLogout()
   const { pathname } = useRouter()
   const { theme, setTheme } = useTheme()
-  const router = useRouter()
 
-  const handleClick = (
-    e: React.MouseEvent<HTMLAnchorElement>,
-    href: string
-  ) => {
+  function handleClick(_: React.MouseEvent<HTMLAnchorElement>, href: string) {
     router.push(href)
   }
 
   return (
-    <div>
+    <DropdownContent id="CustomerMenuContent">
       {LINKS.map(({ name, href }) => (
         <DropdownMenuItem key={href}>
           <a
@@ -77,6 +75,6 @@ export default function CustomerMenuContent() {
           Logout
         </a>
       </DropdownMenuItem>
-    </div>
+    </DropdownContent>
   )
 }

site/components/common/UserNav/CustomerMenuContent/index.ts

@@ -0,0 +1 @@
+export { default } from './CustomerMenuContent'

site/components/common/UserNav/UserNav.module.css

@@ -44,3 +44,16 @@
 .mobileMenu:focus {
   @apply outline-none;
 }
+
+.dropdownDesktop {
+  @apply hidden -z-10;
+}
+
+@media screen(lg) {
+  .dropdownDesktop {
+    @apply block;
+  }
+  .dropdownMobile {
+    @apply hidden;
+  }
+}

site/components/common/UserNav/UserNav.tsx

@@ -2,8 +2,10 @@ import cn from 'clsx'
 import Link from 'next/link'
 import s from './UserNav.module.css'
 import useCart from '@framework/cart/use-cart'
-import DropdownCustomerAuth from './DropdownCustomerAuth'
+import CustomerMenuContent from './CustomerMenuContent'
 import Button from '@components/ui/Button'
+import { useUI } from '@components/ui/context'
+import { Avatar } from '@components/common'
 import { Heart, Bag, Menu } from '@components/icons'
 import useCustomer from '@framework/customer/use-customer'
 import {
@@ -13,9 +15,6 @@ import {
   DropdownMenuItem,
 } from '@components/ui/Dropdown/Dropdown'
 
-import { useUI } from '@components/ui/context'
-import { Avatar } from '@components/common'
-
 import type { LineItem } from '@commerce/types/cart'
 
 const countItem = (count: number, item: LineItem) => count + item.quantity
@@ -25,8 +24,14 @@ const UserNav: React.FC<{
 }> = ({ className }) => {
   const { data } = useCart()
   const { data: isCustomerLoggedIn } = useCustomer()
-  const { toggleSidebar, closeSidebarIfPresent, openModal, setSidebarView } =
-    useUI()
+  const {
+    toggleSidebar,
+    closeSidebarIfPresent,
+    openModal,
+    setSidebarView,
+    openSidebar,
+  } = useUI()
+
   const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
 
   return (
@@ -62,21 +67,29 @@ const UserNav: React.FC<{
         {process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
           <li className={s.item}>
             {isCustomerLoggedIn ? (
-              <div className={s.root}>
-                <Dropdown>
-                  <DropdownTrigger asChild>
-                    <button className="inline-flex justify-center rounded-full">
-                      <Avatar />
-                    </button>
-                  </DropdownTrigger>
-                  <DropdownContent
-                    className={s.dropdownContent}
-                    id="DropdownCustomerAuth"
+              <Dropdown>
+                <div className={s.dropdownDesktop}>
+                  <div className={s.dropdownCustomerMenu}>
+                    <DropdownTrigger asChild>
+                      <button className="inline-flex justify-center rounded-full">
+                        <Avatar />
+                      </button>
+                    </DropdownTrigger>
+                    <CustomerMenuContent />
+                  </div>
+                </div>
+                <div className={s.dropdownMobile}>
+                  <button
+                    className="inline-flex justify-center rounded-full"
+                    onClick={() => {
+                      openSidebar()
+                      setSidebarView('MOBILE_CUSTOMERMENU_VIEW')
+                    }}
                   >
-                    <DropdownCustomerAuth />
-                  </DropdownContent>
-                </Dropdown>
-              </div>
+                    <Avatar />
+                  </button>
+                </div>
+              </Dropdown>
             ) : (
               <button
                 className={s.avatarButton}
@@ -94,8 +107,8 @@ const UserNav: React.FC<{
             aria-label="Menu"
             variant="naked"
             onClick={() => {
+              openSidebar()
               setSidebarView('MOBILE_MENU_VIEW')
-              toggleSidebar()
             }}
           >
             <Menu />

site/components/common/UserNav/index.ts

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