feat: left sidebar active menu should be marked (#228)

* feat: left sidebar active menu should be marked * refactor: avoid repeated code --------- Co-authored-by: Ido David <21335259+idodav@users.noreply.github.com>
shravan20 · Oct 7, 2023 · 4f15c72 · 4f15c72
1 parent 7d784ee
commit 4f15c72
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 100 deletions.
diff --git a/Readme.md b/Readme.md
@@ -25,7 +25,6 @@ Integration to Postman.
 Automatic CLI generation for your api with real data.
 Request mocking.
 
-
 ## 🔖 Features
 
 |   **Feature Name**    | **Available** |
@@ -44,8 +43,8 @@ Request mocking.
 |  ChatGPT integration  |               |
 |    Share requests     |               |
 
-
 ## 🛠 Tech Stack
+
 - [Sharkio tech stack](https://github.com/sharkio-dev/sharkio/blob/main/stack.md)
 
 ## 🛠️ How to use
@@ -140,6 +139,7 @@ Run backend/frontend only:
 - Found a bug? 🐛 please open an issue.
 
 ## 🤝 Acknowledgement
+
 - [Readme generator - readme.so](https://readme.so)
 
 ## 🏆 Contributors

diff --git a/client/src/components/sidebar/sidebar.tsx b/client/src/components/sidebar/sidebar.tsx
@@ -9,20 +9,54 @@ import {
 import ApiIcon from "@mui/icons-material/Api";
 import DataObjectIcon from "@mui/icons-material/DataObject";
 import SettingsInputComponentIcon from "@mui/icons-material/SettingsInputComponent";
-import {
-  IconButton,
-  List,
-  ListItem,
-  ListItemButton,
-  Paper,
-  Typography,
-} from "@mui/material";
+import { IconButton, List, ListItemButton, Paper } from "@mui/material";
 import c from "classnames";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import styles from "./sidebar.module.scss";
 import { routes } from "../../constants/routes";
 
+const Logo: React.FC<{ minimized: boolean }> = ({ minimized }) => {
+  return (
+    <div
+      className={c({
+        [styles.sharkioContainer]: true,
+      })}
+    >
+      <div className={styles.logo}>
+        <a href="/home">
+          <img src="shark-logo.png" alt="Logo" />
+        </a>
+      </div>
+      {!minimized && <div className={styles.logoText}>𝐒𝐡𝐚𝐫𝐤𝐢𝐨</div>}
+    </div>
+  );
+};
+
+const Toggle: React.FC<{
+  minimized: boolean;
+  handleMenuIconClicked: () => void;
+}> = ({ minimized, handleMenuIconClicked }) => {
+  return (
+    <div className={styles.toggleMenu} onClick={handleMenuIconClicked}>
+      <IconButton>{minimized ? <ChevronRight /> : <ChevronLeft />}</IconButton>
+    </div>
+  );
+};
+interface IMenuItem {
+  to: string;
+  title: string;
+  Icon: React.FC;
+}
+const menus: IMenuItem[] = [
+  { to: routes.HOME, title: "Home", Icon: Home },
+  { to: routes.CONFIG, title: "Sniffers", Icon: SettingsInputComponentIcon },
+  { to: routes.REQUESTS, title: "Requests", Icon: SwapHoriz },
+  { to: routes.MOCKS, title: "Mocks", Icon: DataObjectIcon },
+  { to: routes.OPENAPI, title: "OpenAPI", Icon: ApiIcon },
+  { to: routes.COLLECTION, title: "Collections", Icon: FolderCopyOutlined },
+];
+
 export const SideBar: React.FC = () => {
   const navigate = useNavigate();
   const [minimized, setMinimized] = useState(false);
@@ -39,97 +73,32 @@ export const SideBar: React.FC = () => {
       })}
     >
       <Paper className={styles.paper} elevation={8}>
-        <div
-          className={c({
-            [styles.sharkioContainer]: true,
-          })}
-        >
-          <div className={styles.logo}>
-            <a href="/home">
-              <img src="shark-logo.png" alt="Logo" />
-            </a>
-          </div>
-          {!minimized && <div className={styles.logoText}>𝐒𝐡𝐚𝐫𝐤𝐢𝐨</div>}
-        </div>
+        <Logo minimized={minimized} />
 
         <List>
-          <div className={styles.toggleMenu} onClick={handleMenuIconClicked}>
-            <IconButton>
-              {minimized ? <ChevronRight /> : <ChevronLeft />}
-            </IconButton>
-          </div>
-          <ListItemButton
-            onClick={() => {
-              navigate("/home");
-            }}
-            className={c({
-              [styles.listItem]: true,
-              [styles.listItemMinimized]: minimized,
-            })}
-          >
-            <Home />
-            {!minimized && <>Home</>}
-          </ListItemButton>
-          <ListItemButton
-            className={c({
-              [styles.listItem]: true,
-              [styles.listItemMinimized]: minimized,
-            })}
-            onClick={() => {
-              navigate("/config");
-            }}
-          >
-            <SettingsInputComponentIcon />
-            {!minimized && <>Services</>}
-          </ListItemButton>
-          <ListItemButton
-            className={c({
-              [styles.listItem]: true,
-              [styles.listItemMinimized]: minimized,
-            })}
-            onClick={() => {
-              navigate("/requests");
-            }}
-          >
-            <SwapHoriz />
-            {!minimized && <>Requests</>}
-          </ListItemButton>
-          <ListItemButton
-            className={c({
-              [styles.listItem]: true,
-              [styles.listItemMinimized]: minimized,
-            })}
-            onClick={() => {
-              navigate("/mocks");
-            }}
-          >
-            <DataObjectIcon />
-            {!minimized && <>Mocks</>}
-          </ListItemButton>
-          <ListItemButton
-            className={c({
-              [styles.listItem]: true,
-              [styles.listItemMinimized]: minimized,
-            })}
-            onClick={() => {
-              navigate("/gen-openapi");
-            }}
-          >
-            <ApiIcon />
-            {!minimized && <>OpenAPI</>}
-          </ListItemButton>
-          <ListItemButton
-            className={c({
-              [styles.listItem]: true,
-              [styles.listItemMinimized]: minimized,
-            })}
-            onClick={() => {
-              navigate(routes.COLLECTION);
-            }}
-          >
-            <FolderCopyOutlined />
-            {!minimized && <>Collections</>}
-          </ListItemButton>
+          <Toggle
+            minimized={minimized}
+            handleMenuIconClicked={handleMenuIconClicked}
+          />
+          {menus.map(({ to, title, Icon }) => (
+            <ListItemButton
+              key={title}
+              onClick={() => {
+                navigate(to);
+              }}
+              selected={
+                to === location.pathname ||
+                (to === "/home" && "/" === location.pathname)
+              }
+              className={c({
+                [styles.listItem]: true,
+                [styles.listItemMinimized]: minimized,
+              })}
+            >
+              <Icon />
+              {!minimized && <>{title}</>}
+            </ListItemButton>
+          ))}
         </List>
       </Paper>
     </div>

diff --git a/stack.md b/stack.md
@@ -1,6 +1,7 @@
 ## 🛠 Tech Stack
 
 - **General:**
+
   - Node.js: Serves as the runtime environment for the backend services. It allows the Sharkio project to execute JavaScript server-side, enabling functionalities like proxying requests, data processing, and more.
 
   - TypeScript: Enhances the codebase with static typing. This ensures better code quality, easier debugging, and improved developer experience within the Sharkio project.
@@ -12,6 +13,7 @@
   - Nodemon: Used during development to automatically restart the server whenever code changes are detected. This speeds up the development process by providing instant feedback.
 
 - **Traffic Dashboard (Frontend):**
+
   - React: Powers the user interface of the Traffic Dashboard, allowing users to interactively view and analyze the traffic data captured by Sharkio.
 
   - Vite: Speeds up the development and build process for the frontend, ensuring fast reloads and optimized production builds.
@@ -29,6 +31,7 @@
   - Supabase: Might be used for user authentication and data storage for the dashboard, ensuring secure access and persistent data.
 
 - **Traffic Sniffer (Backend):**
+
   - Express: Serves as the backbone of the backend services, handling incoming requests, routing, and delivering responses.
 
   - CORS: Ensures that the backend services can securely handle requests from different origins, especially important for a tool like Sharkio that might be dealing with various APIs.
@@ -40,4 +43,3 @@
   - Winston: Provides logging capabilities, ensuring that all events, errors, and significant actions within the backend are properly recorded.
 
   - Zod: Validates and parses incoming data, ensuring that the backend processes only valid and expected data formats.
-