diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx new file mode 100644 index 0000000..e1b65a0 --- /dev/null +++ b/frontend/src/components/layout/Sidebar.tsx @@ -0,0 +1,290 @@ +import React from 'react'; +import { NavLink, useLocation } from 'react-router-dom'; +import { useUiStore } from '../../stores'; + +const Sidebar: React.FC = () => { + const location = useLocation(); + const { sidebarCollapsed, toggleSidebar } = useUiStore(); + + const navItems = [ + { path: '/', label: '首页', icon: HomeIcon }, + { path: '/record', label: '记账', icon: RecordIcon }, + { path: '/budget', label: '预算', icon: BudgetIcon }, + { path: '/statistics', label: '统计', icon: StatisticsIcon }, + ]; + + return ( + + ); +}; + +// SVG Icons as React components +function LogoIcon() { + return ( + + + + + + ); +} + +function ChevronIcon() { + return ( + + + + ); +} + +function HomeIcon() { + return ( + + + + + ); +} + +function RecordIcon() { + return ( + + + + ); +} + +function BudgetIcon() { + return ( + + + + + + ); +} + +function StatisticsIcon() { + return ( + + + + + + ); +} + +export default Sidebar;