From 95fe9b548ff704e12564d8795ddcd6d8d3922466 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 00:05:04 +0200
Subject: [PATCH] fix: close mobile sidebar when clicking navigation items

- Add mobile sidebar close logic to handleMenuItemClick for profile menu items
- Add mobile sidebar close logic to Home, Settings, and Explore buttons
- Fixes issue where mobile bookmarks bar didn't close when navigating to My Reads, My Highlights, etc.
---
 src/components/SidebarHeader.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/SidebarHeader.tsx b/src/components/SidebarHeader.tsx
index 41ed3000..43465125 100644
--- a/src/components/SidebarHeader.tsx
+++ b/src/components/SidebarHeader.tsx
@@ -55,6 +55,10 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
 
   const handleMenuItemClick = (action: () => void) => {
     setShowProfileMenu(false)
+    // Close mobile sidebar when navigating on mobile
+    if (isMobile) {
+      onToggleCollapse()
+    }
     action()
   }
 
@@ -127,21 +131,36 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
         <div className="sidebar-header-right">
           <IconButton
             icon={faHome}
-            onClick={() => navigate('/')}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              navigate('/')
+            }}
             title="Home"
             ariaLabel="Home"
             variant="ghost"
           />
           <IconButton
             icon={faGear}
-            onClick={onOpenSettings}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              onOpenSettings()
+            }}
             title="Settings"
             ariaLabel="Settings"
             variant="ghost"
           />
           <IconButton
             icon={faPersonHiking}
-            onClick={() => navigate('/explore')}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              navigate('/explore')
+            }}
             title="Explore"
             ariaLabel="Explore"
             variant="ghost"