Added navigations pages

frontend/src/app/components/sidebar/Sidebar.jsx

@@ -1,6 +1,35 @@
+"use client";
 import React from "react";
 import styles from "./styles.module.css";
+
+import { usePathname, useRouter } from "next/navigation";
+
 const Sidebar = () => {
+  const router = useRouter();
+  const navToHome = () => {
+    router.push("/home");
+  };
+  const navToOrganization = () => {
+    router.push("/organization");
+  };
+  const navToProject = () => {
+    router.push("/projects");
+  };
+  const navToUsers = () => {
+    router.push("/users");
+  };
+  const navToRoles = () => {
+    router.push("/roles");
+  };
+  const navToCredentials = () => {
+    router.push("/credentials");
+  };
+  const navToAgents = () => {
+    router.push("/agents");
+  };
+
+  const pathname = usePathname();
+  console.log(pathname);
   return (
     <div className={styles.mainContainer}>
       <div className={styles.topContainer}>
@@ -61,7 +90,10 @@ const Sidebar = () => {
         </div>
         {/* Navigations */}
         <div className={styles.navContainer}>
-          <div className={styles.active}>
+          <div
+            className={pathname === "/home" ? `${styles.active}` : ""}
+            onClick={navToHome}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -93,7 +125,10 @@ const Sidebar = () => {
             </svg>
             <p>Home</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/organization" ? `${styles.active}` : ""}
+            onClick={navToOrganization}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -111,7 +146,10 @@ const Sidebar = () => {
             </svg>
             <p>Organization</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/projects" ? `${styles.active}` : ""}
+            onClick={navToProject}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -129,7 +167,10 @@ const Sidebar = () => {
             </svg>
             <p>Project</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/users" ? `${styles.active}` : ""}
+            onClick={navToUsers}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -147,7 +188,10 @@ const Sidebar = () => {
             </svg>
             <p>Users</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/roles" ? `${styles.active}` : ""}
+            onClick={navToRoles}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -194,7 +238,10 @@ const Sidebar = () => {
             </svg>
             <p>Roles</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/credentials" ? `${styles.active}` : ""}
+            onClick={navToCredentials}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -212,7 +259,10 @@ const Sidebar = () => {
             </svg>
             <p>Credentials</p>
           </div>
-          <div>
+          <div
+            className={pathname === "/agents" ? `${styles.active}` : ""}
+            onClick={navToAgents}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"

frontend/src/app/components/sidebar/styles.module.css

@@ -8,6 +8,7 @@
   height: 100vh;
   align-self: stretch;
   border-right: 1px solid #2c2d3d;
+  user-select: none;
 }
 .topContainer {
   display: flex;