New Updates.

site/assets/base.css

@@ -4,11 +4,9 @@
   --secondary: #000000;
   --secondary-2: #111;
   --selection: var(--cyan);
-
   --text-base: #000000;
   --text-primary: #000000;
   --text-secondary: white;
-
   --hover: rgba(0, 0, 0, 0.075);
   --hover-1: rgba(0, 0, 0, 0.15);
   --hover-2: rgba(0, 0, 0, 0.25);
@@ -17,15 +15,11 @@
   --red: #da3c3c;
   --purple: #f81ce5;
   --blue: #0070f3;
-
   --pink: #ff0080;
   --pink-light: #ff379c;
-
   --magenta: #eb367f;
-
   --violet: #7928ca;
   --violet-dark: #4c2889;
-
   --accent-0: #fff;
   --accent-1: #fafafa;
   --accent-2: #eaeaea;
@@ -36,7 +30,6 @@
   --accent-7: #333333;
   --accent-8: #111111;
   --accent-9: #000;
-
   --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
     'Helvetica', sans-serif;
 }
@@ -50,11 +43,9 @@
   --hover-1: rgba(255, 255, 255, 0.15);
   --hover-2: rgba(255, 255, 255, 0.25);
   --selection: var(--purple);
-
   --text-base: white;
   --text-primary: white;
   --text-secondary: black;
-
   --accent-9: #fff;
   --accent-8: #fafafa;
   --accent-7: #eaeaea;
@@ -73,17 +64,11 @@
   box-sizing: inherit;
 }
 
