93 lines
3.9 KiB
TypeScript
93 lines
3.9 KiB
TypeScript
import { useState } from 'react'
|
|
import { Outlet, NavLink, useNavigate } from 'react-router-dom'
|
|
import {
|
|
LayoutDashboard, FolderOpen, Database, Mail, Lock,
|
|
Globe, Anchor, Clock, LogOut, Menu, X, BarChart3, User
|
|
} from 'lucide-react'
|
|
import { useAuth } from '../contexts/AuthContext'
|
|
|
|
const nav = [
|
|
{ label: 'Overview', to: '/', icon: LayoutDashboard },
|
|
{ label: 'File Manager',to: '/files', icon: FolderOpen },
|
|
{ label: 'Databases', to: '/databases', icon: Database },
|
|
{ label: 'Email', to: '/email', icon: Mail },
|
|
{ label: 'SSL', to: '/ssl', icon: Lock },
|
|
{ label: 'Domains', to: '/domains', icon: Globe },
|
|
{ label: 'FTP Accounts',to: '/ftp', icon: Anchor },
|
|
{ label: 'Cron Jobs', to: '/cron', icon: Clock },
|
|
{ label: 'Statistics', to: '/stats', icon: BarChart3 },
|
|
]
|
|
|
|
export default function Layout() {
|
|
const { user, logout } = useAuth()
|
|
const navigate = useNavigate()
|
|
const [sidebarOpen, setSidebarOpen] = useState(true)
|
|
|
|
const handleLogout = async () => { await logout(); navigate('/login') }
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden bg-[#0a0f1a]">
|
|
<aside className={`flex flex-col transition-all duration-200 bg-[#111827] border-r border-[#1e2d45] ${sidebarOpen ? 'w-52' : 'w-14'}`}>
|
|
<div className="flex items-center gap-2 px-4 py-4 border-b border-[#1e2d45] min-h-[57px]">
|
|
<div className="w-7 h-7 rounded-lg bg-sky-500 flex items-center justify-center flex-shrink-0">
|
|
<span className="text-white text-xs font-bold">N</span>
|
|
</div>
|
|
{sidebarOpen && (
|
|
<div className="overflow-hidden">
|
|
<p className="text-white text-sm font-semibold leading-tight">NixClient</p>
|
|
<p className="text-[#64748b] text-xs truncate">{user?.domain}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<nav className="flex-1 overflow-y-auto py-2">
|
|
{nav.map(({ label, to, icon: Icon }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={to === '/'}
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-3 px-4 py-2 mx-2 my-0.5 rounded-lg text-sm transition-colors ${
|
|
isActive ? 'bg-sky-500/20 text-sky-400' : 'text-[#94a3b8] hover:bg-[#1a2235] hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
<Icon size={16} className="flex-shrink-0" />
|
|
{sidebarOpen && <span className="truncate">{label}</span>}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="border-t border-[#1e2d45] p-3">
|
|
{sidebarOpen && (
|
|
<div className="flex items-center gap-2 px-1 mb-2">
|
|
<User size={14} className="text-[#64748b] flex-shrink-0" />
|
|
<p className="text-white text-xs font-medium truncate">{user?.username}</p>
|
|
</div>
|
|
)}
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex items-center gap-2 px-3 py-2 w-full rounded-lg text-[#94a3b8] hover:bg-[#1a2235] hover:text-red-400 transition-colors text-sm"
|
|
>
|
|
<LogOut size={16} className="flex-shrink-0" />
|
|
{sidebarOpen && <span>Logout</span>}
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
<header className="flex items-center gap-4 px-6 py-3 bg-[#111827] border-b border-[#1e2d45] min-h-[57px]">
|
|
<button onClick={() => setSidebarOpen(v => !v)} className="text-[#64748b] hover:text-white transition-colors">
|
|
{sidebarOpen ? <X size={18} /> : <Menu size={18} />}
|
|
</button>
|
|
<div className="flex-1" />
|
|
<span className="text-[#64748b] text-xs font-mono">{user?.domain}</span>
|
|
</header>
|
|
<main className="flex-1 overflow-y-auto p-6">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|