Dropdown NavBar

components/core/Navbar/Navbar.tsx

@@ -3,14 +3,14 @@ import { FC } from 'react'
 import Link from 'next/link'
 import { useTheme } from 'next-themes'
 import { Logo } from '@components/ui'
-import { Searchbar, Toggle, UserNav } from '@components/core'
+import { Searchbar, UserNav } from '@components/core'
 interface Props {
   className?: string
 }
 
 const Navbar: FC<Props> = ({ className }) => {
   const rootClassName = className
-  const { theme, setTheme } = useTheme()
+
   return (
     <div className={rootClassName}>
       <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
@@ -38,12 +38,6 @@ const Navbar: FC<Props> = ({ className }) => {
         </div>
 
         <div className="flex flex-1 justify-end space-x-8">
-          <Toggle
-            checked={theme === 'dark'}
-            onChange={() =>
-              theme === 'dark' ? setTheme('light') : setTheme('dark')
-            }
-          />
           <UserNav />
         </div>
       </div>

components/core/UserNav/UserNav.module.css

@@ -2,12 +2,16 @@
   @apply relative;
 }
 
+.mainContainer {
+}
+
 .list {
-  @apply flex flex-row items-center h-full;
+  @apply flex flex-row items-center justify-items-end h-full;
 }
 
 .item {
   @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
+
   &:hover {
     @apply text-accents-8;
   }
@@ -18,14 +22,26 @@
 }
 
 .dropdownMenu {
-  @apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1 bg-primary;
-  max-width: 160px;
+  @apply bg-primary fixed right-0 z-50 w-full h-full;
 
-  &.dropdownMenuContainer {
-    @apply shadow-lg overflow-hidden relative grid py-2;
+  @screen lg {
+    @apply absolute mt-3 right-0 w-screen;
+    max-width: 160px;
+  }
+
+  & .dropdownMenuContainer {
+    @apply flex-col py-6 bg-primary h-full justify-around h-auto;
+
+    @screen lg {
+      @apply border border-accents-1 shadow-lg py-2;
+    }
   }
 
   & .link {
-    @apply px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
+    @apply cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
+  }
+
+  &.off {
+    @apply hidden;
   }
 }

components/core/UserNav/UserNav.tsx

@@ -6,6 +6,10 @@ import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import s from './UserNav.module.css'
 import Link from 'next/link'
+import { Logo } from '@components/ui'
+import { Toggle } from '@components/core'
+import { useTheme } from 'next-themes'
+
 interface Props {
   className?: string
 }
@@ -17,54 +21,65 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className }) => {
   const { data } = useCart()
-  const [displayDropdown, setDisplayDropdown] = useState(false)
+  const [displayDropdown, setDisplayDropdown] = useState(true)
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
+  const { theme, setTheme } = useTheme()
 
   return (
     <nav className={cn(s.root, className)}>
-      <ul className={s.list}>
-        <li
-          className={s.item}
-          onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
-        >
-          <Bag />
-          {itemsCount > 0 && (
-            <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
-              {itemsCount}
-            </span>
-          )}
-        </li>
-        <Link href="/wishlist">
-          <li className={s.item}>
-            <Heart />
+      <div className={s.mainContainer}>
+        <ul className={s.list}>
+          <li
+            className={s.item}
+            onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
+          >
+            <Bag />
+            {itemsCount > 0 && (
+              <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
+                {itemsCount}
+              </span>
+            )}
           </li>
-        </Link>
-        <li
-          className={s.item}
-          onClick={() => {
-            setDisplayDropdown((i) => !i)
-          }}
-        >
-          <Avatar />
-        </li>
-      </ul>
+          <Link href="/wishlist">
+            <li className={s.item}>
+              <Heart />
+            </li>
+          </Link>
+          <li
+            className={s.item}
+            onClick={() => {
+              setDisplayDropdown((i) => !i)
+            }}
+          >
+            <Avatar />
+          </li>
+        </ul>
+      </div>
 
-      {displayDropdown && (
-        <div className={s.dropdownMenu}>
-          <nav className={s.dropdownMenuContainer}>
-            <Link href="#">
-              <a className={s.link}>My Purchases</a>
-            </Link>
-            <Link href="#">
-              <a className={s.link}>My Account</a>
-            </Link>
-            <Link href="#">
-              <a className={cn(s.link, 'mt-4')}>Logout</a>
-            </Link>
-          </nav>
-        </div>
-      )}
+      <div className={cn(s.dropdownMenu, { [s.off]: displayDropdown })}>
+        <nav className={s.dropdownMenuContainer}>
+          <Link href="#">
+            <a className={s.link}>My Purchases</a>
+          </Link>
+          <Link href="#">
+            <a className={s.link}>My Account</a>
+          </Link>
+          <a
+            className={s.link}
+            onClick={() =>
+              theme === 'dark' ? setTheme('light') : setTheme('dark')
+            }
+          >
+            Theme: <strong>{theme}</strong>
+          </a>
+          <Link href="#">
+            <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
+              Logout
+            </a>
+          </Link>
+        </nav>
+      </div>
     </nav>
   )
 }

components/ui/Container/Container.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  const rootClassName = cn('mx-auto max-w-7xl px-3 md:px-6', className)
+  const rootClassName = cn('mx-auto max-w-7xl px-6', className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement