From 2b48422b6865d286b9c7587a37ae7c6f7c4faa19 Mon Sep 17 00:00:00 2001
From: egecankomur <egecankomur@hotmail.com>
Date: Thu, 14 May 2026 22:32:59 +0300
Subject: [PATCH] fix(sidebar): check isMobile before collapsible=none; sticky
 desktop layout

- Swap isMobile and collapsible=none checks: mobile always gets Sheet
  overlay regardless of collapsible setting. Previously collapsible=none
  rendered an inline div on mobile, pushing content and preventing close.
- collapsible=none desktop path: use sticky top-0 h-svh instead of
  h-full so the sidebar stays visible while the page scrolls.
- Update sidebar-none-mode CSS to use align-items:flex-start which is
  required for sticky children in a flex container.

Root cause: stored sidebarCollapsible=none pref (set via theme
customizer) triggered this code path on both mobile and desktop.
---
 src/app/globals.css           |  7 +++----
 src/components/ui/sidebar.tsx | 33 +++++++++++++++++----------------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 7a0af19..9398ced 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -132,10 +132,9 @@
   }
 }
 
-/* Fix for sidebar "none" mode height issue */
-.sidebar-none-mode [data-slot="sidebar"] {
-  height: 100vh !important;
-  min-height: 100vh !important;
+/* sidebar-none-mode: sticky layout — sidebar stays visible while page scrolls */
+.sidebar-none-mode {
+  align-items: flex-start;
 }
 
 /* Fix for right-side inset variant support */
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 0d8737f..859d46f 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -172,24 +172,10 @@ function Sidebar({
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 
-  if (collapsible === "none") {
-    return (
-      <div
-        data-slot="sidebar"
-        className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-
+  // Mobile check must come first — always use Sheet on mobile regardless of collapsible mode
   if (isMobile) {
     return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} modal={false} {...props}>
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
         <SheetContent
           data-sidebar="sidebar"
           data-slot="sidebar"
@@ -212,6 +198,21 @@ function Sidebar({
     )
   }
 
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground sticky top-0 self-start flex h-svh w-(--sidebar-width) flex-col overflow-y-auto",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
   return (
     <div
       className="group peer text-sidebar-foreground hidden md:block"