Elgato_dark/taxonomy
1
0
Fork 0
mirror of https://github.com/shadcn-ui/taxonomy synced 2026-05-24 01:38:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move theme toggle button to navbar for easier access (#274)

Browse source
This commit is contained in:
Chirag Sharma 2025-07-07 23:13:16 +05:30
parent ae4fff9fb4
commit 767bac9f5e
1 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/main-nav.tsx
View file

@ -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>
)}