86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { Home, Cpu, CalendarDays, Settings } from 'lucide-react'
|
|
|
|
type Tab = 'home' | 'devices' | 'calendar' | 'settings'
|
|
|
|
interface SidebarProps {
|
|
active: Tab
|
|
onChange: (tab: Tab) => void
|
|
}
|
|
|
|
const navItems: { id: Tab; icon: any; label: string }[] = [
|
|
{ id: 'home', icon: Home, label: 'Главная' },
|
|
{ id: 'devices', icon: Cpu, label: 'Устройства' },
|
|
{ id: 'calendar', icon: CalendarDays, label: 'Календарь' },
|
|
{ id: 'settings', icon: Settings, label: 'Настройки' },
|
|
]
|
|
|
|
export default function Sidebar({ active, onChange }: SidebarProps) {
|
|
return (
|
|
<nav
|
|
style={{
|
|
width: 72,
|
|
minWidth: 72,
|
|
height: '100dvh',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
paddingTop: 20,
|
|
paddingBottom: 20,
|
|
background: 'rgba(0,0,0,0.5)',
|
|
backdropFilter: 'blur(20px)',
|
|
WebkitBackdropFilter: 'blur(20px)',
|
|
borderRight: '1px solid rgba(255,255,255,0.05)',
|
|
gap: 8,
|
|
flexShrink: 0,
|
|
zIndex: 10,
|
|
}}
|
|
>
|
|
{/* Logo */}
|
|
<div
|
|
style={{
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 14,
|
|
background: 'linear-gradient(135deg, #00d4ff22, #00d4ff44)',
|
|
border: '1px solid rgba(0,212,255,0.3)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 24,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<Home size={20} color="#00d4ff" />
|
|
</div>
|
|
|
|
{/* Nav items */}
|
|
{navItems.map(({ id, icon: Icon, label }) => {
|
|
const isActive = active === id
|
|
return (
|
|
<button
|
|
key={id}
|
|
onClick={() => onChange(id)}
|
|
title={label}
|
|
style={{
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 14,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: isActive ? 'rgba(0,212,255,0.15)' : 'transparent',
|
|
border: isActive ? '1px solid rgba(0,212,255,0.25)' : '1px solid transparent',
|
|
transition: 'all 0.2s ease',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<Icon size={22} color={isActive ? '#00d4ff' : 'rgba(255,255,255,0.4)'} />
|
|
</button>
|
|
)
|
|
})}
|
|
</nav>
|
|
)
|
|
}
|