refactor: Add dropdown menu for theme selection in navigation menu

src/components/mode-toggle.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from 'react'
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { useTheme } from 'next-themes'
+import { Button } from './ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu'
+
+export function ModeToggle() {
+   const { setTheme } = useTheme()
+
+   return (
+      <DropdownMenu>
+         <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="size-8 px-0">
+               <SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+               <MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+               <span className="sr-only">Toggle theme</span>
+            </Button>
+         </DropdownMenuTrigger>
+         <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setTheme('light')}>
+               Light
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme('dark')}>
+               Dark
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme('system')}>
+               System
+            </DropdownMenuItem>
+         </DropdownMenuContent>
+      </DropdownMenu>
+   )
+}