89 lines
4.4 KiB
TypeScript
Executable file
89 lines
4.4 KiB
TypeScript
Executable file
|
|
import React from 'react';
|
|
import { DashboardIcon } from './icons/DashboardIcon';
|
|
import { AnalyticsIcon } from './icons/AnalyticsIcon';
|
|
import { SettingsIcon } from './icons/SettingsIcon';
|
|
import { UserIcon } from './icons/UserIcon';
|
|
import { CampaignsIcon } from './icons/CampaignsIcon';
|
|
import { AuditIcon } from './icons/AuditIcon';
|
|
import { KnowledgeBaseIcon } from './icons/KnowledgeBaseIcon';
|
|
import type { UserRole } from '../types';
|
|
|
|
interface NavItem {
|
|
name: string;
|
|
icon: React.FC<{ className?: string }>;
|
|
roles: UserRole[];
|
|
}
|
|
|
|
const navigation: NavItem[] = [
|
|
{ name: 'Home', icon: DashboardIcon, roles: ['super_admin', 'oversight_admin', 'agency_admin', 'basic_user'] },
|
|
{ name: 'Campaigns', icon: CampaignsIcon, roles: ['super_admin', 'oversight_admin', 'agency_admin', 'basic_user'] },
|
|
{ name: 'Analytics', icon: AnalyticsIcon, roles: ['super_admin', 'oversight_admin', 'agency_admin'] },
|
|
{ name: 'Auditing', icon: AuditIcon, roles: ['super_admin', 'oversight_admin'] },
|
|
{ name: 'Knowledge Base', icon: KnowledgeBaseIcon, roles: ['super_admin'] },
|
|
{ name: 'User Management', icon: UserIcon, roles: ['super_admin', 'oversight_admin'] },
|
|
{ name: 'Settings', icon: SettingsIcon, roles: ['super_admin', 'oversight_admin', 'agency_admin'] },
|
|
];
|
|
|
|
interface SidebarProps {
|
|
activeItem: string;
|
|
onNavigate: (viewName: string) => void;
|
|
userName?: string;
|
|
userEmail?: string;
|
|
userRole: UserRole;
|
|
}
|
|
|
|
export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userName, userEmail, userRole }) => {
|
|
return (
|
|
<aside className="w-72 flex-shrink-0 bg-oliver-black text-slate-200 flex flex-col font-sans">
|
|
{/* Brand Header */}
|
|
<div className="py-6 px-8 border-b border-white/10 flex flex-col items-center text-center">
|
|
<img src={`${import.meta.env.BASE_URL}BAR-ModComms-logo-v6.png`} alt="Mod Comms AI" className="w-full h-auto object-contain" />
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 pr-4 pl-0 py-8 space-y-2 overflow-y-auto">
|
|
{navigation.filter(item => item.roles.includes(userRole)).map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = item.name === activeItem;
|
|
|
|
return (
|
|
<button
|
|
key={item.name}
|
|
onClick={() => onNavigate(item.name)}
|
|
className={`group w-full flex items-center pl-8 pr-4 py-3.5 text-left text-sm font-medium transition-all duration-300 ease-in-out ${
|
|
isActive
|
|
? 'bg-white text-oliver-black shadow-lg rounded-r-[10px] rounded-l-none'
|
|
: 'text-slate-300 hover:bg-white/10 hover:text-white rounded-[10px]'
|
|
}`}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
>
|
|
<Icon className={`h-5 w-5 mr-4 transition-transform duration-300 ${isActive ? 'scale-110' : 'group-hover:scale-110'}`} />
|
|
<span className="flex-1 tracking-wide">{item.name}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* User Profile Snippet */}
|
|
<div className="p-4 border-t border-white/10 bg-oliver-black/80">
|
|
<button
|
|
onClick={() => onNavigate('Profile')}
|
|
className={`group w-full flex items-center gap-3 p-3 rounded-[10px] text-left transition-all duration-200 ${
|
|
activeItem === 'Profile'
|
|
? 'bg-white/10'
|
|
: 'hover:bg-white/10'
|
|
}`}
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-oliver-azure flex items-center justify-center ring-2 ring-white/20 group-hover:ring-oliver-azure/50 transition-all">
|
|
<UserIcon className="h-5 w-5 text-white" />
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<p className="font-semibold text-sm text-white truncate">{userName || 'Unknown User'}</p>
|
|
<p className="text-xs text-slate-400 truncate">{userEmail || ''}</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|