From 72a264a01ea6a917dc7475a2c4285af75a66fbb7 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 11 Oct 2025 01:37:46 +0100
Subject: [PATCH] feat: auto-close sidebar on mobile when navigating to content

- Add effect to close sidebar when route changes on mobile
- Handles clicking on blog posts in Explore view
- Complements existing sidebar auto-close for bookmarks and highlights
- Improves mobile UX by preventing sidebar from blocking content
---
 .cursor/rules/mobile-first-ui-ux.mdc | 3 +++
 src/components/Bookmarks.tsx         | 8 ++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 .cursor/rules/mobile-first-ui-ux.mdc

diff --git a/.cursor/rules/mobile-first-ui-ux.mdc b/.cursor/rules/mobile-first-ui-ux.mdc
new file mode 100644
index 00000000..3dca9096
--- /dev/null
+++ b/.cursor/rules/mobile-first-ui-ux.mdc
@@ -0,0 +1,3 @@
+---
+alwaysApply: true
+---
diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index dd47843d..d15ee3f3 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -90,6 +90,14 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setHighlightVisibility
   } = useBookmarksUI({ settings })
 
+  // Close sidebar on mobile when route changes (e.g., clicking on blog posts in Explore)
+  useEffect(() => {
+    if (isMobile && isSidebarOpen) {
+      toggleSidebar()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname])
+
   const {
     bookmarks,
     bookmarksLoading,