TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
feat(client): group sidebar navigation into four labelled sections
This commit is contained in:
Alexander Holliday authored and GitHub committed 2026-08-31 10:01:05 -07:00
2 parents 4e4bc5f319 3b6b7a1e5d
commit af1d964e44
23 files changed
+259 -85
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

CLAUDE.md
+1 -1
View File
@@ -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
+72 -52
View File
@@ -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
+50 -12
View File
@@ -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
+3 -1
View File
@@ -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
+7 -1
View File
@@ -181,7 +181,13 @@
"statusPages": "صفحات الحالة",
"maintenance": "الصيانة",
"logs": "السجلات",
"settings": "الإعدادات"
"settings": "الإعدادات",
"groups": {
"monitoring": "المراقبة",
"alerting": "التنبيهات",
"reporting": "التقارير",
"configuration": "الإعدادات العامة"
}
},
"bottomMenu": {
"support": "الدعم",
client/src/locales/ca.json
+7 -1
View File
@@ -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
+7 -1
View File
@@ -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
+7 -1
View File
@@ -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
+7 -1
View File
@@ -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
+7 -1
View File
@@ -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
+7 -1
View File
@@ -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
+7 -1
View File
@@ -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
+7 -1
View File
@@ -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
+7 -1
View File
@@ -181,7 +181,13 @@
"statusPages": "ステータスページ",
"maintenance": "メンテナンス",
"logs": "ログ",
"settings": "設定"
"settings": "設定",
"groups": {
"monitoring": "監視",
"alerting": "アラート",
"reporting": "レポート",
"configuration": "設定"
}
},
"bottomMenu": {
"support": "サポート",
client/src/locales/pl.json
+7 -1
View File
@@ -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
+7 -1
View File
@@ -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
+7 -1
View File
@@ -181,7 +181,13 @@
"statusPages": "Страницы статуса",
"maintenance": "Обслуживание",
"logs": "Логи",
"settings": "Настройки"
"settings": "Настройки",
"groups": {
"monitoring": "Мониторинг",
"alerting": "Оповещения",
"reporting": "Отчёты",
"configuration": "Конфигурация"
}
},
"bottomMenu": {
"support": "Поддержка",
client/src/locales/th.json
+7 -1
View File
@@ -181,7 +181,13 @@
"statusPages": "หน้าสถานะ",
"maintenance": "การบำรุงรักษา",
"logs": "บันทึก",
"settings": "การตั้งค่า"
"settings": "การตั้งค่า",
"groups": {
"monitoring": "การตรวจสอบ",
"alerting": "การแจ้งเตือน",
"reporting": "รายงาน",
"configuration": "การกำหนดค่า"
}
},
"bottomMenu": {
"support": "การสนับสนุน",
client/src/locales/tr.json
+7 -1
View File
@@ -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
+7 -1
View File
@@ -181,7 +181,13 @@
"statusPages": "Сторінки статусу",
"maintenance": "Обслуговування",
"logs": "Журнали",
"settings": "Налаштування"
"settings": "Налаштування",
"groups": {
"monitoring": "Моніторинг",
"alerting": "Сповіщення",
"reporting": "Звіти",
"configuration": "Конфігурація"
}
},
"bottomMenu": {
"support": "Підтримка",
client/src/locales/vi.json
+7 -1
View File
@@ -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
+7 -1
View File
@@ -181,7 +181,13 @@
"statusPages": "状态页",
"maintenance": "维护",
"logs": "日志",
"settings": "设置"
"settings": "设置",
"groups": {
"monitoring": "监控",
"alerting": "告警",
"reporting": "报表",
"configuration": "配置"
}
},
"bottomMenu": {
"support": "支持",
client/src/locales/zh-TW.json
+7 -1
View File
@@ -181,7 +181,13 @@
"statusPages": "狀態頁面",
"maintenance": "維護",
"logs": "日誌",
"settings": "設定"
"settings": "設定",
"groups": {
"monitoring": "監控",
"alerting": "警示",
"reporting": "報表",
"configuration": "設定"
}
},
"bottomMenu": {
"support": "支援",