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 ( return (
<div className="min-h-screen bg-gray-900 text-white flex"> <div className="min-h-screen bg-gray-900 text-white flex">
{/* Sidebar */} {/* 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 */} {/* Header */}
<div className="p-4 flex items-center justify-between border-b border-gray-700"> <div className="p-4 flex items-center justify-between border-b border-gray-700">
{sidebarOpen && ( {sidebarOpen && (
@ -62,7 +62,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
</div> </div>
{/* Navigation */} {/* Navigation */}
<nav className="p-2 space-y-1"> <nav className="flex-1 p-2 space-y-1 overflow-y-auto">
{navItems.map((item) => { {navItems.map((item) => {
const isActive = pathname === item.href || (item.href !== "/admin" && pathname.startsWith(item.href)); const isActive = pathname === item.href || (item.href !== "/admin" && pathname.startsWith(item.href));
return ( return (
@ -81,7 +81,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
</nav> </nav>
{/* Footer */} {/* 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 && ( {sidebarOpen && admin && (
<div className="mb-3"> <div className="mb-3">
<div className="text-sm font-medium">{admin.username}</div> <div className="text-sm font-medium">{admin.username}</div>
@ -92,7 +92,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
onClick={handleLogout} onClick={handleLogout}
className="w-full px-3 py-2 bg-gray-700 text-gray-400 hover:text-white rounded-lg text-sm" 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> </button>
</div> </div>
</aside> </aside>