Fix sidebar footer positioning with flexbox
This commit is contained in:
parent
782ac937e6
commit
552c3dcb5d
1 changed files with 4 additions and 4 deletions
|
|
@ -48,7 +48,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
|||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex">
|
||||
{/* Sidebar */}
|
||||
<aside className={`${sidebarOpen ? "w-64" : "w-16"} bg-gray-800 flex-shrink-0 transition-all duration-300 relative`}>
|
||||
<aside className={`${sidebarOpen ? "w-64" : "w-16"} bg-gray-800 flex-shrink-0 transition-all duration-300 flex flex-col`}>
|
||||
{/* Header */}
|
||||
<div className="p-4 flex items-center justify-between border-b border-gray-700">
|
||||
{sidebarOpen && (
|
||||
|
|
@ -62,7 +62,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
|||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="p-2 space-y-1">
|
||||
<nav className="flex-1 p-2 space-y-1 overflow-y-auto">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href || (item.href !== "/admin" && pathname.startsWith(item.href));
|
||||
return (
|
||||
|
|
@ -81,7 +81,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
|||
</nav>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="absolute bottom-0 w-64 p-4 border-t border-gray-700">
|
||||
<div className="mt-auto p-4 border-t border-gray-700">
|
||||
{sidebarOpen && admin && (
|
||||
<div className="mb-3">
|
||||
<div className="text-sm font-medium">{admin.username}</div>
|
||||
|
|
@ -92,7 +92,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
|||
onClick={handleLogout}
|
||||
className="w-full px-3 py-2 bg-gray-700 text-gray-400 hover:text-white rounded-lg text-sm"
|
||||
>
|
||||
{sidebarOpen ? "Logout" : "⬅"}
|
||||
{sidebarOpen ? "Logout" : "🚪"}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue