From 8746b0ba6501aaa432f0c16df883894567bd5d9f Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Tue, 21 Nov 2023 17:56:43 +0100
Subject: [PATCH] Orun changes - added router pages for DLG and AP

---
 pkgs/ui/src/app/access-point/page.tsx         |  9 +++
 .../app/distributed-ledger-gateway/page.tsx   |  9 +++
 pkgs/ui/src/components/sidebar/index.tsx      | 58 +++++++++++++++----
 3 files changed, 64 insertions(+), 12 deletions(-)
 create mode 100644 pkgs/ui/src/app/access-point/page.tsx
 create mode 100644 pkgs/ui/src/app/distributed-ledger-gateway/page.tsx

diff --git a/pkgs/ui/src/app/access-point/page.tsx b/pkgs/ui/src/app/access-point/page.tsx
new file mode 100644
index 0000000..c2fea8a
--- /dev/null
+++ b/pkgs/ui/src/app/access-point/page.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+export default function AccessPoint() {
+  return (
+    <div>
+      Access Point Page
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
new file mode 100644
index 0000000..93da773
--- /dev/null
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+export default function DLG() {
+  return (
+    <div>
+      DLG Page
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx
index c75bfa2..b862b89 100644
--- a/pkgs/ui/src/components/sidebar/index.tsx
+++ b/pkgs/ui/src/components/sidebar/index.tsx
@@ -8,13 +8,16 @@ import {
   ListItemText,
 } from "@mui/material";
 import Image from "next/image";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
 import { tw } from "@/utils/tailwind";
-import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
 import Link from "next/link";
-import WysiwygIcon from "@mui/icons-material/Wysiwyg";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import HomeIcon from '@mui/icons-material/Home';
+import HubIcon from '@mui/icons-material/Hub';
+import PersonIcon from '@mui/icons-material/Person';
+import RouterIcon from '@mui/icons-material/Router';
+import StorageIcon from '@mui/icons-material/Storage';
 
 type MenuEntry = {
   icon: ReactNode;
@@ -27,17 +30,41 @@ type MenuEntry = {
 
 const menuEntries: MenuEntry[] = [
   {
-    icon: <AssignmentIndIcon />,
-    label: "Freelance",
+    icon: <HomeIcon />,
+    label: "Home",
     to: "/",
     disabled: false,
   },
   {
-    icon: <WysiwygIcon />,
-    label: "Blog",
-    to: "/blog",
+    icon: <HubIcon />,
+    label: "Entities",
+    to: "/entities",
     disabled: true,
   },
+  {
+    icon: <PersonIcon />,
+    label: "C1",
+    to: "/client-1",
+    disabled: false,
+  },
+  {
+    icon: <PersonIcon />,
+    label: "C2",
+    to: "/client-2",
+    disabled: false,
+  },
+  {
+    icon: <RouterIcon />,
+    label: "AP",
+    to: "/access-point",
+    disabled: false,
+  },
+  {
+    icon: <StorageIcon />,
+    label: "DLG",
+    to: "/distributed-ledger-gateway",
+    disabled: false,
+  }
 ];
 
 const hideSidebar = tw`-translate-x-14 lg:-translate-x-64`;
@@ -50,17 +77,22 @@ interface SidebarProps {
 export function Sidebar(props: SidebarProps) {
   const { show, onClose } = props;
 
+  const [activeMenuItem, setActiveMenuItem] = React.useState('/');
+
+  const handleMenuItemClick = (path: string) => {
+    setActiveMenuItem(path);
+  };
+
   return (
     <aside
-      className={tw`${
-        show ? showSidebar : hideSidebar
-      } z-9999 static left-0  top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`}
+      className={tw`${show ? showSidebar : hideSidebar
+        } z-9999 static left-0  top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`}
     >
       <div className="flex items-center justify-between gap-2 overflow-hidden px-0 py-5 lg:p-6">
         <div className="mt-8 hidden w-full text-center font-semibold text-white lg:block">
           <Image
             src="/logo.png"
-            alt="Clan Logo"
+            alt="TUB Logo"
             width={75}
             height={75}
             priority
@@ -90,6 +122,8 @@ export function Sidebar(props: SidebarProps) {
                   LinkComponent={Link}
                   href={menuEntry.to}
                   disabled={menuEntry.disabled}
+                  selected={activeMenuItem === menuEntry.to}
+                  onClick={() => handleMenuItemClick(menuEntry.to)}
                 >
                   <ListItemIcon
                     color="inherit"