From 387e390cb8e1426b6b5ec575917d754fd90aad44 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Wed, 8 Oct 2025 15:34:43 +0000 Subject: [PATCH] Improve sidebar functionality and update dashboard statistics Update sidebar component to support collapsing, expand the icons to fit the collapsed view, and add collapse/expand toggle buttons. Fix dashboard statistics cards to display accurate data. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/ycYcQjF --- client/src/components/sidebar.tsx | 147 ++++++++++++++++++++++-------- 1 file changed, 109 insertions(+), 38 deletions(-) diff --git a/client/src/components/sidebar.tsx b/client/src/components/sidebar.tsx index bbabe38..8e1d9a7 100644 --- a/client/src/components/sidebar.tsx +++ b/client/src/components/sidebar.tsx @@ -1,15 +1,24 @@ -import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut } from "lucide-react"; +import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight } from "lucide-react"; import { Link, useLocation } from "wouter"; import { useQuery, useMutation } from "@tanstack/react-query"; import { apiRequest, queryClient } from "@/lib/queryClient"; import { useToast } from "@/hooks/use-toast"; import { Button } from "@/components/ui/button"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { useState, useEffect } from "react"; export default function Sidebar() { const [location] = useLocation(); const [, setLocation] = useLocation(); const { toast } = useToast(); + const [isCollapsed, setIsCollapsed] = useState(() => { + const saved = localStorage.getItem('sidebar-collapsed'); + return saved === 'true'; + }); + + useEffect(() => { + localStorage.setItem('sidebar-collapsed', String(isCollapsed)); + }, [isCollapsed]); const { data: session } = useQuery<{ id: string; username: string; role: string }>({ queryKey: ["/api/auth/session"], @@ -46,7 +55,7 @@ export default function Sidebar() { ]; return ( -