Dropdown fix

site/components/common/Layout/Layout.tsx

@@ -13,10 +13,7 @@ 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 {
+import { MenuSidebarView } from '@components/common/UserNav'
-  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'
@@ -89,7 +86,6 @@ const SidebarView: React.FC<{
       {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
       {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
       {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
-      {sidebarView === 'MOBILE_CUSTOMERMENU_VIEW' && <AuthMenuSidebarView />}
       {sidebarView === 'MOBILE_MENU_VIEW' && <MenuSidebarView links={links} />}
     </Sidebar>
   )

site/components/common/SidebarLayout/SidebarLayout.tsx

@@ -38,9 +38,8 @@ const SidebarLayout: FC<ComponentProps> = ({
             <span className="ml-2 text-accent-7 text-xs">Back</span>
           </button>
         )}
-        <span className={s.nav}>
+
-          <UserNav />
+        <UserNav />
-        </span>
       </header>
       <div className={s.container}>{children}</div>
     </div>

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

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

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

@@ -1,11 +0,0 @@
-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

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

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

@@ -14,11 +14,22 @@
 }
 
 .root {
-  display: hidden;
+  @apply inset-0 fixed;
+  left: 72px;
+  z-index: 10;
+  height: 100vh;
+  min-width: 100vw;
+  transition: none;
 }
 
-@media (min-width: 767px) {
+.placeholder {
+  height: 68px;
+}
+
+@media screen(lg) {
   .root {
-    display: block;
+    @apply static;
+    min-width: inherit;
+    height: inherit;
   }
 }

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

@@ -1,12 +1,15 @@
 import cn from 'clsx'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
-import { Moon, Sun } from '@components/icons'
+import { UserNav } from '@components/common'
+import { Moon, Sun, Cross } from '@components/icons'
 import s from './CustomerMenuContent.module.css'
 import useLogout from '@framework/auth/use-logout'
 import {
+  Dropdown as DropdownRoot,
   DropdownMenuItem,
   DropdownContent,
+  DropdownTrigger,
 } from '@components/ui/Dropdown/Dropdown'
 
 const LINKS = [
@@ -24,6 +27,8 @@ const LINKS = [
   },
 ]
 
+export const Dropdown = <DropdownRoot />
+
 export default function CustomerMenuContent() {
   const router = useRouter()
   const logout = useLogout()
@@ -35,14 +40,32 @@ export default function CustomerMenuContent() {
   }
 
   return (
-    <DropdownContent id="CustomerMenuContent">
+    <DropdownContent
+      asChild
+      side="bottom"
+      sideOffset={10}
+      className={s.root}
+      id="CustomerMenuContent"
+    >
+      {/* <div className={s.placeholder}>
+        <button
+          aria-label="Close"
+          className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none mr-6"
+        >
+          <Cross className="h-6 w-6 hover:text-accent-3" />
+          <span className="ml-2 text-accent-7 text-sm ">Close</span>
+        </button>
+        <div className={s.nav}>
+          <UserNav />
+        </div>
+      </div> */}
       {LINKS.map(({ name, href }) => (
         <DropdownMenuItem key={href}>
           <a
-            onClick={(e) => handleClick(e, href)}
             className={cn(s.link, {
               [s.active]: pathname === href,
             })}
+            onClick={(e) => handleClick(e, href)}
           >
             {name}
           </a>
@@ -52,7 +75,7 @@ export default function CustomerMenuContent() {
         <a
           className={cn(s.link, 'justify-between')}
           onClick={() => {
-            theme === 'dark' ? setTheme('light') : setTheme('dark')
+            setTheme(theme === 'dark' ? 'light' : 'dark')
           }}
         >
           <div>

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

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

site/components/common/UserNav/UserNav.tsx

@@ -1,19 +1,18 @@
 import cn from 'clsx'
 import Link from 'next/link'
 import s from './UserNav.module.css'
-import useCart from '@framework/cart/use-cart'
-import CustomerMenuContent from './CustomerMenuContent'
-import Button from '@components/ui/Button'
-import { useUI } from '@components/ui/context'
 import { Avatar } from '@components/common'
+import useCart from '@framework/cart/use-cart'
+import { useUI } from '@components/ui/context'
 import { Heart, Bag, Menu } from '@components/icons'
+import { CustomerMenuContent, Dropwdown } from './CustomerMenuContent'
 import useCustomer from '@framework/customer/use-customer'
+import React from 'react'
 import {
   Dropdown,
-  DropdownContent,
+  DropdownTrigger as DropdownTriggerInst,
-  DropdownTrigger,
+  Button,
-  DropdownMenuItem,
+} from '@components/ui'
-} from '@components/ui/Dropdown/Dropdown'
 
 import type { LineItem } from '@commerce/types/cart'
 
@@ -33,6 +32,9 @@ const UserNav: React.FC<{
   } = useUI()
 
   const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
+  const DropdownTrigger = isCustomerLoggedIn
+    ? DropdownTriggerInst
+    : React.Fragment
 
   return (
     <nav className={cn(s.root, className)}>
@@ -66,39 +68,18 @@ const UserNav: React.FC<{
         )}
         {process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
           <li className={s.item}>
-            {isCustomerLoggedIn ? (
+            <Dropdown>
-              <Dropdown>
+              <DropdownTrigger asChild>
-                <div className={s.dropdownDesktop}>
+                <button
-                  <div className={s.dropdownCustomerMenu}>
+                  aria-label="Menu"
-                    <DropdownTrigger asChild>
+                  className={s.avatarButton}
-                      <button className="inline-flex justify-center rounded-full">
+                  onClick={() => (isCustomerLoggedIn ? null : openModal())}
-                        <Avatar />
+                >
-                      </button>
+                  <Avatar />
-                    </DropdownTrigger>
+                </button>
-                    <CustomerMenuContent />
+              </DropdownTrigger>
-                  </div>
+              <CustomerMenuContent />
-                </div>
+            </Dropdown>
-                <div className={s.dropdownMobile}>
-                  <button
-                    className="inline-flex justify-center rounded-full"
-                    onClick={() => {
-                      openSidebar()
-                      setSidebarView('MOBILE_CUSTOMERMENU_VIEW')
-                    }}
-                  >
-                    <Avatar />
-                  </button>
-                </div>
-              </Dropdown>
-            ) : (
-              <button
-                className={s.avatarButton}
-                aria-label="Menu"
-                onClick={() => openModal()}
-              >
-                <Avatar />
-              </button>
-            )}
           </li>
         )}
         <li className={s.mobileMenu}>

site/components/common/UserNav/index.ts

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

site/components/ui/Dropdown/Dropdown.module.css

@@ -5,9 +5,9 @@
   min-width: 100%;
 }
 
-@media screen(md) {
+@media screen(lg) {
   .root {
-    @apply shadow-lg bg-accent-0;
+    @apply bg-accent-0;
     box-shadow: hsl(206 22% 7% / 45%) 0px 10px 38px -10px,
       hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
     min-width: 14rem;

site/components/ui/index.ts

@@ -13,4 +13,5 @@ export { default as Input } from './Input'
 export { default as Collapse } from './Collapse'
 export { default as Quantity } from './Quantity'
 export { default as Rating } from './Rating'
+export * from './Dropdown/Dropdown'
 export { useUI } from './context'