Merge pull request #3901 from bluewave-labs/feat/sidebar-groups

feat(client): group sidebar navigation into four labelled sections

CLAUDE.md

@@ -109,7 +109,7 @@ client/src/
 - **Data Fetching**: SWR + Axios
 - **Database**: MongoDB with Mongoose ODM
 - **Queue/Cache**: Redis + BullMQ + Pulse (cron scheduling)
-- **i18n**: i18next + react-i18next (translations via PoEditor)
+- **i18n**: i18next + react-i18next (non-English locales are machine translated, not managed through a translation service)
 
 ---
 

client/src/Components/sidebar/Menu.tsx

@@ -23,64 +23,84 @@ import {
 export const getMenu = (t: Function) => {
 	return [
 		{
-			name: t("components.sidebar.menu.uptime"),
-			path: "uptime",
-			icon: <Icon icon={Globe} />,
+			group: t("components.sidebar.menu.groups.monitoring"),
+			items: [
+				{
+					name: t("components.sidebar.menu.uptime"),
+					path: "uptime",
+					icon: <Icon icon={Globe} />,
+				},
+				{
+					name: t("components.sidebar.menu.pagespeed"),
+					path: "pagespeed",
+					icon: <Icon icon={Gauge} />,
+				},
+				{
+					name: t("components.sidebar.menu.infrastructure"),
+					path: "infrastructure",
+					icon: <Icon icon={Link} />,
+				},
+			],
 		},
 		{
-			name: t("components.sidebar.menu.pagespeed"),
-			path: "pagespeed",
-			icon: <Icon icon={Gauge} />,
+			group: t("components.sidebar.menu.groups.alerting"),
+			items: [
+				{
+					name: t("components.sidebar.menu.incidents"),
+					path: "incidents",
+					icon: <Icon icon={AlertTriangle} />,
+				},
+				{
+					name: t("components.sidebar.menu.notifications"),
+					path: "notifications",
+					icon: <Icon icon={Bell} />,
+				},
+				{
+					name: t("components.sidebar.menu.maintenance"),
+					path: "maintenance",
+					icon: <Icon icon={Wrench} />,
+				},
+			],
 		},
 		{
-			name: t("components.sidebar.menu.infrastructure"),
-			path: "infrastructure",
-			icon: <Icon icon={Link} />,
+			group: t("components.sidebar.menu.groups.reporting"),
+			items: [
+				{
+					name: t("components.sidebar.menu.statusPages"),
+					path: "status",
+					icon: <Icon icon={Wifi} />,
+				},
+				{
+					name: t("components.sidebar.menu.checks"),
+					path: "checks",
+					icon: <Icon icon={FileText} />,
+				},
+				{
+					name: t("components.sidebar.menu.logs"),
+					path: "logs",
+					icon: <Icon icon={ScrollText} />,
+				},
+			],
 		},
 		{
-			name: t("components.sidebar.menu.notifications"),
-			path: "notifications",
-			icon: <Icon icon={Bell} />,
-		},
-		{
-			name: t("components.sidebar.menu.tags"),
-			path: "tags",
-			icon: <Icon icon={Tag} />,
-		},
-		{
-			name: t("components.sidebar.menu.proxies"),
-			path: "proxies",
-			icon: <Icon icon={Waypoints} />,
-		},
-		{
-			name: t("components.sidebar.menu.checks"),
-			path: "checks",
-			icon: <Icon icon={FileText} />,
-		},
-		{
-			name: t("components.sidebar.menu.incidents"),
-			path: "incidents",
-			icon: <Icon icon={AlertTriangle} />,
-		},
-		{
-			name: t("components.sidebar.menu.statusPages"),
-			path: "status",
-			icon: <Icon icon={Wifi} />,
-		},
-		{
-			name: t("components.sidebar.menu.maintenance"),
-			path: "maintenance",
-			icon: <Icon icon={Wrench} />,
-		},
-		{
-			name: t("components.sidebar.menu.logs"),
-			path: "logs",
-			icon: <Icon icon={ScrollText} />,
-		},
-		{
-			name: t("components.sidebar.menu.settings"),
-			icon: <Icon icon={Settings} />,
-			path: "settings",
+			group: t("components.sidebar.menu.groups.configuration"),
+			items: [
+				{
+					name: t("components.sidebar.menu.tags"),
+					path: "tags",
+					icon: <Icon icon={Tag} />,
+				},
+				{
+					name: t("components.sidebar.menu.proxies"),
+					path: "proxies",
+					icon: <Icon icon={Waypoints} />,
+				},
+				{
+					name: t("components.sidebar.menu.settings"),
+					path: "settings",
+					icon: <Icon icon={Settings} />,
+				},
+			],
 		},
 	];
 };

client/src/Components/sidebar/index.tsx

@@ -1,9 +1,12 @@
 import { useEffect } from "react";
 import Backdrop from "@mui/material/Backdrop";
 import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
 import List from "@mui/material/List";
 import Divider from "@mui/material/Divider";
 import { LAYOUT } from "@/Utils/Theme/constants";
+import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useSidebar } from "@/Hooks/useSidebar.js";
 import { Logo } from "@/Components/sidebar/Logo";
 import { getMenu, getAccountMenu } from "@/Components/sidebar/Menu";
