feat: enhance navbar

Author: LeadcodeDev

src/lib/components/elements/navbar.tsx

@@ -40,6 +40,7 @@ ListItem.displayName = "ListItem"
 
 export default function Navbar() {
   const { theme, setTheme } = useTheme()
+  const [open, setOpen] = React.useState(false)
 
   return (
     <div className="sticky top-0 z-50 w-full p-2 py-3 border-b bg-background/60 backdrop-blur-sm">
@@ -95,15 +96,15 @@ export default function Navbar() {
             </svg>
           </button>
 
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
+          <DropdownMenu open={open} onOpenChange={setOpen}>
+            <DropdownMenuTrigger asChild onClick={() => setOpen(!open)}>
               <Button variant="ghost" size="icon">
                 {theme === 'light' ? <SunIcon className="h-5 w-5" /> :
                   theme === 'dark' ? <MoonIcon className="h-5 w-5" /> :
                     <LaptopIcon className="h-5 w-5" />}
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
+            <DropdownMenuContent align="end" className="w-56">
               <DropdownMenuItem onClick={() => setTheme('light')}>
                 <SunIcon className="mr-2 h-4 w-4" />
                 Light

src/lib/components/ui/dropdown-menu.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react"
 
 import { cn } from "@/utils"
 
@@ -237,19 +237,11 @@ function DropdownMenuSubContent({
 }
 
 export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
+  DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent,
+  DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
+  DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger
 }
+

src/pages/index.astro

@@ -38,7 +38,7 @@ const posts = await getCollection("blog", (post) => {
 					Elegant documentation tooling for UnJS ecosystem.
 				</p>
 
-				<div class="flex gap-5">
+				<div class="flex flex-col md:flex-row gap-5 w-full">
 					<Button>
 						<RocketIcon className="w-5 h-5" />
 						Get started</Button