267 lines
10 KiB
JavaScript
267 lines
10 KiB
JavaScript
import { useState, useContext } from 'react'
|
|
import { NavLink } from 'react-router-dom'
|
|
import {
|
|
LayoutDashboard, FileEdit, Image, Calendar, Wallet,
|
|
FolderKanban, CheckSquare, Users, ChevronLeft, ChevronRight, ChevronDown,
|
|
Sparkles, Shield, LogOut, User, Settings, Languages, Tag, LayoutList, Receipt, BarChart3, Palette, CalendarDays, AlertCircle
|
|
} from 'lucide-react'
|
|
import { useAuth } from '../contexts/AuthContext'
|
|
import { useLanguage } from '../i18n/LanguageContext'
|
|
|
|
// Standalone items (no category)
|
|
const standaloneTop = [
|
|
{ to: '/', icon: LayoutDashboard, labelKey: 'nav.dashboard', end: true, tutorial: 'dashboard' },
|
|
]
|
|
|
|
// Grouped items by module
|
|
const moduleGroups = [
|
|
{
|
|
module: 'marketing',
|
|
labelKey: 'modules.marketing',
|
|
icon: Calendar,
|
|
items: [
|
|
{ to: '/campaigns', icon: Calendar, labelKey: 'nav.campaigns', tutorial: 'campaigns' },
|
|
{ to: '/posts', icon: FileEdit, labelKey: 'nav.posts', tutorial: 'posts' },
|
|
{ to: '/calendar', icon: CalendarDays, labelKey: 'nav.calendar' },
|
|
{ to: '/artefacts', icon: Palette, labelKey: 'nav.artefacts' },
|
|
{ to: '/assets', icon: Image, labelKey: 'nav.assets', tutorial: 'assets' },
|
|
{ to: '/brands', icon: Tag, labelKey: 'nav.brands' },
|
|
],
|
|
},
|
|
{
|
|
module: 'projects',
|
|
labelKey: 'modules.projects',
|
|
icon: FolderKanban,
|
|
items: [
|
|
{ to: '/projects', icon: LayoutList, labelKey: 'nav.projects' },
|
|
{ to: '/tasks', icon: CheckSquare, labelKey: 'nav.tasks', tutorial: 'tasks' },
|
|
],
|
|
},
|
|
{
|
|
module: 'finance',
|
|
labelKey: 'modules.finance',
|
|
icon: Wallet,
|
|
minRole: 'manager',
|
|
items: [
|
|
{ to: '/finance', icon: BarChart3, labelKey: 'nav.financeDashboard' },
|
|
{ to: '/budgets', icon: Receipt, labelKey: 'nav.budgets' },
|
|
],
|
|
},
|
|
{
|
|
module: 'issues',
|
|
labelKey: 'modules.issues',
|
|
icon: AlertCircle,
|
|
items: [
|
|
{ to: '/issues', icon: AlertCircle, labelKey: 'nav.issues' },
|
|
],
|
|
},
|
|
]
|
|
|
|
const standaloneBottom = [
|
|
{ to: '/team', icon: Users, labelKey: 'nav.team', tutorial: 'team' },
|
|
]
|
|
|
|
const ROLE_LEVEL = { contributor: 0, manager: 1, superadmin: 2 }
|
|
|
|
export default function Sidebar({ collapsed, setCollapsed }) {
|
|
const { user: currentUser, logout, hasModule } = useAuth()
|
|
const { t, lang, setLang } = useLanguage()
|
|
const userLevel = ROLE_LEVEL[currentUser?.role] ?? 0
|
|
|
|
// Track expanded state for each module group
|
|
const [expandedGroups, setExpandedGroups] = useState(() => {
|
|
const initial = {}
|
|
moduleGroups.forEach(g => { initial[g.module] = true })
|
|
return initial
|
|
})
|
|
|
|
const toggleGroup = (module) => {
|
|
setExpandedGroups(prev => ({ ...prev, [module]: !prev[module] }))
|
|
}
|
|
|
|
const navLink = ({ to, icon: Icon, labelKey, end, tutorial }, { sub = false } = {}) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={end}
|
|
data-tutorial={tutorial}
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-3 rounded-lg font-medium transition-all duration-200 group ${
|
|
sub ? 'px-3 py-1.5 ms-5 text-[13px]' : 'px-3 py-2 text-sm'
|
|
} ${
|
|
isActive
|
|
? 'bg-white/15 text-white shadow-sm sidebar-active-glow'
|
|
: 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
<Icon className={`${sub ? 'w-3.5 h-3.5' : 'w-5 h-5'} shrink-0`} />
|
|
{!collapsed && <span className="animate-fade-in whitespace-nowrap">{t(labelKey)}</span>}
|
|
</NavLink>
|
|
)
|
|
|
|
const visibleGroups = moduleGroups.filter(group => {
|
|
if (!hasModule(group.module)) return false
|
|
if (group.minRole && userLevel < (ROLE_LEVEL[group.minRole] ?? 0)) return false
|
|
return true
|
|
})
|
|
|
|
return (
|
|
<aside
|
|
className={`sidebar fixed top-0 h-screen bg-sidebar flex flex-col z-30 transition-all duration-300 ${
|
|
collapsed ? 'w-[68px]' : 'w-[260px]'
|
|
}`}
|
|
>
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-3 px-4 h-16 border-b border-white/10 shrink-0">
|
|
<div className="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-400 via-purple-500 to-pink-500 flex items-center justify-center shrink-0 shadow-lg shadow-indigo-500/30">
|
|
<Sparkles className="w-5 h-5 text-white" />
|
|
</div>
|
|
{!collapsed && (
|
|
<div className="animate-fade-in overflow-hidden">
|
|
<h1 className="text-white font-bold text-sm leading-tight whitespace-nowrap">{t('app.name')}</h1>
|
|
<p className="text-text-on-dark-muted text-xs whitespace-nowrap">{t('app.subtitle')}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 py-3 px-3 space-y-0.5 overflow-y-auto">
|
|
{/* Dashboard (always visible, standalone) */}
|
|
{standaloneTop.map(item => navLink(item))}
|
|
|
|
{/* Module groups */}
|
|
{visibleGroups.map(group => {
|
|
const GroupIcon = group.icon
|
|
const isExpanded = expandedGroups[group.module]
|
|
|
|
if (collapsed) {
|
|
// When collapsed, just show the sub-item icons
|
|
return group.items.map(item => navLink(item))
|
|
}
|
|
|
|
return (
|
|
<div key={group.module} className="mt-3">
|
|
{/* Category header */}
|
|
<button
|
|
onClick={() => toggleGroup(group.module)}
|
|
className="w-full flex items-center gap-2 px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-on-dark-muted hover:text-white transition-colors rounded-lg hover:bg-white/5"
|
|
>
|
|
<GroupIcon className="w-4 h-4 shrink-0 opacity-70" />
|
|
<span className="flex-1 text-start">{t(group.labelKey)}</span>
|
|
<ChevronDown className={`w-3.5 h-3.5 opacity-60 transition-transform ${isExpanded ? '' : '-rotate-90'}`} />
|
|
</button>
|
|
|
|
{/* Sub-items */}
|
|
{isExpanded && (
|
|
<div className="space-y-0.5 mt-0.5">
|
|
{group.items.map(item => navLink(item, { sub: true }))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{/* Team (always visible) */}
|
|
<div className="mt-3 pt-2 border-t border-white/8">
|
|
{standaloneBottom.map(item => navLink(item))}
|
|
</div>
|
|
|
|
{/* Superadmin Only: Users Management */}
|
|
{currentUser?.role === 'superadmin' && (
|
|
<NavLink
|
|
to="/users"
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group ${
|
|
isActive
|
|
? 'bg-white/15 text-white shadow-sm'
|
|
: 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
<Shield className="w-5 h-5 shrink-0" />
|
|
{!collapsed && <span className="animate-fade-in whitespace-nowrap">{t('nav.users')}</span>}
|
|
</NavLink>
|
|
)}
|
|
|
|
{/* Settings (visible to all) */}
|
|
<NavLink
|
|
to="/settings"
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group ${
|
|
isActive
|
|
? 'bg-white/15 text-white shadow-sm'
|
|
: 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
<Settings className="w-5 h-5 shrink-0" />
|
|
{!collapsed && <span className="animate-fade-in whitespace-nowrap">{t('nav.settings')}</span>}
|
|
</NavLink>
|
|
</nav>
|
|
|
|
{/* Current User & Logout */}
|
|
<div className="border-t border-white/10 shrink-0">
|
|
{currentUser && !collapsed && (
|
|
<div className="p-3 border-b border-white/10">
|
|
<div className="flex items-center gap-3 px-3 py-2 rounded-lg bg-white/5">
|
|
<div className="w-8 h-8 rounded-full bg-brand-primary flex items-center justify-center shrink-0">
|
|
{currentUser.avatar ? (
|
|
<img src={currentUser.avatar} alt={currentUser.name} className="w-full h-full rounded-full object-cover" />
|
|
) : (
|
|
<User className="w-4 h-4 text-white" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0 animate-fade-in">
|
|
<p className="text-white text-sm font-medium truncate">{currentUser.name}</p>
|
|
<p className="text-text-on-dark-muted text-xs truncate capitalize">{currentUser.role}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!collapsed && (
|
|
<>
|
|
{/* Language Toggle */}
|
|
<div className="px-3 pb-3">
|
|
<button
|
|
onClick={() => setLang(lang === 'en' ? 'ar' : 'en')}
|
|
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-text-on-dark-muted hover:bg-white/8 hover:text-white transition-colors text-sm"
|
|
>
|
|
<Languages className="w-4 h-4" />
|
|
<span className="animate-fade-in">{lang === 'en' ? 'عربي' : 'English'}</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Logout */}
|
|
<div className="px-3 pb-3">
|
|
<button
|
|
onClick={logout}
|
|
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-text-on-dark-muted hover:bg-white/8 hover:text-white transition-colors text-sm"
|
|
>
|
|
<LogOut className="w-4 h-4" />
|
|
<span className="animate-fade-in">{t('nav.logout')}</span>
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Collapse toggle */}
|
|
<div className="p-3 border-t border-white/10">
|
|
<button
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-text-on-dark-muted hover:bg-white/8 hover:text-white transition-colors text-sm"
|
|
>
|
|
{collapsed ? <ChevronRight className="w-4 h-4" /> : (
|
|
<>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
<span className="animate-fade-in">{t('nav.collapse')}</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|