Setup Basic Mobile Menu Items Styling

components/common/SidebarLayout/SidebarLayout.tsx

@@ -22,7 +22,7 @@ const SidebarLayout: FC<ComponentProps> = ({
           <button
             onClick={handleClose}
             aria-label="Close"
-            className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none"
+            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>

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

@@ -0,0 +1,7 @@
+.root {
+  @apply px-4 sm:px-6 flex-1 z-20;
+}
+
+.item {
+  @apply text-2xl font-bold;
+}

components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx

@@ -1,5 +1,5 @@
-import cn from 'classnames'
 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'
@@ -20,16 +20,23 @@ const MenuSidebarView: FC<MenuProps> = (props) => {
   console.log(props.links)
   return (
     <SidebarLayout handleClose={handleClose}>
-      <div className="px-4 sm:px-6 flex-1">
+      <div className={s.root}>
-        <ul>
+        <nav>
-          {props.links?.map((l: any) => (
+          <ul>
-            <li key={l.href}>
+            <li className={s.item}>
-              <Link href={l.href}>
+              <Link href="/search">
-                <a>{l.label}</a>
+                <a>All</a>
               </Link>
             </li>
-          ))}
+            {props.links?.map((l: any) => (
-        </ul>
+              <li key={l.href} className={s.item}>
+                <Link href={l.href}>
+                  <a>{l.label}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
       </div>
     </SidebarLayout>
   )

components/common/UserNav/UserNav.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply relative;
+  @apply relative flex items-center;
 }
 
 .list {
@@ -7,14 +7,14 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
+  @apply ml-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
 
   &:hover {
     @apply text-accent-6 transition scale-110 duration-100;
   }
 
-  &:last-child {
+  &:first-child {
-    @apply mr-0;
+    @apply ml-0;
   }
 
   &:focus,
@@ -35,6 +35,11 @@
   @apply inline-flex justify-center rounded-full;
 }
 
-.avatarButton:focus {
+.mobileMenu {
-  @apply outline-none;
+  @apply flex lg:hidden ml-6
 }
+
+.avatarButton:focus,
+.mobileMenu:focus {
+  @apply outline-none;
+}

components/common/UserNav/UserNav.tsx

@@ -33,7 +33,10 @@ const UserNav: FC<Props> = ({ className }) => {
             <Button
               className={s.item}
               variant="naked"
-              onClick={toggleSidebar}
+              onClick={() => {
+                setSidebarView('CART_VIEW')
+                toggleSidebar()
+              }}
               aria-label="Cart"
             >
               <Bag />
@@ -67,7 +70,7 @@ const UserNav: FC<Props> = ({ className }) => {
             )}
           </li>
         )}
-        <li className="block lg:hidden">
+        <li className={s.mobileMenu}>
           <Button
             className={s.item}
             variant="naked"