-html {
+html,
+body {
   height: 100%;
   box-sizing: border-box;
   touch-action: manipulation;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-html,
-body {
   font-family: var(--font-sans);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -104,15 +89,15 @@ a {
 }
 
 .animated {
-  -webkit-animation-duration: 1s;
   animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
 }
 
 .fadeIn {
-  -webkit-animation-name: fadeIn;
   animation-name: fadeIn;
+  -webkit-animation-name: fadeIn;
 }
 
 @-webkit-keyframes fadeIn {

site/components/common/Layout/Layout.tsx

@@ -1,5 +1,5 @@
 import cn from 'clsx'
-import React, { FC } from 'react'
+import React from 'react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { CommerceProvider } from '@framework'
@@ -14,7 +14,9 @@ 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, { Link } from '../UserNav/MenuSidebarView'
+import MenuSidebarView from '../UserNav/MenuSidebarView'
+
+import type { Link as LinkProps } from '../UserNav/MenuSidebarView'
 
 import LoginView from '@components/auth/LoginView'
 import s from './Layout.module.css'
@@ -29,35 +31,26 @@ const dynamicProps = {
   loading: Loading,
 }
 
-const SignUpView = dynamic(
-  () => import('@components/auth/SignUpView'),
-  {
-    ...dynamicProps
-  }
-)
+const SignUpView = dynamic(() => import('@components/auth/SignUpView'), {
+  ...dynamicProps,
+})
 
 const ForgotPassword = dynamic(
   () => import('@components/auth/ForgotPassword'),
-  {
-    ...dynamicProps
-  }
-)
-
-const FeatureBar = dynamic(
-  () => import('@components/common/FeatureBar'),
-  {
-    ...dynamicProps
-  }
-)
-
-const Modal = dynamic(
-  () => import('@components/ui/Modal'),
   {
     ...dynamicProps,
-    ssr: false
   }
 )
 
+const FeatureBar = dynamic(() => import('@components/common/FeatureBar'), {
+  ...dynamicProps,
+})
+
+const Modal = dynamic(() => import('@components/ui/Modal'), {
+  ...dynamicProps,
+  ssr: false,
+})
+
 interface Props {
   pageProps: {
     pages?: Page[]
@@ -65,7 +58,7 @@ interface Props {
   }
 }
 
-const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
+const ModalView: React.FC<{ modalView: string; closeModal(): any }> = ({
   modalView,
   closeModal,
 }) => {
@@ -78,30 +71,31 @@ const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
   )
 }
 
-const ModalUI: FC = () => {
+const ModalUI: React.FC = () => {
   const { displayModal, closeModal, modalView } = useUI()
   return displayModal ? (
     <ModalView modalView={modalView} closeModal={closeModal} />
   ) : null
 }
 
-const SidebarView: FC<{
+const SidebarView: React.FC<{
   sidebarView: string
   closeSidebar(): any
-  links: Link[]
+  links: LinkProps[]
 }> = ({ sidebarView, closeSidebar, links }) => {
   return (
     <Sidebar onClose={closeSidebar}>
-      {sidebarView === 'MOBILEMENU_VIEW' && <MenuSidebarView links={links} />}
       {sidebarView === 'CART_VIEW' && <CartSidebarView />}
       {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
       {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
       {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
+      {sidebarView === 'MOBILE_CUSTOMERMENU_VIEW' && <MenuSidebarView />}
+      {sidebarView === 'MOBILE_MENU_VIEW' && <MenuSidebarView links={links} />}
     </Sidebar>
   )
 }
 
-const SidebarUI: FC<{ links: any }> = ({ links }) => {
+const SidebarUI: React.FC<{ links: LinkProps[] }> = ({ links }) => {
   const { displaySidebar, closeSidebar, sidebarView } = useUI()
   return displaySidebar ? (
     <SidebarView
@@ -112,7 +106,7 @@ const SidebarUI: FC<{ links: any }> = ({ links }) => {
   ) : null
 }
 
-const Layout: FC<Props> = ({
+const Layout: React.FC<Props> = ({
   children,
   pageProps: { categories = [], ...pageProps },
 }) => {

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

@@ -12,3 +12,13 @@
 .link.active {
   @apply font-bold bg-accent-2;
 }
+
+.root {
+  display: hidden;
+}
+
+@media (min-width: 767px) {
+  .root {
+    display: block;
+  }
+}

site/components/common/UserNav/DropdownCustomerAuth.tsx

@@ -3,19 +3,10 @@ import cn from 'clsx'
 import Link from 'next/link'
 import { useTheme } from 'next-themes'
 import { Moon, Sun } from '@components/icons'
-import { useUI } from '@components/ui/context'
 import useLogout from '@framework/auth/use-logout'
-import { Avatar } from '@components/common'
 import { useRouter } from 'next/router'
 
-import {
-  Dropdown,
-  DropdownContent,
-  DropdownTrigger,
-  DropdownMenuItem,
-  DropdownMenuGroup,
-} from '@components/ui/Dropdown/Dropdown'
-import { useEffect } from 'react'
+import { DropdownMenuItem } from '@components/ui/Dropdown/Dropdown'
 
 const LINKS = [
   {
@@ -32,11 +23,10 @@ const LINKS = [
   },
 ]
 
-const DropdownMenu: React.FC = () => {
+export default function CustomerMenuContent() {
   const logout = useLogout()
   const { pathname } = useRouter()
   const { theme, setTheme } = useTheme()
-  // const { closeSidebarIfPresent } = useUI()
   const router = useRouter()
 
   const handleClick = (
@@ -47,57 +37,46 @@ const DropdownMenu: React.FC = () => {
   }
 
   return (
-    <Dropdown>
-      <DropdownTrigger asChild>
-        <button className="inline-flex justify-center rounded-full">
-          <Avatar />
-        </button>
-      </DropdownTrigger>
-      <DropdownContent sideOffset={8} asChild>
-        <>
-          {LINKS.map(({ name, href }) => (
-            <DropdownMenuItem key={href}>
-              <a
-                onClick={(e) => handleClick(e, href)}
-                className={cn(s.link, {
-                  [s.active]: pathname === href,
-                })}
-              >
-                {name}
-              </a>
-            </DropdownMenuItem>
-          ))}
-          <DropdownMenuItem>
-            <a
-              className={cn(s.link, 'justify-between')}
-              onClick={() => {
-                theme === 'dark' ? setTheme('light') : setTheme('dark')
-              }}
-            >
-              <div>
-                Theme: <strong>{theme}</strong>{' '}
-              </div>
-              <div className="ml-3">
-                {theme == 'dark' ? (
-                  <Moon width={20} height={20} />
-                ) : (
-                  <Sun width="20" height={20} />
-                )}
-              </div>
-            </a>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <a
-              className={cn(s.link, 'border-t border-accent-2 mt-4')}
-              onClick={() => logout()}
-            >
-              Logout
-            </a>
-          </DropdownMenuItem>
-        </>
-      </DropdownContent>
-    </Dropdown>
+    <div>
+      {LINKS.map(({ name, href }) => (
+        <DropdownMenuItem key={href}>
+          <a
+            onClick={(e) => handleClick(e, href)}
+            className={cn(s.link, {
+              [s.active]: pathname === href,
+            })}
+          >
+            {name}
+          </a>
+        </DropdownMenuItem>
+      ))}
+      <DropdownMenuItem>
+        <a
+          className={cn(s.link, 'justify-between')}
+          onClick={() => {
+            theme === 'dark' ? setTheme('light') : setTheme('dark')
+          }}
+        >
+          <div>
+            Theme: <strong>{theme}</strong>{' '}
+          </div>
+          <div className="ml-3">
+            {theme == 'dark' ? (
+              <Moon width={20} height={20} />
+            ) : (
+              <Sun width={20} height={20} />
+            )}
+          </div>
+        </a>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <a
+          className={cn(s.link, 'border-t border-accent-2 mt-4')}
+          onClick={() => logout()}
+        >
+          Logout
+        </a>
+      </DropdownMenuItem>
+    </div>
   )
 }
-
-export default DropdownMenu

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

@@ -3,5 +3,5 @@
 }
 
 .item {
-  @apply text-2xl font-bold;
+  @apply text-xl font-bold py-2;
 }

site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx

@@ -1,31 +1,32 @@
 import Link from 'next/link'
 import s from './MenuSidebarView.module.css'
-import { FC } from 'react'
 import { useUI } from '@components/ui/context'
 import SidebarLayout from '@components/common/SidebarLayout'
-import { Link as LinkProps} from '.'
+import type { Link as LinkProps } from './index'
 
-
-interface MenuProps {
+export default function MenuSidebarView({
+  links = [],
+}: {
   links?: LinkProps[]
-}
-
-const MenuSidebarView: FC<MenuProps> = (props) => {
+}) {
   const { closeSidebar } = useUI()
-  const handleClose = () => closeSidebar()
 
   return (
-    <SidebarLayout handleClose={handleClose}>
+    <SidebarLayout handleClose={() => closeSidebar()}>
       <div className={s.root}>
         <nav>
           <ul>
-            <li className={s.item}>
+            <li className={s.item} onClick={() => closeSidebar()}>
               <Link href="/search">
                 <a>All</a>
               </Link>
             </li>
-            {props.links?.map((l: any) => (
-              <li key={l.href} className={s.item}>
+            {links.map((l: any) => (
+              <li
+                key={l.href}
+                className={s.item}
+                onClick={() => closeSidebar()}
+              >
                 <Link href={l.href}>
                   <a>{l.label}</a>
                 </Link>
@@ -38,4 +39,4 @@ const MenuSidebarView: FC<MenuProps> = (props) => {
   )
 }
 
-export default MenuSidebarView
+MenuSidebarView

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

@@ -1,5 +1,4 @@
 export { default } from './MenuSidebarView'
-
 export interface Link {
   href: string
   label: string

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

@@ -37,7 +37,7 @@
 }
 
 .mobileMenu {
-  @apply flex lg:hidden ml-6;
+  @apply flex lg:hidden ml-6 text-white;
 }
 
 .avatarButton:focus,

site/components/common/UserNav/UserNav.tsx

@@ -4,10 +4,17 @@ import s from './UserNav.module.css'
 import useCart from '@framework/cart/use-cart'
 import DropdownCustomerAuth from './DropdownCustomerAuth'
 import Button from '@components/ui/Button'
-import { Avatar } from '@components/common'
-import { useUI } from '@components/ui/context'
-import { Heart, Bag } from '@components/icons'
+import { Heart, Bag, Menu } from '@components/icons'
 import useCustomer from '@framework/customer/use-customer'
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownTrigger,
+  DropdownMenuItem,
+} from '@components/ui/Dropdown/Dropdown'
+
+import { useUI } from '@components/ui/context'
+import { Avatar } from '@components/common'
 
 import type { LineItem } from '@commerce/types/cart'
 
@@ -55,7 +62,21 @@ const UserNav: React.FC<{
         {process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
           <li className={s.item}>
             {isCustomerLoggedIn ? (
-              <DropdownCustomerAuth />
+              <div className={s.root}>
+                <Dropdown>
+                  <DropdownTrigger asChild>
+                    <button className="inline-flex justify-center rounded-full">
+                      <Avatar />
+                    </button>
+                  </DropdownTrigger>
+                  <DropdownContent
+                    className={s.dropdownContent}
+                    id="DropdownCustomerAuth"
+                  >
+                    <DropdownCustomerAuth />
+                  </DropdownContent>
+                </Dropdown>
+              </div>
             ) : (
               <button
                 className={s.avatarButton}
@@ -67,19 +88,19 @@ const UserNav: React.FC<{
             )}
           </li>
         )}
-        {/* <li className={s.mobileMenu}>
+        <li className={s.mobileMenu}>
           <Button
             className={s.item}
+            aria-label="Menu"
             variant="naked"
             onClick={() => {
-              setSidebarView('MOBILEMENU_VIEW')
+              setSidebarView('MOBILE_MENU_VIEW')
               toggleSidebar()
             }}
-            aria-label="Menu"
           >
             <Menu />
           </Button>
-        </li> */}
+        </li>
       </ul>
     </nav>
   )

site/components/icons/index.ts

@@ -1,17 +1,18 @@
 export { default as Bag } from './Bag'
+export { default as Sun } from './Sun'
+export { default as Moon } from './Moon'
+export { default as Menu } from './Menu'
+export { default as Info } from './Info'
+export { default as Star } from './Star'
+export { default as Plus } from './Plus'
 export { default as Heart } from './Heart'
 export { default as Trash } from './Trash'
 export { default as Cross } from './Cross'
-export { default as Plus } from './Plus'
 export { default as Minus } from './Minus'
 export { default as Check } from './Check'
-export { default as Sun } from './Sun'
-export { default as Moon } from './Moon'
 export { default as Github } from './Github'
-export { default as Info } from './Info'
 export { default as Vercel } from './Vercel'
 export { default as MapPin } from './MapPin'
-export { default as Star } from './Star'
 export { default as ArrowLeft } from './ArrowLeft'
 export { default as ArrowRight } from './ArrowRight'
 export { default as CreditCard } from './CreditCard'

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

@@ -1,7 +1,23 @@
 .root {
-  @apply w-56 bg-accent-0;
+  @apply bg-accent-0;
   animation: none;
   transition: none;
+  min-width: 100%;
+}
+
+@media screen(md) {
+  .root {
+    @apply shadow-lg 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;
+    will-change: transform, opacity;
+    animation-duration: 600ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    animation-fill-mode: forwards;
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+    animation-name: slideIn;
+  }
 }
 
 @keyframes slideIn {
@@ -14,17 +30,3 @@
     transform: translateY(0px);
   }
 }
-
-@media screen(md) {
-  .root {
-    @apply shadow-lg;
-    box-shadow: hsl(206 22% 7% / 45%) 0px 10px 38px -10px,
-      hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
-    will-change: transform, opacity;
-    animation-duration: 600ms;
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-    animation-fill-mode: forwards;
-    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-    animation-name: slideIn;
-  }
-}

site/components/ui/Dropdown/Dropdown.tsx

@@ -4,19 +4,19 @@ import s from './Dropdown.module.css'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 export const Dropdown = DropdownMenu.Root
+export const DropdownMenuItem = DropdownMenu.Item
 export const DropdownTrigger = DropdownMenu.Trigger
 export const DropdownMenuLabel = DropdownMenu.Label
-export const DropdownMenuItem = DropdownMenu.Item
 export const DropdownMenuGroup = DropdownMenu.Group
 
 export const DropdownContent = React.forwardRef<
   HTMLDivElement,
   { children: React.ReactNode } & DropdownMenu.DropdownMenuContentProps &
     React.RefAttributes<HTMLDivElement>
->(function DropdownContent({ children, ...props }, forwardedRef) {
+>(function DropdownContent({ children, className, ...props }, forwardedRef) {
   return (
-    <DropdownMenu.Content ref={forwardedRef} asChild {...props}>
-      <div className={s.root}>{children}</div>
+    <DropdownMenu.Content ref={forwardedRef} sideOffset={8} {...props}>
+      <div className={cn(s.root, className)}>{children}</div>
     </DropdownMenu.Content>
   )
 })

site/components/ui/Sidebar/Sidebar.tsx

@@ -1,14 +1,13 @@
-import { FC, useEffect, useRef } from 'react'
-import s from './Sidebar.module.css'
 import cn from 'clsx'
+import s from './Sidebar.module.css'
+import { useEffect, useRef } from 'react'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
-
 interface SidebarProps {
   children: any
   onClose: () => void
 }
 
-const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
+const Sidebar: React.FC<SidebarProps> = ({ children, onClose }) => {
   const sidebarRef = useRef() as React.MutableRefObject<HTMLDivElement>
   const contentRef = useRef() as React.MutableRefObject<HTMLDivElement>
 

site/tsconfig.json

@@ -23,8 +23,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["../packages/commerce/src"],
       "@commerce/*": ["../packages/commerce/src/*"],
-      "@framework": ["../packages/local/src"],
-      "@framework/*": ["../packages/local/src/*"]
+      "@framework": ["../packages/bigcommerce/src"],
+      "@framework/*": ["../packages/bigcommerce/src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],