diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index ecd9388..b1731d8 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react' +import { useCallback, useState } from 'react' import { Outlet, Link, useLocation } from 'react-router-dom' import { useAuth } from '../context/AuthContext' import { useInactivityTimeout } from '../hooks/useInactivityTimeout' @@ -8,6 +8,7 @@ const INACTIVITY_TIMEOUT_MS = 30 * 60 * 1000 export default function Layout() { const location = useLocation() const { username, logout, isAdmin, isAuthenticated } = useAuth() + const [maintenanceExpanded, setMaintenanceExpanded] = useState(true) const handleInactivityLogout = useCallback(() => { logout() @@ -19,25 +20,54 @@ export default function Layout() { isEnabled: isAuthenticated, }) - const allNavItems = [ + const primaryNavItems = [ { path: '/scan', label: 'Scan', icon: '🗂️', adminOnly: false }, { path: '/process', label: 'Process', icon: '⚙️', adminOnly: false }, - { path: '/search', label: 'Search', icon: '🔍', adminOnly: false }, - { path: '/identify', label: 'Identify', icon: '👤', adminOnly: false }, + { path: '/search', label: 'Search Photos', icon: '🔍', adminOnly: false }, + { path: '/identify', label: 'Identify People', icon: '👤', adminOnly: false }, { path: '/auto-match', label: 'Auto-Match', icon: '🤖', adminOnly: false }, - { path: '/modify', label: 'Modify', icon: '✏️', adminOnly: false }, - { path: '/tags', label: 'Tag', icon: '🏷️', adminOnly: false }, - { path: '/faces-maintenance', label: 'Faces Maintenance', icon: '🔧', adminOnly: false }, - { path: '/approve-identified', label: 'Approve identified', icon: '✅', adminOnly: true }, - { path: '/manage-users', label: 'Manage users', icon: '👥', adminOnly: true }, - { path: '/reported-photos', label: 'Reported photos', icon: '🚩', adminOnly: true }, - { path: '/pending-photos', label: 'Manage User Uploaded Photos', icon: '📤', adminOnly: true }, + { path: '/modify', label: 'Modify People', icon: '✏️', adminOnly: false }, + { path: '/tags', label: 'Tag Photos', icon: '🏷️', adminOnly: false }, + ] + + const maintenanceNavItems = [ + { path: '/faces-maintenance', label: 'Faces', icon: '🔧', adminOnly: false }, + { path: '/approve-identified', label: 'User Identified Faces', icon: '✅', adminOnly: true }, + { path: '/reported-photos', label: 'User Reported Photos', icon: '🚩', adminOnly: true }, + { path: '/pending-photos', label: 'User Uploaded Photos', icon: '📤', adminOnly: true }, + { path: '/manage-users', label: 'Users', icon: '👥', adminOnly: true }, + ] + + const footerNavItems = [ { path: '/settings', label: 'Settings', icon: '⚙️', adminOnly: false }, { path: '/help', label: 'Help', icon: '📚', adminOnly: false }, ] - // Filter nav items based on admin status - const navItems = allNavItems.filter((item) => !item.adminOnly || isAdmin) + const filterNavItems = (items: typeof primaryNavItems) => + items.filter((item) => !item.adminOnly || isAdmin) + + const renderNavLink = ( + item: { path: string; label: string; icon: string }, + extraClasses = '' + ) => { + const isActive = location.pathname === item.path + return ( + + {item.icon} + {item.label} + + ) + } + + const visiblePrimary = filterNavItems(primaryNavItems) + const visibleMaintenance = filterNavItems(maintenanceNavItems) + const visibleFooter = filterNavItems(footerNavItems) return (