Added Topbar Header every page

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

@@ -91,7 +91,7 @@ const Sidebar = () => {
         {/* Navigations */}
         <div className={styles.navContainer}>
           <div
-            className={pathname === "/home" ? `${styles.active}` : ""}
+            className={`${styles.nav} ${pathname === "/home" ? styles.active : ""}`}
             onClick={navToHome}
           >
             <svg
@@ -126,7 +126,7 @@ const Sidebar = () => {
             <p>Home</p>
           </div>
           <div
-            className={pathname === "/organization" ? `${styles.active}` : ""}
+            className={`${styles.nav} ${pathname === "/organization" ? styles.active : ""}`}
             onClick={navToOrganization}
           >
             <svg
@@ -147,8 +147,8 @@ const Sidebar = () => {
             <p>Organization</p>
           </div>
           <div
-            className={pathname === "/projects" ? `${styles.active}` : ""}
             onClick={navToProject}
+            className={`${styles.nav} ${pathname === "/projects" ? styles.active : ""}`}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -168,8 +168,8 @@ const Sidebar = () => {
             <p>Project</p>
           </div>
           <div
-            className={pathname === "/users" ? `${styles.active}` : ""}
             onClick={navToUsers}
+            className={`${styles.nav} ${pathname === "/users" ? styles.active : ""}`}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -189,8 +189,8 @@ const Sidebar = () => {
             <p>Users</p>
           </div>
           <div
-            className={pathname === "/roles" ? `${styles.active}` : ""}
             onClick={navToRoles}
+            className={`${styles.nav} ${pathname === "/roles" ? styles.active : ""}`}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -239,8 +239,8 @@ const Sidebar = () => {
             <p>Roles</p>
           </div>
           <div
-            className={pathname === "/credentials" ? `${styles.active}` : ""}
             onClick={navToCredentials}
+            className={`${styles.nav} ${pathname === "/credentials" ? styles.active : ""}`}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -260,8 +260,8 @@ const Sidebar = () => {
             <p>Credentials</p>
           </div>
           <div
-            className={pathname === "/agents" ? `${styles.active}` : ""}
             onClick={navToAgents}
+            className={`${styles.nav} ${pathname === "/agents" ? styles.active : ""}`}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"

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

@@ -79,7 +79,7 @@
   align-items: flex-start;
   align-self: stretch;
 }
-.navContainer > div {
+.nav {
   display: flex;
   padding: 16px 24px;
   align-items: center;
@@ -90,22 +90,16 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+  border-left: 2px solid #959aff00;
   align-self: stretch;
 }
-
-.navContainer > div:hover {
+.nav:hover {
   background: rgba(149, 154, 255, 0.05);
 }
-.navContainer > div path {
+.nav path {
   stroke: #858699;
 }
-.navContainer > div:hover path {
-  stroke: #d2d3e0;
-}
-.navContainer > div path {
-  stroke: #858699;
-}
-.navContainer > div:hover path {
+.nav:hover path {
   stroke: #d2d3e0;
 }
 .active {
@@ -118,7 +112,10 @@
   font-weight: 400;
   line-height: normal;
 }
-.active svg path {
+.active:hover path {
+  stroke: #969af9;
+}
+.active path {
   stroke: #969af9;
 }
 .navFooterContainer {