abrban/cloud-host
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the mobile dashboard sidebar scrollable.

Browse Source 
The mobile drawer rendered the nav at full height below a fixed header,
so lower items (and the admin section) overflowed off-screen with no way
to scroll. Lay the drawer out as a flex column with a fixed header, a
scrollable nav area (min-h-0 + overflow-y-auto) and a pinned user footer.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
keyhan
2026-06-12 12:14:40 +03:30
parent 81a22cb8fd
commit aa3e62d0ff
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/[lang]/dashboard/layout.tsx
+6 -4
View File
@@ -156,7 +156,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
const SidebarContent = () => (
<div className="flex flex-col h-full">
<div className="space-y-1 flex-1">
<div className="space-y-1 flex-1 min-h-0 overflow-y-auto">
{userNavItems.map((item) => (
<NavLink key={item.href} item={item} badge={getBadge(item.href)} />
))}
@@ -202,7 +202,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
</div>
{/* Sidebar footer */}
<div className="pt-4 mt-4 border-t border-gray-200">
<div className="pt-4 mt-4 border-t border-gray-200 shrink-0">
<div className="px-3 py-2">
<p className="text-xs font-semibold text-gray-700 truncate">
{user?.firstName} {user?.lastName}
@@ -226,11 +226,11 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
{/* Mobile sidebar */}
<aside
className={`fixed inset-y-0 left-0 rtl:left-auto rtl:right-0 z-50 w-64 bg-white border-r rtl:border-r-0 rtl:border-l border-gray-200 p-4 transform transition-transform duration-200 ease-in-out lg:hidden ${
className={`fixed inset-y-0 left-0 rtl:left-auto rtl:right-0 z-50 w-64 bg-white border-r rtl:border-r-0 rtl:border-l border-gray-200 p-4 flex flex-col transform transition-transform duration-200 ease-in-out lg:hidden ${
sidebarOpen ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full'
}`}
>
<div className="flex items-center justify-between mb-6">
<div className="flex items-center justify-between mb-6 shrink-0">
<Link href="/dashboard" className="text-lg font-bold text-primary-600">
<Cloud className="w-5 h-5 inline mr-1 rtl:mr-0 rtl:ml-1" /> {t.common.appName}
</Link>
@@ -238,7 +238,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
<X className="w-4 h-4" />
</button>
</div>
<div className="flex-1 min-h-0">
<SidebarContent />
</div>
</aside>
{/* Header */}