rahimi/GreenHomeBack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor(admin): restructure admin layout

Browse Source 
- move sidebar below full-width sticky header
- wrap sidebar and content in flex row for desktop
- keep header visible above content at all breakpoints
This commit is contained in:
alireza
2026-09-25 19:15:29 +03:30
parent b557590303
commit 4e8b14906f
1 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/GreenHome.Web/src/app/admin/AdminLayout.tsx
View File

@@ -70,18 +70,9 @@ export default function AdminLayout() {
})
return (
<div className="min-h-screen bg-[#fafafa] flex flex-col md:flex-row">
{/* Desktop sidebar (right side in RTL) */}
<aside className="hidden md:flex flex-col w-60 shrink-0 border-l border-gray-200 bg-white p-4 sticky top-14 h-[calc(100vh-3.5rem)]">
<div className="px-3 py-4 mb-2 border-b border-gray-100">
<h1 className="text-base font-bold text-gray-900">پنل مدیریت</h1>
<p className="text-xs text-gray-400 mt-0.5">گ린‌هوم</p>
</div>
<nav className="flex-1 flex flex-col gap-1">{navLinks()}</nav>
</aside>
{/* Sticky header (all breakpoints, merges the old mobile header) */}
<div className="sticky top-0 z-20 w-full md:flex-1">
<div className="min-h-screen bg-[#fafafa] flex flex-col">
{/* Sticky header — full width, above everything (merges the old mobile header) */}
<div className="sticky top-0 z-20 w-full">
<header className="bg-white border-b border-gray-200">
<div className="h-14 flex items-center justify-between px-4 md:px-6">
<div className="flex items-center gap-2 min-w-0">
@@ -111,6 +102,17 @@ export default function AdminLayout() {
</header>
</div>
{/* Below the header: sidebar (desktop) + content */}
<div className="flex flex-1 md:flex-row">
{/* Desktop sidebar (right side in RTL) */}
<aside className="hidden md:flex flex-col w-60 shrink-0 border-l border-gray-200 bg-white p-4 sticky top-14 h-[calc(100vh-3.5rem)]">
<div className="px-3 py-4 mb-2 border-b border-gray-100">
<h1 className="text-base font-bold text-gray-900">پنل مدیریت</h1>
<p className="text-xs text-gray-400 mt-0.5">گ린‌هوم</p>
</div>
<nav className="flex-1 flex flex-col gap-1">{navLinks()}</nav>
</aside>
{/* Page content */}
<main className="flex-1 p-4 md:p-6">
<div className="max-w-5xl mx-auto">
@@ -118,5 +120,6 @@ export default function AdminLayout() {
</div>
</main>
</div>
</div>
)
}