dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Prevent sidebar from shrinking in fullscreen mode

Browse Source 
Problem:
- Sidebar was shrinking when viewport width decreased
- Sidebar should maintain fixed width (224px / w-56)
- At breakpoint (<1024px), sidebar should hide and TopNav should show

Root Cause:
Sidebar is inside a flex container without flex-shrink-0:
<div className="flex">
  <aside className="w-56">  ← Can shrink by default!
  <main className="flex-1">

Solution:
Add flex-shrink-0 to sidebar:
<aside className="w-56 flex-shrink-0">

Behavior:
✅ Desktop (≥1024px): Sidebar fixed at 224px, content shrinks
✅ Mobile (<1024px): Sidebar hidden, TopNav shown
✅ Sidebar never shrinks below 224px

Layout:
┌─────────────────────────────────────┐
│ Desktop (≥1024px):                  │
│ ┌──────────┬────────────────────┐   │
│ │ Sidebar  │ Content (flex-1)   │   │
│ │ 224px    │ Shrinks            │   │
│ │ Fixed    │                    │   │
│ └──────────┴────────────────────┘   │
├─────────────────────────────────────┤
│ Mobile (<1024px):                   │
│ ┌─────────────────────────────────┐ │
│ │ TopNav                          │ │
│ ├─────────────────────────────────┤ │
│ │ Content (full width)            │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘

Breakpoint Logic (useIsDesktop):
const isDesktop = useIsDesktop(1024); // lg breakpoint

{fullscreen ? (
  isDesktop ? (
    <Sidebar /> + <main>  ← Desktop layout
  ) : (
    <TopNav /> + <main>   ← Mobile layout
  )
) : (
  <TopNav /> + <main>     ← WP-Admin layout
)}

Files Modified:
- App.tsx: Added flex-shrink-0 to Sidebar

Result:
✅ Sidebar maintains 224px width
✅ Content area shrinks responsively
✅ Clean breakpoint behavior at 1024px
This commit is contained in:
dwindown
2025-11-06 15:56:36 +07:00
parent c3d4fbd794
commit 14103895e2
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
admin-spa/src/App.tsx
View File

@@ -108,7 +108,7 @@ function Sidebar() {
const link = "flex items-center gap-2 rounded-md px-3 py-2 hover:bg-accent hover:text-accent-foreground shadow-none hover:shadow-none focus:shadow-none focus:outline-none focus:ring-0"; const link = "flex items-center gap-2 rounded-md px-3 py-2 hover:bg-accent hover:text-accent-foreground shadow-none hover:shadow-none focus:shadow-none focus:outline-none focus:ring-0";
const active = "bg-secondary"; const active = "bg-secondary";
return ( return (
<aside className="w-56 p-3 border-r border-border sticky top-16 h-[calc(100vh-64px)] overflow-y-auto bg-background"> <aside className="w-56 flex-shrink-0 p-3 border-r border-border sticky top-16 h-[calc(100vh-64px)] overflow-y-auto bg-background">
<nav className="flex flex-col gap-1"> <nav className="flex flex-col gap-1">
<ActiveNavLink to="/dashboard" startsWith="/dashboard" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}> <ActiveNavLink to="/dashboard" startsWith="/dashboard" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
<LayoutDashboard className="w-4 h-4" /> <LayoutDashboard className="w-4 h-4" />