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;
+  @apply bg-primary fixed right-0 z-50 w-full h-full;
+
+  @screen lg {
+    @apply absolute mt-3 right-0 w-screen;
     max-width: 160px;
+  }
 
   & .dropdownMenuContainer {
-    @apply shadow-lg overflow-hidden relative grid py-2;
+    @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,12 +21,14 @@ 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)}>
+      <div className={s.mainContainer}>
         <ul className={s.list}>
           <li
             className={s.item}
@@ -49,9 +55,9 @@ const UserNav: FC<Props> = ({ className }) => {
             <Avatar />
           </li>
         </ul>
+      </div>
 
-      {displayDropdown && (
+      <div className={cn(s.dropdownMenu, { [s.off]: displayDropdown })}>
-        <div className={s.dropdownMenu}>
         <nav className={s.dropdownMenuContainer}>
           <Link href="#">
             <a className={s.link}>My Purchases</a>
@@ -59,12 +65,21 @@ const UserNav: FC<Props> = ({ className }) => {
           <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, 'mt-4')}>Logout</a>
+            <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