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)} + /> + ); + })} + + ); };