refactor(frontend): Sidebar is updated (#276)

frontend/src/components/SideNav/index.tsx

+import React, { useState, useCallback } from "react";
+import { Layout, Menu, Switch as ToggleButton } from "antd";
+import { NavLink } from "react-router-dom";
+import { useThemeSwitcher } from "react-css-theme-switcher";
+import { useLocation } from "react-router-dom";
+import ROUTES from "constants/routes";
+
+import { ThemeSwitcherWrapper, Logo } from "./styles";
+const { Sider } = Layout;
+import menus from "./menuItems";
+
+const SideNav = (): JSX.Element => {
+	const { switcher, currentTheme, themes } = useThemeSwitcher();
+
+	const [collapsed, setCollapsed] = useState<boolean>(false);
+	const { pathname } = useLocation();
+
+	const toggleTheme = useCallback((isChecked: boolean) => {
+		switcher({ theme: isChecked ? themes.dark : themes.light });
+	}, []);
+
+	const onCollapse = useCallback(() => {
+		setCollapsed((collapsed) => !collapsed);
+	}, []);
+
+	return (
+		<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={160}>
+			<ThemeSwitcherWrapper>
+				<ToggleButton
+					checked={currentTheme === themes.dark}
+					onChange={toggleTheme}
+				/>
+			</ThemeSwitcherWrapper>
+			<NavLink to="/">
+				<Logo src={"/signoz.svg"} alt="SigNoz" collapsed={collapsed} />
+			</NavLink>
+
+			<Menu
+				theme="dark"
+				defaultSelectedKeys={[ROUTES.APPLICATION]}
+				selectedKeys={[pathname]}
+				mode="inline"
+			>
+				{menus.map(({ to, Icon, name }) => (
+					<Menu.Item key={to} icon={<Icon />}>
+						<NavLink to={to} style={{ fontSize: 12, textDecoration: "none" }}>
+							{name}
+						</NavLink>
+					</Menu.Item>
+				))}
+			</Menu>
+		</Sider>
+	);
+};
+
+export default SideNav;

frontend/src/components/SideNav/menuItems.ts

+import {
+	BarChartOutlined,
+	AlignLeftOutlined,
+	DeploymentUnitOutlined,
+	LineChartOutlined,
+	SettingOutlined,
+	ApiOutlined,
+} from "@ant-design/icons";
+import ROUTES from "constants/routes";
+
+const menus: SidebarMenu[] = [
+	{
+		Icon: BarChartOutlined,
+		to: ROUTES.APPLICATION,
+		name: "Metrics",
+	},
+	{
+		Icon: AlignLeftOutlined,
+		to: ROUTES.TRACES,
+		name: "Traces",
+	},
+	{
+		to: ROUTES.SERVICE_MAP,
+		name: "Service Map",
+		Icon: DeploymentUnitOutlined,
+	},
+	{
+		Icon: LineChartOutlined,
+		to: ROUTES.USAGE_EXPLORER,
+		name: "Usage Explorer",
+	},
+	{
+		Icon: SettingOutlined,
+		to: ROUTES.SETTINGS,
+		name: "Settings",
+	},
+	{
+		Icon: ApiOutlined,
+		to: ROUTES.INSTRUMENTATION,
+		name: "Add instrumentation",
+	},
+];
+
+interface SidebarMenu {
+	to: string;
+	name: string;
+	Icon: typeof ApiOutlined;
+}
+
+export default menus;

frontend/src/modules/Nav/styles.ts → frontend/src/components/SideNav/styles.ts

-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const ThemeSwitcherWrapper = styled.div`
 	display: flex;
@@ -6,3 +6,13 @@ export const ThemeSwitcherWrapper = styled.div`
 	margin-top: 24px;
 	margin-bottom: 16px;
 `;
+
+export const Logo = styled.img<LogoProps>`
+	width: 100px;
+	margin: 5%;
+	display: ${({ collapsed }) => (!collapsed ? "block" : "none")};
+`;
+
+interface LogoProps {
+	collapsed: boolean;
+}

frontend/src/modules/AppLayout.tsx

@@ -2,7 +2,7 @@ import { Layout } from 'antd';
 import React, { ReactNode, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import SideNav from './Nav/SideNav';
+import SideNav from 'components/SideNav';
 import TopNav from './Nav/TopNav';
 import { useRoute } from './RouteProvider';
 

frontend/src/modules/Nav/SideNav.tsx

-import {
-	AlignLeftOutlined,
-	ApiOutlined,
-	BarChartOutlined,
-	DeploymentUnitOutlined,
-	LineChartOutlined,
-	SettingOutlined,
-} from '@ant-design/icons';
-import { Layout, Menu, Switch as ToggleButton } from 'antd';
-import ROUTES from 'constants/routes';
-import React, { useEffect,useState } from 'react';
-import { useThemeSwitcher } from 'react-css-theme-switcher';
-import { NavLink } from 'react-router-dom';
-import { useLocation } from 'react-router-dom';
-
-import { ThemeSwitcherWrapper } from './styles';
-const { Sider } = Layout;
-
-const SideNav = () => {
-	const { switcher, currentTheme, status, themes } = useThemeSwitcher();
-	const [collapsed, setCollapsed] = useState<boolean>(false);
-	const [selectedKeys, setSelectedKeys] = useState<string[]>([
-		ROUTES.APPLICATION,
-	]);
-	const location = useLocation();
-
-	useEffect(() => {
-		const newRoute = location.pathname.split('/')[1];
-		setSelectedKeys([`/${newRoute}`]);
-	}, [location.pathname]);
-
-	if (status === 'loading' || location.pathname === ROUTES.SIGN_UP) {
-		return null;
-	}
-
-	const toggleTheme = (isChecked: boolean) => {
-		switcher({ theme: isChecked ? themes.dark : themes.light });
-	};
-
-	const onCollapse = (): void => {
-		setCollapsed(!collapsed);
-	};
-	return (
-		<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={160}>
-			<div className="logo">
-				<ThemeSwitcherWrapper>
-					<ToggleButton
-						checked={currentTheme === themes.dark}
-						onChange={toggleTheme}
-					/>
-				</ThemeSwitcherWrapper>
-				<NavLink to="/">
-					<img
-						src={'/signoz.svg'}
-						alt={'SigNoz'}
-						style={{
-							margin: '5%',
-							width: 100,
-							display: !collapsed ? 'block' : 'none',
-						}}
-					/>
-				</NavLink>
-			</div>
-
-			<Menu
-				theme="dark"
-				defaultSelectedKeys={[ROUTES.APPLICATION]}
-				selectedKeys={selectedKeys}
-				mode="inline"
-			>
-				<Menu.Item key={ROUTES.APPLICATION} icon={<BarChartOutlined />}>
-					<NavLink
-						to={ROUTES.APPLICATION}
-						style={{ fontSize: 12, textDecoration: 'none' }}
-					>
-						Metrics
-					</NavLink>
-				</Menu.Item>
-				<Menu.Item key={ROUTES.TRACES} icon={<AlignLeftOutlined />}>
-					<NavLink
-						to={ROUTES.TRACES}
-						style={{ fontSize: 12, textDecoration: 'none' }}
-					>
-						Traces
-					</NavLink>
-				</Menu.Item>
-				<Menu.Item key={ROUTES.SERVICE_MAP} icon={<DeploymentUnitOutlined />}>
-					<NavLink
-						to={ROUTES.SERVICE_MAP}
-						style={{ fontSize: 12, textDecoration: 'none' }}
-					>
-						Service Map
-					</NavLink>
-				</Menu.Item>
-				<Menu.Item key={ROUTES.USAGE_EXPLORER} icon={<LineChartOutlined />}>
-					<NavLink
-						to={ROUTES.USAGE_EXPLORER}
-						style={{ fontSize: 12, textDecoration: 'none' }}
-					>
-						Usage Explorer
-					</NavLink>
-				</Menu.Item>
-				<Menu.Item key={ROUTES.SETTINGS} icon={<SettingOutlined />}>
-					<NavLink
-						to={ROUTES.SETTINGS}
-						style={{ fontSize: 12, textDecoration: 'none' }}
-					>
-						Settings
-					</NavLink>
-				</Menu.Item>
-				<Menu.Item key={ROUTES.INSTRUMENTATION} icon={<ApiOutlined />}>
-					<NavLink
-						to={ROUTES.INSTRUMENTATION}
-						style={{ fontSize: 12, textDecoration: 'none' }}
-					>
-						Add instrumentation
-					</NavLink>
-				</Menu.Item>
-			</Menu>
-		</Sider>
-	);
-};
-
-export default SideNav;