diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 1edf35a7d..ec9a0e2e7 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom' import { motion, AnimatePresence } from 'framer-motion' import { routes } from '../routes' import { useAuth } from './AuthContext' -import ThemeToggle from './ThemeToggle' +import { useTheme } from './ThemeContext' import { useSidebar } from '../context/SidebarContext' interface NavItemProps { @@ -22,7 +22,7 @@ const NavItem = ({ to, icon, label, isExpanded, highlight = false }: NavItemProp onClick={(e) => e.stopPropagation()} className={({ isActive }) => ` relative flex items-center transition-all duration-300 group - ${isExpanded ? 'gap-3 px-5 py-2.5 mx-2 rounded-lg' : 'justify-center py-3 px-2 mx-2 rounded-lg'} + ${isExpanded ? 'gap-3 px-5 py-3 mx-2 rounded-lg' : 'justify-center py-3 px-2 mx-2 rounded-lg'} ${isActive ? 'bg-accent-silver/10 text-primary shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]' : highlight @@ -103,6 +103,8 @@ const NavSection = ({ label, isExpanded }: { label: string, isExpanded: boolean ) export default function Sidebar() { + const { theme, toggleTheme } = useTheme() + const { isExpanded, toggleSidebar } = useSidebar() const { isAuthenticated, signOut } = useAuth() @@ -157,10 +159,8 @@ export default function Sidebar() { - - {/* Bottom Actions */} @@ -183,19 +183,29 @@ export default function Sidebar() { )} )} -
- + +
+ +