File size: 3,672 Bytes
ac4a6d6 | 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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | import React from 'react';
import { X, User, HelpCircle, Info, Phone, History, Cpu, ShieldCheck, Terminal, AlertTriangle, Home as HomeIcon } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { cn } from '../lib/utils';
import { useThemeStore } from '../store/theme';
interface SidebarProps {
isOpen: boolean;
onClose: () => void;
}
export function Sidebar({ isOpen, onClose }: SidebarProps) {
const { theme, toggleTheme } = useThemeStore();
const navigate = useNavigate();
const menuItems = [
{ icon: HomeIcon, label: 'Home', path: '/home' },
{ icon: User, label: 'Account Details', path: '/account-details' },
{ icon: HelpCircle, label: 'How to Use', path: '/how-to-use' },
{ icon: Info, label: 'About Us', path: '/about-us' },
{ icon: Phone, label: 'Contact Us', path: '/contact-us' },
{ icon: History, label: 'History', path: '/history' },
];
return (
<>
{isOpen && (
<div
className="fixed inset-0 bg-black/80 backdrop-blur-xs z-40 transition-opacity duration-200"
onClick={onClose}
/>
)}
<aside
className={cn(
"fixed top-0 left-0 h-full w-72 bg-slate-950 shadow-2xl font-mono",
"transform transition-transform duration-200 ease-out z-50 flex flex-col justify-between",
"border-r border-slate-800 text-slate-200",
isOpen ? "translate-x-0" : "-translate-x-full"
)}
>
<div>
<div className="h-14 flex items-center justify-between px-5 border-b border-slate-800 bg-slate-900/80">
<div className="flex items-center gap-2">
<span className="p-1 bg-red-600 rounded-sm text-white">
<ShieldCheck className="w-4 h-4" />
</span>
<h2 className="font-bold text-sm tracking-widest uppercase text-white font-sans">
MAIN NAVIGATION
</h2>
</div>
<button
onClick={onClose}
className="p-1.5 hover:bg-slate-800 rounded-sm text-slate-400 hover:text-white transition-colors"
aria-label="Close Sidebar"
>
<X className="w-4 h-4" />
</button>
</div>
<nav className="p-3 space-y-1">
{menuItems.map((item) => (
<button
key={item.label}
onClick={() => {
navigate(item.path);
onClose();
}}
className="w-full flex items-center gap-3 px-3.5 py-2.5 text-xs font-bold text-slate-300 hover:bg-slate-900 border border-transparent hover:border-slate-800 rounded-sm transition-all group text-left uppercase tracking-wider"
>
<item.icon className="w-4 h-4 text-slate-500 group-hover:text-red-500 transition-colors" />
<span>{item.label}</span>
</button>
))}
</nav>
</div>
<div className="p-4 m-3 rounded-sm bg-slate-900/90 border border-slate-800 space-y-2 text-xs">
<div className="flex items-center gap-2 text-red-400 font-bold uppercase tracking-wider border-b border-slate-800 pb-2">
<Terminal className="w-3.5 h-3.5 text-red-500" />
<span>AI Architecture</span>
</div>
<p className="text-slate-400 text-[11px] leading-relaxed font-sans">
Powered by hybrid <b>spaCy v3 Statistical Models</b> and <b>BERT / RoBERTa Deep Learning Transformers</b> for high-precision PII sanitization and realistic synthetic data generation.
</p>
</div>
</aside>
</>
);
} |