GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-29 05:12:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fixes sidebar highlight on route change

Browse Source
This commit is contained in:
dhrubesh 2021-05-02 16:06:31 +05:30
parent ee69c3aed2
commit e78d979dd3
1 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/modules/Nav/SideNav.tsx
View File

@ -1,8 +1,8 @@
import React, { useState } from "react"; import React, { useState, useEffect } from "react";
import { Layout, Menu, Switch as ToggleButton } from "antd"; import { Layout, Menu, Switch as ToggleButton } from "antd";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { useThemeSwitcher } from "react-css-theme-switcher"; import { useThemeSwitcher } from "react-css-theme-switcher";
import { useHistory } from "react-router-dom"; import { useLocation } from "react-router-dom";
import ROUTES from "Src/constants/routes"; import ROUTES from "Src/constants/routes";
import { import {
@ -19,11 +19,20 @@ const { Sider } = Layout;
const SideNav = () => { const SideNav = () => {
const { switcher, currentTheme, status, themes } = useThemeSwitcher(); const { switcher, currentTheme, status, themes } = useThemeSwitcher();
const [collapsed, setCollapsed] = useState<boolean>(false); const [collapsed, setCollapsed] = useState<boolean>(false);
const history = useHistory(); const [selectedKeys, setSelectedKeys] = useState<string[]>([
ROUTES.APPLICATION,
]);
const location = useLocation();
if (status === "loading" || history.location.pathname === ROUTES.SIGN_UP) { useEffect(() => {
const newRoute = location.pathname.split("/")[1];
setSelectedKeys([`/${newRoute}`]);
}, [location.pathname]);
if (status === "loading" || location.pathname === ROUTES.SIGN_UP) {
return null; return null;
} }
const toggleTheme = (isChecked: boolean) => { const toggleTheme = (isChecked: boolean) => {
switcher({ theme: isChecked ? themes.dark : themes.light }); switcher({ theme: isChecked ? themes.dark : themes.light });
}; };
@ -53,8 +62,13 @@ const SideNav = () => {
</NavLink> </NavLink>
</div> </div>
<Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline"> <Menu
<Menu.Item key="1" icon={<BarChartOutlined />}> theme="dark"
defaultSelectedKeys={[ROUTES.APPLICATION]}
selectedKeys={selectedKeys}
mode="inline"
>
<Menu.Item key={ROUTES.APPLICATION} icon={<BarChartOutlined />}>
<NavLink <NavLink
to={ROUTES.APPLICATION} to={ROUTES.APPLICATION}
style={{ fontSize: 12, textDecoration: "none" }} style={{ fontSize: 12, textDecoration: "none" }}
@ -62,7 +76,7 @@ const SideNav = () => {
Metrics Metrics
</NavLink> </NavLink>
</Menu.Item> </Menu.Item>
<Menu.Item key="2" icon={<AlignLeftOutlined />}> <Menu.Item key={ROUTES.TRACES} icon={<AlignLeftOutlined />}>
<NavLink <NavLink
to={ROUTES.TRACES} to={ROUTES.TRACES}
style={{ fontSize: 12, textDecoration: "none" }} style={{ fontSize: 12, textDecoration: "none" }}
@ -70,7 +84,7 @@ const SideNav = () => {
Traces Traces
</NavLink> </NavLink>
</Menu.Item> </Menu.Item>
<Menu.Item key="3" icon={<DeploymentUnitOutlined />}> <Menu.Item key={ROUTES.SERVICE_MAP} icon={<DeploymentUnitOutlined />}>
<NavLink <NavLink
to={ROUTES.SERVICE_MAP} to={ROUTES.SERVICE_MAP}
style={{ fontSize: 12, textDecoration: "none" }} style={{ fontSize: 12, textDecoration: "none" }}
@ -78,7 +92,7 @@ const SideNav = () => {
Service Map Service Map
</NavLink> </NavLink>
</Menu.Item> </Menu.Item>
<Menu.Item key="4" icon={<LineChartOutlined />}> <Menu.Item key={ROUTES.USAGE_EXPLORER} icon={<LineChartOutlined />}>
<NavLink <NavLink
to={ROUTES.USAGE_EXPLORER} to={ROUTES.USAGE_EXPLORER}
style={{ fontSize: 12, textDecoration: "none" }} style={{ fontSize: 12, textDecoration: "none" }}
@ -86,7 +100,7 @@ const SideNav = () => {
Usage Explorer Usage Explorer
</NavLink> </NavLink>
</Menu.Item> </Menu.Item>
<Menu.Item key="5" icon={<SettingOutlined />}> <Menu.Item key={ROUTES.SETTINGS} icon={<SettingOutlined />}>
<NavLink <NavLink
to={ROUTES.SETTINGS} to={ROUTES.SETTINGS}
style={{ fontSize: 12, textDecoration: "none" }} style={{ fontSize: 12, textDecoration: "none" }}
@ -94,8 +108,11 @@ const SideNav = () => {
Settings Settings
</NavLink> </NavLink>
</Menu.Item> </Menu.Item>
<Menu.Item key="6" icon={<ApiOutlined />}> <Menu.Item key={ROUTES.INSTRUMENTATION} icon={<ApiOutlined />}>
<NavLink to={ROUTES.INSTRUMENTATION} style={{ fontSize: 12, textDecoration: "none" }}> <NavLink
to={ROUTES.INSTRUMENTATION}
style={{ fontSize: 12, textDecoration: "none" }}
>
Add instrumentation Add instrumentation
</NavLink> </NavLink>
</Menu.Item> </Menu.Item>