fix: Prevent sidebar from shrinking in fullscreen mode
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:
@@ -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 active = "bg-secondary";
|
||||
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">
|
||||
<ActiveNavLink to="/dashboard" startsWith="/dashboard" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
|
||||
<LayoutDashboard className="w-4 h-4" />
|
||||
|
||||
Reference in New Issue
Block a user