Fix: Handle Theme Selection in Mobile (#165)

* fix: add theme toggle in mobile

* fix: use resolvedTheme boolean

* chore: linting

components/layout/main-nav.tsx

@@ -25,7 +25,7 @@ export function MainNav() {
       <Link href="/" className="mr-6 flex items-center space-x-2">
         <LightDarkImage
           LightImage="/logo-dark.png"
-          DarkImage="/logo-white.png"
+          DarkImage="/logo-light.png"
           alt="TurboETH"
           height={32}
           width={32}

components/layout/mobile-nav.tsx

@@ -4,7 +4,6 @@ import { useState } from "react"
 import Link, { LinkProps } from "next/link"
 import { useRouter } from "next/navigation"
 import { integrations } from "@/data/integrations"
-import { ConnectButton } from "@rainbow-me/rainbowkit"
 import { LuMenu } from "react-icons/lu"
 
 import { menuDashboard } from "@/config/menu-dashboard"
@@ -22,6 +21,8 @@ import { Separator } from "@/components/ui/separator"
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import { LightDarkImage } from "@/components/shared/light-dark-image"
 
+import { ModeToggle } from "../shared/mode-toggle"
+
 export function MobileNav() {
   const [open, setOpen] = useState(false)
 
@@ -31,7 +32,7 @@ export function MobileNav() {
         <Link href="/" className="mr-6 flex items-center space-x-2">
           <LightDarkImage
             LightImage="/logo-dark.png"
-            DarkImage="/logo-white.png"
+            DarkImage="/logo-light.png"
             alt="TurboETH"
             height={32}
             width={32}
@@ -51,19 +52,22 @@ export function MobileNav() {
         </SheetTrigger>
       </div>
       <SheetContent side="right" className="pr-0">
-        <MobileLink
-          href="/"
-          className="flex items-center"
-          onOpenChange={setOpen}
-        >
-          <LightDarkImage
-            LightImage="/logo-dark.png"
-            DarkImage="/logo-white.png"
-            alt="TurboETH"
-            height={32}
-            width={32}
-          />
-        </MobileLink>
+        <div className="flex items-center gap-x-4">
+          <MobileLink
+            href="/"
+            className="flex items-center"
+            onOpenChange={setOpen}
+          >
+            <LightDarkImage
+              LightImage="/logo-dark.png"
+              DarkImage="/logo-light.png"
+              alt="TurboETH"
+              height={32}
+              width={32}
+            />
+          </MobileLink>
+          <ModeToggle />
+        </div>
         <ScrollArea className="my-4 mr-4 h-[calc(100vh-8rem)] pb-10">
           <div className="flex flex-col space-y-4">
             <Accordion type="single" collapsible className="mx-auto w-full">

components/shared/is-dark-theme.tsx

@@ -8,9 +8,9 @@ interface IsDarkThemeProps {
 }
 
 export const IsDarkTheme = ({ children }: IsDarkThemeProps) => {
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
 
-  if (theme !== "light") return <>{children}</>
+  if (resolvedTheme === "dark") return <>{children}</>
 
   return null
 }

components/shared/is-light-theme.tsx

@@ -8,9 +8,9 @@ interface IsLightThemeProps {
 }
 
 export const IsLightTheme = ({ children }: IsLightThemeProps) => {
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
 
-  if (theme === "light") return <>{children}</>
+  if (resolvedTheme === "light") return <>{children}</>
 
   return null
 }

components/shared/light-dark-image.tsx

@@ -21,10 +21,10 @@ const LightDarkImage = ({
   width,
   className,
 }: LightDarkImageProps) => {
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
 
   let imageUrl = LightImage
-  if (theme === "dark") {
+  if (resolvedTheme === "dark") {
     imageUrl = DarkImage
   }