@@ -29,7 +32,7 @@ export const Sidebar = () => {
 	const navigate = useNavigate();
 	const location = useLocation();
 	const { t } = useTranslation();
-	const { width, transition, collapsed } = useSidebar();
+	const { width, transition, transitionTiming, collapsed } = useSidebar();
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const menu = getMenu(t);
@@ -89,17 +92,52 @@ export const Sidebar = () => {
 						pt={theme.spacing(LAYOUT.MD)}
 						pb={theme.spacing(LAYOUT.MD)}
 					/>
-					{menu.map((item) => {
-						const selected = location.pathname.startsWith(`/${item.path}`);
-						return (
-							<NavItem
-								key={item.path}
-								item={item}
-								selected={selected}
-								onClick={() => handleNavClick(item.path)}
-							/>
-						);
-					})}
+					{menu.map((group) => (
+						<Box key={group.group}>
+							<Box
+								position="relative"
+								overflow="hidden"
+							>
+								<Typography
+									variant="eyebrow"
+									component="div"
+									color={theme.palette.text.disabled}
+									fontSize={typographyLevels.s}
+									paddingLeft={theme.spacing(5)}
+									paddingTop={theme.spacing(LAYOUT.SM)}
+									paddingBottom={theme.spacing(LAYOUT.XXS)}
+									whiteSpace="nowrap"
+									sx={{
+										opacity: collapsed ? 0 : 1,
+										transition: `opacity ${transitionTiming}`,
+									}}
+								>
+									{group.group}
+								</Typography>
+								<Divider
+									sx={{
+										position: "absolute",
+										top: "50%",
+										left: 0,
+										right: 0,
+										opacity: collapsed ? 1 : 0,
+										transition: `opacity ${transitionTiming}`,
+									}}
+								/>
+							</Box>
+							{group.items.map((item) => {
+								const selected = location.pathname.startsWith(`/${item.path}`);
+								return (
+									<NavItem
+										key={item.path}
+										item={item}
+										selected={selected}
+										onClick={() => handleNavClick(item.path)}
+									/>
+								);
+							})}
+						</Box>
+					))}
 				</List>
 				<StarPrompt />
 

client/src/Hooks/useSidebar.ts

@@ -6,7 +6,8 @@ const SIDEBAR_WIDTH_VAR = 250;
 const SIDEBAR_COLLAPSED_WIDTH_VAR = 64;
 
 // Transition timing for sidebar width changes
-const SIDEBAR_TRANSITION = "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)";
+const SIDEBAR_TRANSITION_TIMING = "650ms cubic-bezier(0.36, -0.01, 0, 0.77)";
+const SIDEBAR_TRANSITION = `width ${SIDEBAR_TRANSITION_TIMING}`;
 
 export const useSidebar = () => {
 	const collapsed = useSelector(
@@ -19,6 +20,7 @@ export const useSidebar = () => {
 		expandedWidth: SIDEBAR_WIDTH_VAR,
 		width: collapsed ? SIDEBAR_COLLAPSED_WIDTH_VAR : SIDEBAR_WIDTH_VAR,
 		transition: SIDEBAR_TRANSITION,
+		transitionTiming: SIDEBAR_TRANSITION_TIMING,
 	};
 };
 

client/src/locales/ar.json

@@ -181,7 +181,13 @@
 				"statusPages": "صفحات الحالة",
 				"maintenance": "الصيانة",
 				"logs": "السجلات",
-				"settings": "الإعدادات"
+				"settings": "الإعدادات",
+				"groups": {
+					"monitoring": "المراقبة",
+					"alerting": "التنبيهات",
+					"reporting": "التقارير",
+					"configuration": "الإعدادات العامة"
+				}
 			},
 			"bottomMenu": {
 				"support": "الدعم",

client/src/locales/ca.json

@@ -189,7 +189,13 @@
 				"statusPages": "Pàgines d'estat",
 				"maintenance": "Manteniment",
 				"logs": "Registres",
-				"settings": "Configuració"
+				"settings": "Configuració",
+				"groups": {
+					"monitoring": "Monitoratge",
+					"alerting": "Alertes",
+					"reporting": "Informes",
+					"configuration": "Configuració"
+				}
 			},
 			"bottomMenu": {
 				"support": "Suport",

client/src/locales/cs.json

@@ -181,7 +181,13 @@
 				"statusPages": "Stavové stránky",
 				"maintenance": "Údržba",
 				"logs": "Záznamy",
-				"settings": "Nastavení"
+				"settings": "Nastavení",
+				"groups": {
+					"monitoring": "Monitorování",
+					"alerting": "Upozornění",
+					"reporting": "Přehledy",
+					"configuration": "Konfigurace"
+				}
 			},
 			"bottomMenu": {
 				"support": "Podpora",

client/src/locales/de.json

@@ -181,7 +181,13 @@
 				"statusPages": "Statusseite",
 				"maintenance": "Wartung",
 				"logs": "Protokolle",
-				"settings": "Einstellungen"
+				"settings": "Einstellungen",
+				"groups": {
+					"monitoring": "Überwachung",
+					"alerting": "Benachrichtigungen",
+					"reporting": "Berichte",
+					"configuration": "Konfiguration"
+				}
 			},
 			"bottomMenu": {
 				"support": "Support",

client/src/locales/en.json

@@ -211,7 +211,13 @@
 				"statusPages": "Status pages",
 				"maintenance": "Maintenance",
 				"logs": "Logs",
-				"settings": "Settings"
+				"settings": "Settings",
+				"groups": {
+					"monitoring": "Monitoring",
+					"alerting": "Alerting",
+					"reporting": "Reporting",
+					"configuration": "Configuration"
+				}
 			},
 			"bottomMenu": {
 				"support": "Support",

client/src/locales/es.json

@@ -181,7 +181,13 @@
 				"statusPages": "Páginas de estado",
 				"maintenance": "Mantenimiento",
 				"logs": "Registros",
-				"settings": "Configuración"
+				"settings": "Configuración",
+				"groups": {
+					"monitoring": "Monitorización",
+					"alerting": "Alertas",
+					"reporting": "Informes",
+					"configuration": "Configuración"
+				}
 			},
 			"bottomMenu": {
 				"support": "Soporte",

client/src/locales/fi.json

@@ -181,7 +181,13 @@
 				"statusPages": "Tilasivut",
 				"maintenance": "Huolto",
 				"logs": "Lokit",
-				"settings": "Asetukset"
+				"settings": "Asetukset",
+				"groups": {
+					"monitoring": "Valvonta",
+					"alerting": "Hälytykset",
+					"reporting": "Raportointi",
+					"configuration": "Määritykset"
+				}
 			},
 			"bottomMenu": {
 				"support": "Tuki",

client/src/locales/fr.json

@@ -181,7 +181,13 @@
 				"statusPages": "Pages de statut",
 				"maintenance": "Maintenance",
 				"logs": "Journaux",
-				"settings": "Paramètres"
+				"settings": "Paramètres",
+				"groups": {
+					"monitoring": "Surveillance",
+					"alerting": "Alertes",
+					"reporting": "Rapports",
+					"configuration": "Configuration"
+				}
 			},
 			"bottomMenu": {
 				"support": "Support",

client/src/locales/it.json

@@ -193,7 +193,13 @@
 				"statusPages": "Pagine di stato",
 				"maintenance": "Manutenzione",
 				"logs": "Log",
-				"settings": "Impostazioni"
+				"settings": "Impostazioni",
+				"groups": {
+					"monitoring": "Monitoraggio",
+					"alerting": "Avvisi",
+					"reporting": "Report",
+					"configuration": "Configurazione"
+				}
 			},
 			"bottomMenu": {
 				"support": "Supporto",

client/src/locales/ja.json

@@ -181,7 +181,13 @@
 				"statusPages": "ステータスページ",
 				"maintenance": "メンテナンス",
 				"logs": "ログ",
-				"settings": "設定"
+				"settings": "設定",
+				"groups": {
+					"monitoring": "監視",
+					"alerting": "アラート",
+					"reporting": "レポート",
+					"configuration": "設定"
+				}
 			},
 			"bottomMenu": {
 				"support": "サポート",

client/src/locales/pl.json

@@ -214,7 +214,13 @@
 				"settings": "Ustawienia",
 				"statusPages": "Strony statusu",
 				"tags": "Tagi",
-				"uptime": "Czas działania"
+				"uptime": "Czas działania",
+				"groups": {
+					"monitoring": "Monitorowanie",
+					"alerting": "Alerty",
+					"reporting": "Raporty",
+					"configuration": "Konfiguracja"
+				}
 			},
 			"starPrompt": {
 				"description": "Zobacz najnowsze wydania i pomóż rozwijać społeczność na GitHub",

client/src/locales/pt-BR.json

@@ -181,7 +181,13 @@
 				"statusPages": "Pagina de status",
 				"maintenance": "Manutenção",
 				"logs": "Registros",
-				"settings": "Configurações"
+				"settings": "Configurações",
+				"groups": {
+					"monitoring": "Monitoramento",
+					"alerting": "Alertas",
+					"reporting": "Relatórios",
+					"configuration": "Configuração"
+				}
 			},
 			"bottomMenu": {
 				"support": "Suporte",

client/src/locales/ru.json

@@ -181,7 +181,13 @@
 				"statusPages": "Страницы статуса",
 				"maintenance": "Обслуживание",
 				"logs": "Логи",
-				"settings": "Настройки"
+				"settings": "Настройки",
+				"groups": {
+					"monitoring": "Мониторинг",
+					"alerting": "Оповещения",
+					"reporting": "Отчёты",
+					"configuration": "Конфигурация"
+				}
 			},
 			"bottomMenu": {
 				"support": "Поддержка",

client/src/locales/th.json

@@ -181,7 +181,13 @@
 				"statusPages": "หน้าสถานะ",
 				"maintenance": "การบำรุงรักษา",
 				"logs": "บันทึก",
-				"settings": "การตั้งค่า"
+				"settings": "การตั้งค่า",
+				"groups": {
+					"monitoring": "การตรวจสอบ",
+					"alerting": "การแจ้งเตือน",
+					"reporting": "รายงาน",
+					"configuration": "การกำหนดค่า"
+				}
 			},
 			"bottomMenu": {
 				"support": "การสนับสนุน",

client/src/locales/tr.json

@@ -181,7 +181,13 @@
 				"statusPages": "Durum sayfaları",
 				"maintenance": "Bakım",
 				"logs": "Günlükler",
-				"settings": "Ayarlar"
+				"settings": "Ayarlar",
+				"groups": {
+					"monitoring": "İzleme",
+					"alerting": "Uyarılar",
+					"reporting": "Raporlama",
+					"configuration": "Yapılandırma"
+				}
 			},
 			"bottomMenu": {
 				"support": "Destek",

client/src/locales/uk.json

@@ -181,7 +181,13 @@
 				"statusPages": "Сторінки статусу",
 				"maintenance": "Обслуговування",
 				"logs": "Журнали",
-				"settings": "Налаштування"
+				"settings": "Налаштування",
+				"groups": {
+					"monitoring": "Моніторинг",
+					"alerting": "Сповіщення",
+					"reporting": "Звіти",
+					"configuration": "Конфігурація"
+				}
 			},
 			"bottomMenu": {
 				"support": "Підтримка",

client/src/locales/vi.json

@@ -181,7 +181,13 @@
 				"statusPages": "Trang trạng thái",
 				"maintenance": "Bảo trì",
 				"logs": "Nhật ký",
-				"settings": "Cài đặt"
+				"settings": "Cài đặt",
+				"groups": {
+					"monitoring": "Giám sát",
+					"alerting": "Cảnh báo",
+					"reporting": "Báo cáo",
+					"configuration": "Cấu hình"
+				}
 			},
 			"bottomMenu": {
 				"support": "Hỗ trợ",

client/src/locales/zh-CN.json

@@ -181,7 +181,13 @@
 				"statusPages": "状态页",
 				"maintenance": "维护",
 				"logs": "日志",
-				"settings": "设置"
+				"settings": "设置",
+				"groups": {
+					"monitoring": "监控",
+					"alerting": "告警",
+					"reporting": "报表",
+					"configuration": "配置"
+				}
 			},
 			"bottomMenu": {
 				"support": "支持",

client/src/locales/zh-TW.json

@@ -181,7 +181,13 @@
 				"statusPages": "狀態頁面",
 				"maintenance": "維護",
 				"logs": "日誌",
-				"settings": "設定"
+				"settings": "設定",
+				"groups": {
+					"monitoring": "監控",
+					"alerting": "警示",
+					"reporting": "報表",
+					"configuration": "設定"
+				}
 			},
 			"bottomMenu": {
 				"support": "支援",