Fix sidebar footer positioning with flexbox

This commit is contained in:
Manohar Gupta 2026-05-10 23:22:48 +05:30
parent 782ac937e6
commit 552c3dcb5d

View file

@ -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>