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.
This commit is contained in:
egecankomur
2026-05-14 22:32:59 +03:00
parent 856e577f4b
commit 2b48422b68
2 changed files with 20 additions and 20 deletions
+17 -16
View File
@@ -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"