68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import { NavLink } from 'react-router-dom'
|
||
import { motion } from 'framer-motion'
|
||
import {
|
||
LayoutDashboard,
|
||
Tv2,
|
||
Activity,
|
||
Settings,
|
||
Globe
|
||
} from 'lucide-react'
|
||
|
||
const navItems = [
|
||
{ path: '/', icon: LayoutDashboard, label: 'Dashboard' },
|
||
{ path: '/channels', icon: Tv2, label: 'Kanallar' },
|
||
{ path: '/monitoring', icon: Activity, label: 'İzleme' },
|
||
{ path: '/settings', icon: Settings, label: 'Ayarlar' },
|
||
]
|
||
|
||
export default function Sidebar() {
|
||
return (
|
||
<nav className="w-64 bg-dark-800 border-r border-dark-700 flex flex-col">
|
||
{/* Navigation Items */}
|
||
<div className="flex-1 py-4 px-3 space-y-1">
|
||
{navItems.map((item) => (
|
||
<NavLink
|
||
key={item.path}
|
||
to={item.path}
|
||
className={({ isActive }) =>
|
||
`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group relative ${
|
||
isActive
|
||
? 'bg-gradient-to-r from-accent-blue/20 to-accent-purple/10 text-accent-blue'
|
||
: 'text-dark-300 hover:text-dark-100 hover:bg-dark-700'
|
||
}`
|
||
}
|
||
>
|
||
{({ isActive }) => (
|
||
<>
|
||
{isActive && (
|
||
<motion.div
|
||
layoutId="sidebar-active"
|
||
className="absolute left-0 w-1 h-8 bg-accent-blue rounded-r-full"
|
||
initial={false}
|
||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||
/>
|
||
)}
|
||
<item.icon className="w-5 h-5" />
|
||
<span className="font-medium text-sm">{item.label}</span>
|
||
</>
|
||
)}
|
||
</NavLink>
|
||
))}
|
||
</div>
|
||
|
||
{/* Status Footer */}
|
||
<div className="p-4 border-t border-dark-700">
|
||
<div className="flex items-center gap-2 text-xs text-dark-400">
|
||
<Globe className="w-4 h-4" />
|
||
<span>Bağlantı durumu</span>
|
||
<span className="ml-auto flex items-center gap-1">
|
||
<span className="w-2 h-2 rounded-full bg-accent-green status-online" />
|
||
Aktif
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
)
|
||
}
|
||
|