Polish

site/components/common/Layout/Layout.tsx

@@ -83,9 +83,9 @@ const SidebarView: React.FC<{
   return (
     <Sidebar onClose={closeSidebar}>
       {sidebarView === 'CART_VIEW' && <CartSidebarView />}
-      {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
-      {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
       {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
+      {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
+      {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
       {sidebarView === 'MOBILE_MENU_VIEW' && <MenuSidebarView links={links} />}
     </Sidebar>
   )
@@ -95,9 +95,9 @@ const SidebarUI: React.FC<{ links: LinkProps[] }> = ({ links }) => {
   const { displaySidebar, closeSidebar, sidebarView } = useUI()
   return displaySidebar ? (
     <SidebarView
+      links={links}
       sidebarView={sidebarView}
       closeSidebar={closeSidebar}
-      links={links}
     />
   ) : null
 }

site/components/common/SidebarLayout/SidebarLayout.tsx

@@ -12,8 +12,8 @@ type ComponentProps = { className?: string } & (
 const SidebarLayout: FC<ComponentProps> = ({
   children,
   className,
-  handleClose,
   handleBack,
+  handleClose,
 }) => {
   return (
     <div className={cn(s.root, className)}>

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

@@ -1,18 +1,3 @@
-.link {
-  @apply text-primary flex cursor-pointer px-6 py-3
-  transition ease-in-out duration-150 leading-6
-  font-medium items-center capitalize w-full box-border
-  outline-0;
-}
-
-.link:hover {
-  @apply bg-accent-1 outline-none;
-}
-
-.link.active {
-  @apply font-bold bg-accent-2;
-}
-
 .root {
   @apply inset-0 fixed;
   left: 72px;
@@ -22,10 +7,6 @@
   transition: none;
 }
 
-.placeholder {
-  height: 68px;
-}
-
 @media screen(lg) {
   .root {
     @apply static;
@@ -33,3 +14,18 @@
     height: inherit;
   }
 }
+
+.link {
+  @apply text-primary flex cursor-pointer px-6 py-3
+    transition ease-in-out duration-150 leading-6
+    font-medium items-center capitalize w-full box-border
+    outline-0;
+}
+
+.link:hover {
+  @apply bg-accent-1 outline-none;
+}
+
+.link.active {
+  @apply font-bold bg-accent-2;
+}

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

@@ -1,15 +1,12 @@
 import cn from 'clsx'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
-import { UserNav } from '@components/common'
+import { Moon, Sun } from '@components/icons'
-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,
+  DropdownMenuItem,
 } from '@components/ui/Dropdown/Dropdown'
 
 const LINKS = [
@@ -27,8 +24,6 @@ const LINKS = [
   },
 ]
 
-export const Dropdown = <DropdownRoot />
-
 export default function CustomerMenuContent() {
   const router = useRouter()
   const logout = useLogout()
@@ -47,18 +42,6 @@ export default function CustomerMenuContent() {
       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