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 (
|
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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue