From 4576fb2284fc842b455083643923d2dcf2915a72 Mon Sep 17 00:00:00 2001
From: Kenzo-Wada <used.acormhib@gmail.com>
Date: Wed, 24 Sep 2025 18:08:43 +0900
Subject: [PATCH] fix(docs): sidebar doesnt close on navigation

---
 components/HamburgerMenu.tsx |  2 +-
 components/SideNav.tsx       | 26 ++++++++++++++++++--------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/components/HamburgerMenu.tsx b/components/HamburgerMenu.tsx
index ba0d81c..5c9eb55 100644
--- a/components/HamburgerMenu.tsx
+++ b/components/HamburgerMenu.tsx
@@ -32,7 +32,7 @@ export default function HamburgerMenu() {
 
       {isOpen && (
         <div className="absolute top-0 bottom-0 h-screen left-0 z-10">
-          <SideNav />
+          <SideNav setIsOpen={setIsOpen} />
         </div>
       )}
     </div>
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 004ae9d..0abcf27 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -5,14 +5,19 @@ import { Badge, Text } from "@/components/retroui";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-export default function SideNav() {
+interface SideNavProps {
+  setIsOpen?: (isOpen: boolean) => void;
+}
+
+export default function SideNav({ setIsOpen }: SideNavProps) {
   const pathname = usePathname();
 
   return (
-    <div
-      className="sidebar-scroll border-r-2 max-h-screen overflow-y-auto transition-transform transform md:translate-x-0 w-full bg-background flex flex-col justify-start md:justify-start py-8"
-    >
-      <nav className="flex flex-col items-start max-lg:px-6 space-y-4" aria-label="Main navigation">
+    <div className="sidebar-scroll border-r-2 max-h-screen overflow-y-auto transition-transform transform md:translate-x-0 w-full bg-background flex flex-col justify-start md:justify-start py-8">
+      <nav
+        className="flex flex-col items-start max-lg:px-6 space-y-4"
+        aria-label="Main navigation"
+      >
         {navConfig.sideNavItems.map((item) => (
           <div key={item.title} className="w-full">
             <Text as="h5">{item.title}</Text>
@@ -21,14 +26,19 @@ export default function SideNav() {
                 <Link
                   key={child.title}
                   href={child.href}
+                  onClick={() => setIsOpen && setIsOpen(false)}
                   target={child.href.startsWith("http") ? "_blank" : "_self"}
                   className={`px-2 py-1 w-full border border-transparent text-muted-foreground flex items-center justify-between hover:text-foreground hover:bg-muted/50 transition-colors ${
-                    pathname === child.href && "bg-primary text-primary-foreground"
+                    pathname === child.href &&
+                    "bg-primary text-primary-foreground"
                   }`}
                 >
                   {child.title}
                   {child.tag && (
-                    <Badge size="sm" className="py-0.5 px-1.5 border text-xs border-secondary text-muted-foreground bg-secondary/10">
+                    <Badge
+                      size="sm"
+                      className="py-0.5 px-1.5 border text-xs border-secondary text-muted-foreground bg-secondary/10"
+                    >
                       {child.tag}
                     </Badge>
                   )}
@@ -40,4 +50,4 @@ export default function SideNav() {
       </nav>
     </div>
   );
-}
\ No newline at end of file
+}