🐛 Fix dropdown

claudiorivera · Dec 26, 2024 · 4f2d257 · 4f2d257
1 parent efe9e95
commit 4f2d257
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/header.astro b/src/components/header.astro
@@ -21,7 +21,7 @@ import { MENU_LINKS, SITE_DESCRIPTION, SITE_TITLE } from "~/consts";
 		</div>
 		<div class="flex">
 			<div class="sm:hidden">
-				<MobileMenu client:idle />
+				<MobileMenu client:load />
 			</div>
 			<div class="hidden sm:flex">
 				{MENU_LINKS.map(({ title, url }) => (

diff --git a/src/components/mobile-menu.tsx b/src/components/mobile-menu.tsx
@@ -1,4 +1,5 @@
 import { AlignJustify } from "lucide-react";
+import { useState } from "react";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -8,9 +9,15 @@ import {
 import { MENU_LINKS } from "~/consts";
 
 export function MobileMenu() {
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+
 	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger>
+		<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+			<DropdownMenuTrigger
+				onClick={() => {
+					setDropdownOpen((val) => !val);
+				}}
+			>
 				<AlignJustify />
 			</DropdownMenuTrigger>
 			<DropdownMenuContent>