Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 4x 4x 4x 20x 20x | import { ReactNode } from 'react'
import { Link, useLocation } from 'react-router-dom'
interface LayoutProps {
children: ReactNode
}
export default function Layout({ children }: LayoutProps) {
const location = useLocation()
const navigation = [
{ name: 'Dashboard', path: '/', icon: '📊' },
{ name: 'Proxy Hosts', path: '/proxy-hosts', icon: '🌐' },
{ name: 'Remote Servers', path: '/remote-servers', icon: '🖥️' },
{ name: 'Import Caddyfile', path: '/import', icon: '📥' },
{ name: 'Settings', path: '/settings', icon: '⚙️' },
]
return (
<div className="min-h-screen bg-dark-bg flex">
{/* Sidebar */}
<aside className="w-60 bg-dark-sidebar border-r border-gray-800 flex flex-col">
<div className="p-6">
<h1 className="text-xl font-bold text-white">Caddy Proxy Manager+</h1>
</div>
<nav className="flex-1 px-4 space-y-1">
{navigation.map((item) => {
const isActive = location.pathname === item.path
return (
<Link
key={item.path}
to={item.path}
className={`flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
isActive
? 'bg-blue-active text-white'
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
}`}
>
<span className="text-lg">{item.icon}</span>
{item.name}
</Link>
)
})}
</nav>
<div className="p-4 border-t border-gray-800">
<div className="text-xs text-gray-500">
Version 0.1.0
</div>
</div>
</aside>
{/* Main content */}
<main className="flex-1 overflow-auto">
{children}
</main>
</div>
)
}
|