diff --git a/frontend/admin-panel/src/components/Sidebar.tsx b/frontend/admin-panel/src/components/Sidebar.tsx index ab131ea..291d727 100644 --- a/frontend/admin-panel/src/components/Sidebar.tsx +++ b/frontend/admin-panel/src/components/Sidebar.tsx @@ -35,6 +35,7 @@ import { HelpCircle, Menu, RotateCcw, + Activity, } from 'lucide-react'; import api from '../services/api'; @@ -62,11 +63,22 @@ export default function Sidebar({ isOpen, setIsOpen }: SidebarProps) { const [newOrdersCount, setNewOrdersCount] = useState(0); const intervalRef = useRef | null>(null); - // Auto-close sidebar on mobile navigation + // Auto-close sidebar on mobile navigation and manage body overflow useEffect(() => { setIsOpen(false); }, [location.pathname, setIsOpen]); + useEffect(() => { + if (isOpen) { + document.body.classList.add('overflow-hidden', 'lg:overflow-auto'); + } else { + document.body.classList.remove('overflow-hidden', 'lg:overflow-auto'); + } + return () => { + document.body.classList.remove('overflow-hidden', 'lg:overflow-auto'); + }; + }, [isOpen]); + useEffect(() => { const fetchOrdersCount = async () => { try { @@ -95,6 +107,15 @@ export default function Sidebar({ isOpen, setIsOpen }: SidebarProps) { { icon: TrendingUp, label: 'گزارشات و تحلیل فروش', path: '/reports' }, ], }, + { + id: 'monitoring', + title: 'مرکز مانیتورینگ و سلامت', + icon: Activity, + items: [ + { icon: Activity, label: 'مانیتورینگ زنده سرویس‌ها', path: '/monitoring' }, + { icon: RotateCcw, label: 'پرتال مالی و استرداد زیبال', path: '/zibal-portal' }, + ], + }, { id: 'orders', title: 'سفارشات و مالی', @@ -173,25 +194,36 @@ export default function Sidebar({ isOpen, setIsOpen }: SidebarProps) { }, ]; - // Auto expand active group - const [expandedGroups, setExpandedGroups] = useState>(() => { - const initial: Record = {}; - menuGroups.forEach((g) => { + // Store only the active group ID so only one group stays expanded at a time + const [activeGroupId, setActiveGroupId] = useState(() => { + for (const g of menuGroups) { const hasActive = g.items.some( (item) => location.pathname === item.path || (item.path !== '/' && location.pathname.startsWith(item.path)) ); - initial[g.id] = hasActive || g.id === 'main' || g.id === 'orders'; - }); - return initial; + if (hasActive) return g.id; + } + return 'main'; }); + // Keep active group synchronized with URL navigation + useEffect(() => { + for (const g of menuGroups) { + const hasActive = g.items.some( + (item) => + location.pathname === item.path || + (item.path !== '/' && location.pathname.startsWith(item.path)) + ); + if (hasActive) { + setActiveGroupId(g.id); + break; + } + } + }, [location.pathname]); + const toggleGroup = (groupId: string) => { - setExpandedGroups((prev) => ({ - ...prev, - [groupId]: !prev[groupId], - })); + setActiveGroupId((prev) => (prev === groupId ? null : groupId)); }; return ( @@ -199,13 +231,13 @@ export default function Sidebar({ isOpen, setIsOpen }: SidebarProps) { {/* Mobile Backdrop */} {isOpen && (
setIsOpen(false)} /> )}
- {/* Menu Navigation */} -