File size: 3,539 Bytes
619120c | 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 60 61 62 63 64 65 66 67 68 69 70 71 72 | import React from 'react';
import { LayoutDashboard, Users, Map, Settings, Signal } from 'lucide-react';
const Sidebar = () => {
const navItems = [
{ icon: LayoutDashboard, label: 'Dashboard', active: true },
{ icon: Users, label: 'Subscribers' },
{ icon: Map, label: 'Geo Map' },
{ icon: Settings, label: 'Settings' },
];
return (
<aside className="glass-panel" style={{
width: '260px',
margin: 'var(--space-md)',
marginRight: 0,
display: 'flex',
flexDirection: 'column',
padding: 'var(--space-lg)'
}}>
<div className="flex-center" style={{ marginBottom: 'var(--space-xl)', justifyContent: 'flex-start', gap: 'var(--space-sm)' }}>
<div style={{ color: 'var(--primary)', filter: 'drop-shadow(0 0 5px var(--primary-glow))' }}>
<Signal size={32} />
</div>
<div>
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', lineHeight: 1 }}>GlobeSIM</h2>
<span style={{ fontSize: '0.75rem', color: 'var(--text-muted)', letterSpacing: '2px' }}>MONITOR</span>
</div>
</div>
<nav style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 'var(--space-sm)' }}>
{navItems.map((item, index) => (
<button
key={index}
style={{
display: 'flex',
alignItems: 'center',
gap: 'var(--space-md)',
background: item.active ? 'linear-gradient(90deg, rgba(0, 240, 255, 0.1), transparent)' : 'transparent',
border: 'none',
borderLeft: item.active ? '3px solid var(--primary)' : '3px solid transparent',
padding: 'var(--space-md)',
color: item.active ? 'var(--primary)' : 'var(--text-muted)',
cursor: 'pointer',
textAlign: 'left',
transition: 'all 0.3s ease',
borderRadius: '0 8px 8px 0'
}}
>
<item.icon size={20} />
<span style={{ fontWeight: item.active ? 600 : 400 }}>{item.label}</span>
</button>
))}
</nav>
<div style={{ marginTop: 'auto', paddingTop: 'var(--space-md)', borderTop: '1px solid var(--border-color)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
<div style={{ width: '36px', height: '36px', borderRadius: '50%', background: 'var(--bg-panel-hover)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<span style={{ fontWeight: 'bold', color: 'var(--primary)' }}>A</span>
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<span style={{ fontSize: '0.875rem' }}>Admin User</span>
<span style={{ fontSize: '0.75rem', color: 'var(--status-online)' }}>● Online</span>
</div>
</div>
</div>
</aside>
);
};
export default Sidebar;
|