/**
* Sidebar Component
*
* Navigation sidebar for the annotation platform.
* Displays menu items and handles navigation.
*
* Requirements: 7.2, 7.5
*/
import React, { useState } from 'react';
import { useLocation, Link } from 'react-router-dom';
import { IconFolder, IconClipboardCheck, IconAnnotation, IconMenu, IconX } from '@humansignal/ui';
import './sidebar.module.scss';
/**
* Menu item interface
*/
interface MenuItem {
id: string;
label: string;
path: string;
icon: React.ReactNode;
}
/**
* Menu items configuration
*/
const menuItems: MenuItem[] = [
{
id: 'projects',
label: '项目管理',
path: '/projects',
icon: ,
},
{
id: 'tasks',
label: '任务管理',
path: '/tasks',
icon: ,
},
{
id: 'annotations',
label: '我的标注',
path: '/annotations',
icon: ,
},
];
export const Sidebar: React.FC = () => {
const location = useLocation();
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
/**
* Check if a menu item is active based on current route
*/
const isActive = (path: string): boolean => {
return location.pathname === path || location.pathname.startsWith(path + '/');
};
const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen);
};
const closeMobileMenu = () => {
setIsMobileMenuOpen(false);
};
return (
<>
{/* Mobile Menu Button */}
{/* Mobile Overlay */}
{isMobileMenuOpen && (
)}
{/* Sidebar */}
);
};