Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 1x | import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link, useLocation } from 'react-router-dom';
import { LayoutDashboard, Building2, MessageSquare, Settings, Users, Shield, HelpCircle, Code, Mail } from 'lucide-react';
import { User } from '../types';
import SmoothScheduleLogo from './SmoothScheduleLogo';
interface PlatformSidebarProps {
user: User;
isCollapsed: boolean;
toggleCollapse: () => void;
}
const PlatformSidebar: React.FC<PlatformSidebarProps> = ({ user, isCollapsed, toggleCollapse }) => {
const { t } = useTranslation();
const location = useLocation();
const getNavClass = (path: string) => {
const isActive = location.pathname === path || (path !== '/' && location.pathname.startsWith(path));
const baseClasses = `flex items-center gap-3 py-2 text-sm font-medium rounded-md transition-colors`;
const collapsedClasses = isCollapsed ? 'px-3 justify-center' : 'px-3';
const activeClasses = 'bg-gray-700 text-white';
const inactiveClasses = 'text-gray-400 hover:text-white hover:bg-gray-800';
return `${baseClasses} ${collapsedClasses} ${isActive ? activeClasses : inactiveClasses}`;
};
const isSuperuser = user.role === 'superuser';
const isManager = user.role === 'platform_manager';
return (
<div className={`flex flex-col h-full bg-gray-900 text-white shrink-0 border-r border-gray-800 transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-64'}`}>
<button
onClick={toggleCollapse}
className={`flex items-center gap-3 w-full text-left px-6 py-6 border-b border-gray-800 ${isCollapsed ? 'justify-center' : ''} hover:bg-gray-800 transition-colors focus:outline-none`}
aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
>
<SmoothScheduleLogo className="w-10 h-10 shrink-0" />
{!isCollapsed && (
<div className="overflow-hidden">
<h1 className="font-bold text-sm tracking-wide uppercase text-gray-100 truncate">Smooth Schedule</h1>
<p className="text-xs text-gray-500 capitalize truncate">{user.role.replace('_', ' ')}</p>
</div>
)}
</button>
<nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
<p className={`text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 ${isCollapsed ? 'text-center' : 'px-3'}`}>{isCollapsed ? 'Ops' : 'Operations'}</p>
{(isSuperuser || isManager) && (
<Link to="/platform/dashboard" className={getNavClass('/platform/dashboard')} title={t('nav.platformDashboard')}>
<LayoutDashboard size={18} className="shrink-0" />
{!isCollapsed && <span>{t('nav.dashboard')}</span>}
</Link>
)}
<Link to="/platform/businesses" className={getNavClass("/platform/businesses")} title={t('nav.businesses')}>
<Building2 size={18} className="shrink-0" />
{!isCollapsed && <span>{t('nav.businesses')}</span>}
</Link>
<Link to="/platform/users" className={getNavClass('/platform/users')} title={t('nav.users')}>
<Users size={18} className="shrink-0" />
{!isCollapsed && <span>{t('nav.users')}</span>}
</Link>
<Link to="/platform/support" className={getNavClass('/platform/support')} title={t('nav.support')}>
<MessageSquare size={18} className="shrink-0" />
{!isCollapsed && <span>{t('nav.support')}</span>}
</Link>
<Link to="/platform/email-addresses" className={getNavClass('/platform/email-addresses')} title="Email Addresses">
<Mail size={18} className="shrink-0" />
{!isCollapsed && <span>Email Addresses</span>}
</Link>
{isSuperuser && (
<>
<p className={`text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-8 ${isCollapsed ? 'text-center' : 'px-3'}`}>{isCollapsed ? 'Sys' : 'System'}</p>
<Link to="/platform/staff" className={getNavClass('/platform/staff')} title={t('nav.staff')}>
<Shield size={18} className="shrink-0" />
{!isCollapsed && <span>{t('nav.staff')}</span>}
</Link>
<Link to="/platform/settings" className={getNavClass('/platform/settings')} title={t('nav.platformSettings')}>
<Settings size={18} className="shrink-0" />
{!isCollapsed && <span>{t('nav.platformSettings')}</span>}
</Link>
</>
)}
{/* Help Section */}
<div className="mt-8 pt-4 border-t border-gray-800">
<Link to="/help/ticketing" className={getNavClass('/help/ticketing')} title={t('nav.help', 'Help')}>
<HelpCircle size={18} className="shrink-0" />
{!isCollapsed && <span>{t('nav.help', 'Help')}</span>}
</Link>
<Link to="/help/email" className={getNavClass('/help/email')} title="Email Settings">
<Mail size={18} className="shrink-0" />
{!isCollapsed && <span>Email Settings</span>}
</Link>
<Link to="/help/api" className={getNavClass('/help/api')} title={t('nav.apiDocs', 'API Documentation')}>
<Code size={18} className="shrink-0" />
{!isCollapsed && <span>{t('nav.apiDocs', 'API Docs')}</span>}
</Link>
</div>
</nav>
</div>
);
};
export default PlatformSidebar;
|