Setup Mobile Menu Sidebar

components/common/Layout/Layout.tsx

@@ -13,6 +13,7 @@ import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
 import PaymentMethodView from '@components/checkout/PaymentMethodView'
 import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
+import MenuSidebarView from '../UserNav/MenuSidebarView'
 
 import LoginView from '@components/auth/LoginView'
 import s from './Layout.module.css'
@@ -69,12 +70,14 @@ const ModalUI: FC = () => {
   ) : null
 }
 
-const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({
+const SidebarView: FC<{
-  sidebarView,
+  sidebarView: string
-  closeSidebar,
+  closeSidebar(): any
-}) => {
+  links: any
+}> = ({ 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 />}
@@ -83,10 +86,14 @@ const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({
   )
 }
 
-const SidebarUI: FC = () => {
+const SidebarUI: FC<{ links: any }> = ({ links }) => {
   const { displaySidebar, closeSidebar, sidebarView } = useUI()
   return displaySidebar ? (
-    <SidebarView sidebarView={sidebarView} closeSidebar={closeSidebar} />
+    <SidebarView
+      sidebarView={sidebarView}
+      closeSidebar={closeSidebar}
+      links={links}
+    />
   ) : null
 }
 
@@ -108,7 +115,7 @@ const Layout: FC<Props> = ({
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
         <ModalUI />
-        <SidebarUI />
+        <SidebarUI links={navBarlinks} />
         <FeatureBar
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}

components/common/Navbar/Navbar.tsx

@@ -9,6 +9,7 @@ interface Link {
   href: string
   label: string
 }
+
 interface NavbarProps {
   links?: Link[]
 }

components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx

@@ -0,0 +1,38 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import { FC } from 'react'
+import { useUI } from '@components/ui/context'
+import SidebarLayout from '@components/common/SidebarLayout'
+
+interface Link {
+  href: string
+  label: string
+}
+
+interface MenuProps {
+  links?: Link[]
+}
+
+const MenuSidebarView: FC<MenuProps> = (props) => {
+  const { closeSidebar } = useUI()
+  const handleClose = () => closeSidebar()
+
+  console.log(props.links)
+  return (
+    <SidebarLayout handleClose={handleClose}>
+      <div className="px-4 sm:px-6 flex-1">
+        <ul>
+          {props.links?.map((l: any) => (
+            <li key={l.href}>
+              <Link href={l.href}>
+                <a>{l.label}</a>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </SidebarLayout>
+  )
+}
+
+export default MenuSidebarView

components/common/UserNav/MenuSidebarView/index.ts

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

components/common/UserNav/UserNav.tsx

@@ -10,6 +10,7 @@ import { useUI } from '@components/ui/context'
 import Button from '@components/ui/Button'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'
+import Menu from '@components/icons/Menu'
 
 interface Props {
   className?: string
@@ -20,7 +21,8 @@ const countItem = (count: number, item: LineItem) => count + item.quantity
 const UserNav: FC<Props> = ({ className }) => {
   const { data } = useCart()
   const { data: customer } = useCustomer()
-  const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
+  const { toggleSidebar, closeSidebarIfPresent, openModal, setSidebarView } =
+    useUI()
   const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
 
   return (
@@ -28,9 +30,16 @@ const UserNav: FC<Props> = ({ className }) => {
       <ul className={s.list}>
         {process.env.COMMERCE_CART_ENABLED && (
           <li className={s.item}>
-            <Button className={s.item} variant="naked" onClick={toggleSidebar} aria-label="Cart">
+            <Button
+              className={s.item}
+              variant="naked"
+              onClick={toggleSidebar}
+              aria-label="Cart"
+            >
               <Bag />
-              {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+              {itemsCount > 0 && (
+                <span className={s.bagCount}>{itemsCount}</span>
+              )}
             </Button>
           </li>
         )}
@@ -58,6 +67,19 @@ const UserNav: FC<Props> = ({ className }) => {
             )}
           </li>
         )}
+        <li className="block lg:hidden">
+          <Button
+            className={s.item}
+            variant="naked"
+            onClick={() => {
+              setSidebarView('MOBILEMENU_VIEW')
+              toggleSidebar()
+            }}
+            aria-label="Menu"
+          >
+            <Menu />
+          </Button>
+        </li>
       </ul>
     </nav>
   )

components/icons/Menu.tsx

@@ -0,0 +1,21 @@
+const Menu = ({ ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-6 w-6"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M4 6h16M4 12h16m-7 6h7"
+      />
+    </svg>
+  )
+}
+
+export default Menu