From 99d175c17d82fdbea5a86fa795ad766da25b2595 Mon Sep 17 00:00:00 2001 From: snowgitea Date: Wed, 29 Apr 2026 10:53:28 +0800 Subject: [PATCH] chore: add frontend/src/components/layout/Sidebar.tsx --- frontend/src/components/layout/Sidebar.tsx | 290 +++++++++++++++++++++ 1 file changed, 290 insertions(+) create mode 100644 frontend/src/components/layout/Sidebar.tsx 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;