move theme switcher

components/core/Navbar/Navbar.tsx

@@ -1,16 +1,16 @@
 import s from './Navbar.module.css'
 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

@@ -26,6 +26,6 @@
   }
 
   & .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 px-6 py-3 flex items-center space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
   }
 }

components/core/UserNav/UserNav.tsx

@@ -1,10 +1,11 @@
 import { FC, useState } from 'react'
 import cn from 'classnames'
 import useCart from '@lib/bigcommerce/cart/use-cart'
-import { Avatar } from '@components/core'
+import { Avatar, Toggle } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import s from './UserNav.module.css'
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 interface Props {
   className?: string
@@ -17,6 +18,7 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className }) => {
   const { data } = useCart()
+  const { theme, setTheme } = useTheme()
   const [displayDropdown, setDisplayDropdown] = useState(false)
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
@@ -59,6 +61,17 @@ const UserNav: FC<Props> = ({ className }) => {
             <Link href="#">
               <a className={s.link}>My Account</a>
             </Link>
+            <span className="inline-flex items-start px-6 py-2">
+              <span className="capitalize inline-block mr-2 text-base leading-6 font-medium text-gray-900">
+                Theme
+              </span>
+              <Toggle
+                checked={theme === 'dark'}
+                onChange={() =>
+                  theme === 'dark' ? setTheme('light') : setTheme('dark')
+                }
+              />
+            </span>
             <Link href="#">
               <a className={cn(s.link, 'mt-4')}>Logout</a>
             </Link>