From 767bac9f5e5d410159faf048259ba802e2a86d70 Mon Sep 17 00:00:00 2001
From: Chirag Sharma <chiragnoida3345@gmail.com>
Date: Mon, 7 Jul 2025 23:13:16 +0530
Subject: [PATCH] Move theme toggle button to navbar for easier access (#274)

---
 components/main-nav.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/main-nav.tsx b/components/main-nav.tsx
index b5cdb52..2226ef1 100644
--- a/components/main-nav.tsx
+++ b/components/main-nav.tsx
@@ -9,6 +9,7 @@ import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { Icons } from "@/components/icons"
 import { MobileNav } from "@/components/mobile-nav"
+import { ModeToggle } from "@/components/mode-toggle"
 
 interface MainNavProps {
   items?: MainNavItem[]
@@ -20,7 +21,7 @@ export function MainNav({ items, children }: MainNavProps) {
   const [showMobileMenu, setShowMobileMenu] = React.useState<boolean>(false)
 
   return (
-    <div className="flex gap-6 md:gap-10">
+    <div className="flex gap-6 md:gap-10 items-center">
       <Link href="/" className="hidden items-center space-x-2 md:flex">
         <Icons.logo />
         <span className="hidden font-bold sm:inline-block">
@@ -46,6 +47,10 @@ export function MainNav({ items, children }: MainNavProps) {
           ))}
         </nav>
       ) : null}
+      {/* Theme toggle button for desktop */}
+      <div className="hidden md:flex">
+        <ModeToggle />
+      </div>
       <button
         className="flex items-center space-x-2 md:hidden"
         onClick={() => setShowMobileMenu(!showMobileMenu)}
@@ -53,6 +58,10 @@ export function MainNav({ items, children }: MainNavProps) {
         {showMobileMenu ? <Icons.close /> : <Icons.logo />}
         <span className="font-bold">Menu</span>
       </button>
+      {/* Theme toggle button for mobile, next to menu button */}
+      <div className="md:hidden">
+        <ModeToggle />
+      </div>
       {showMobileMenu && items && (
         <MobileNav items={items}>{children}</MobileNav>
       )}