diff --git a/client/src/Components/v2/sidebar/Menu.tsx b/client/src/Components/v2/sidebar/Menu.tsx
index ad58f4455..8292ea490 100644
--- a/client/src/Components/v2/sidebar/Menu.tsx
+++ b/client/src/Components/v2/sidebar/Menu.tsx
@@ -11,6 +11,12 @@ import {
Wrench,
Database,
Settings,
+ HelpCircle,
+ MessageCircle,
+ Code,
+ User,
+ Lock,
+ Users,
} from "lucide-react";
export const getMenu = (t: Function) => {
@@ -39,3 +45,16 @@ export const getMenu = (t: Function) => {
},
];
};
+
+export const getBottomMenu = (t: Function) => {
+ return [
+ { name: t("menu.support"), path: "support", icon: },
+ {
+ name: t("menu.discussions"),
+ path: "discussions",
+ icon: ,
+ },
+ { name: t("menu.docs"), path: "docs", icon: },
+ { name: t("menu.changelog"), path: "changelog", icon: },
+ ];
+};
diff --git a/client/src/Components/v2/sidebar/index.tsx b/client/src/Components/v2/sidebar/index.tsx
index 568703791..e278092eb 100644
--- a/client/src/Components/v2/sidebar/index.tsx
+++ b/client/src/Components/v2/sidebar/index.tsx
@@ -1,9 +1,10 @@
import { useEffect } from "react";
import Stack from "@mui/material/Stack";
import List from "@mui/material/List";
+import Divider from "@mui/material/Divider";
import { useSidebar } from "@/Hooks/useSidebar.js";
import { Logo } from "@/Components/v2/sidebar/Logo";
-import { getMenu } from "@/Components/v2/sidebar/Menu";
+import { getMenu, getBottomMenu } from "@/Components/v2/sidebar/Menu";
import { NavItem } from "@/Components/v2/sidebar/NavItem";
import { useNavigate, useLocation } from "react-router";
@@ -12,6 +13,13 @@ import { useTheme, useMediaQuery } from "@mui/material";
import { useDispatch } from "react-redux";
import { setCollapsed } from "@/Features/UI/uiSlice";
+const URL_MAP: Record = {
+ support: "https://discord.com/invite/NAb6H3UTjK",
+ discussions: "https://github.com/bluewave-labs/checkmate/discussions",
+ docs: "https://bluewavelabs.gitbook.io/checkmate",
+ changelog: "https://github.com/bluewave-labs/checkmate/releases",
+};
+
export const Sidebar = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
@@ -21,11 +29,24 @@ export const Sidebar = () => {
const theme = useTheme();
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
const menu = getMenu(t);
+ const bottomMenu = getBottomMenu(t);
useEffect(() => {
dispatch(setCollapsed({ collapsed: isSmall }));
}, [isSmall, dispatch]);
+ const handleNavClick = (path: string) => {
+ const url = URL_MAP[path];
+ if (url) {
+ window.open(url, "_blank", "noreferrer");
+ } else {
+ navigate(`/${path}`);
+ }
+ if (isSmall) {
+ dispatch(setCollapsed({ collapsed: true }));
+ }
+ };
+
return (
{
disablePadding
sx={{
px: theme.spacing(6),
- height: "100%",
+ flex: 1,
}}
>
{
key={item.path}
item={item}
selected={selected}
- onClick={() => {
- navigate(`/${item.path}`);
- if (isSmall) {
- dispatch(setCollapsed({ collapsed: true }));
- }
- }}
+ onClick={() => handleNavClick(item.path)}
/>
);
})}
+
+ {bottomMenu.map((item) => {
+ const selected = location.pathname.startsWith(`/${item.path}`);
+ return (
+ handleNavClick(item.path)}
+ />
+ );
+ })}
+
+
);
};