From 21e71c4ec2b1598180cfb7ae881cbd71e4d07a49 Mon Sep 17 00:00:00 2001
From: Onur Arslan <runoxa@hotmail.com>
Date: Thu, 23 Nov 2023 21:36:13 +0100
Subject: [PATCH] [Layout] Modify the Entities to be in a collapsible submenu -
 implemented collapsible submenu for Entities

---
 pkgs/ui/src/components/sidebar/index.tsx | 308 ++++++++++++++---------
 1 file changed, 186 insertions(+), 122 deletions(-)

diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx
index 50eaf33..fd1cf76 100644
--- a/pkgs/ui/src/components/sidebar/index.tsx
+++ b/pkgs/ui/src/components/sidebar/index.tsx
@@ -1,16 +1,17 @@
 import {
-  Divider,
-  IconButton,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
+    Divider,
+    IconButton,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
 } from "@mui/material";
 import Image from "next/image";
-import React, { ReactNode } from "react";
+import React, {ReactNode} from "react";
 
-import { tw } from "@/utils/tailwind";
+import {tw} from "@/utils/tailwind";
+import Collapse from '@mui/material/Collapse';
 import Link from "next/link";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import HomeIcon from "@mui/icons-material/Home";
@@ -18,134 +19,197 @@ 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";
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 
 type MenuEntry = {
-  icon: ReactNode;
-  label: string;
-  to: string;
-  disabled: boolean;
+    icon: ReactNode;
+    label: string;
+    to: string;
+    disabled: boolean;
 } & {
-  subMenuEntries?: MenuEntry[];
+    subMenuEntries?: MenuEntry[];
 };
 
+const menuEntityEntries: MenuEntry[] = [
+    {
+        icon: <PersonIcon/>,
+        label: "C1",
+        to: "/client-1",
+        disabled: false,
+    },
+    {
+        icon: <PersonIcon/>,
+        label: "C2",
+        to: "/client-2",
+        disabled: false,
+    }
+];
+
 const menuEntries: MenuEntry[] = [
-  {
-    icon: <HomeIcon />,
-    label: "Home",
-    to: "/",
-    disabled: false,
-  },
-  {
-    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,
-  },
+    {
+        icon: <HomeIcon/>,
+        label: "Home",
+        to: "/",
+        disabled: false,
+    },
+    {
+        icon: <HubIcon/>,
+        label: "Entities",
+        to: "/entities",
+        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`;
 const showSidebar = tw`lg:translate-x-0`;
 
 interface SidebarProps {
-  show: boolean;
-  onClose: () => void;
+    show: boolean;
+    onClose: () => void;
 }
+
 export function Sidebar(props: SidebarProps) {
-  const { show, onClose } = props;
+    const {show, onClose} = props;
+    const [activeMenuItem, setActiveMenuItem] = React.useState("/");
+    const [collapseMenuOpen, setCollapseMenuOpen] = React.useState(true);
 
-  const [activeMenuItem, setActiveMenuItem] = React.useState("/");
+    const handleCollapseClick = () => {
+        setCollapseMenuOpen(!collapseMenuOpen);
+    };
 
-  const handleMenuItemClick = (path: string) => {
-    setActiveMenuItem(path);
-  };
+    const handleMenuItemClick = (path: string) => {
+        setActiveMenuItem(path);
+    };
 
-  return (
-    <aside
-      style={{ backgroundColor: "#00497c" }}
-      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="TUB Logo"
-            width={75}
-            height={75}
-            priority
-          />
-        </div>
-      </div>
-      <Divider
-        flexItem
-        className="mx-8 mb-4 mt-9 hidden bg-neutral-40 lg:block"
-      />
-      <div className="flex w-full justify-center">
-        <IconButton size="large" className="text-white" onClick={onClose}>
-          <ChevronLeftIcon fontSize="inherit" />
-        </IconButton>
-      </div>
-      <div className="flex flex-col overflow-hidden overflow-y-auto">
-        <List className="mb-14 px-0 pb-4 text-white lg:mt-1 lg:px-4">
-          {menuEntries.map((menuEntry, idx) => {
-            return (
-              <ListItem
-                key={idx}
-                disablePadding
-                className="!overflow-hidden py-2"
-              >
-                <ListItemButton
-                  className="justify-center lg:justify-normal"
-                  LinkComponent={Link}
-                  href={menuEntry.to}
-                  disabled={menuEntry.disabled}
-                  selected={activeMenuItem === menuEntry.to}
-                  onClick={() => handleMenuItemClick(menuEntry.to)}
-                >
-                  <ListItemIcon
-                    color="inherit"
-                    className="justify-center overflow-hidden text-white lg:justify-normal"
-                  >
-                    {menuEntry.icon}
-                  </ListItemIcon>
-                  <ListItemText
-                    primary={menuEntry.label}
-                    primaryTypographyProps={{
-                      color: "inherit",
-                    }}
-                    className="hidden lg:block"
-                  />
-                </ListItemButton>
-              </ListItem>
-            );
-          })}
-        </List>
-      </div>
-    </aside>
-  );
+    return (
+        <aside
+            style={{backgroundColor: "#00497c"}}
+            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="TUB Logo"
+                        width={75}
+                        height={75}
+                        priority
+                    />
+                </div>
+            </div>
+            <Divider
+                flexItem
+                className="mx-8 mb-4 mt-9 hidden bg-neutral-40 lg:block"
+            />
+            <div className="flex w-full justify-center">
+                <IconButton size="large" className="text-white" onClick={onClose}>
+                    <ChevronLeftIcon fontSize="inherit"/>
+                </IconButton>
+            </div>
+            <div className="flex flex-col overflow-hidden overflow-y-auto">
+                <List className="mb-14 px-0 pb-4 text-white lg:mt-1 lg:px-4">
+                    {menuEntries.map((menuEntry, idx) => {
+                        return (
+                            <ListItem
+                                key={idx}
+                                disablePadding
+                                className="!overflow-hidden py-2"
+                            >
+                                {menuEntry.label !== "Entities" ?
+                                    <ListItemButton
+                                        className="justify-center lg:justify-normal"
+                                        LinkComponent={Link}
+                                        href={menuEntry.to}
+                                        disabled={menuEntry.disabled}
+                                        selected={activeMenuItem === menuEntry.to}
+                                        onClick={() => handleMenuItemClick(menuEntry.to)}
+                                    >
+                                        <ListItemIcon
+                                            color="inherit"
+                                            className="justify-center overflow-hidden text-white lg:justify-normal"
+                                        >
+                                            {menuEntry.icon}
+                                        </ListItemIcon>
+                                        <ListItemText
+                                            primary={menuEntry.label}
+                                            primaryTypographyProps={{
+                                                color: "inherit",
+                                            }}
+                                            className="hidden lg:block"
+                                        />
+                                    </ListItemButton>
+                                    :
+                                    <div>
+                                        <ListItemButton
+                                            className="justify-center lg:justify-normal"
+                                            disabled={menuEntry.disabled}
+                                            selected={activeMenuItem === menuEntry.to}
+                                            onClick={handleCollapseClick}>
+                                            <ListItemIcon
+                                                color="inherit"
+                                                className="justify-center overflow-hidden text-white lg:justify-normal"
+                                            >
+                                                {menuEntry.icon}
+                                            </ListItemIcon>
+                                            <ListItemText
+                                                primary={menuEntry.label}
+                                                primaryTypographyProps={{
+                                                    color: "inherit",
+                                                }}
+                                                className="hidden lg:block"
+                                            />
+                                            {collapseMenuOpen ? <ExpandLess/> : <ExpandMore/>}
+                                        </ListItemButton>
+                                        <Collapse in={collapseMenuOpen} timeout="auto" unmountOnExit>
+                                            <List component="div" disablePadding>
+                                                {menuEntityEntries.map((menuEntry, idx) => (
+                                                    <ListItemButton key={idx} sx={{pl: 4}}
+                                                                    className="justify-center lg:justify-normal"
+                                                                    LinkComponent={Link}
+                                                                    href={menuEntry.to}
+                                                                    disabled={menuEntry.disabled}
+                                                                    selected={activeMenuItem === menuEntry.to}
+                                                                    onClick={() => handleMenuItemClick(menuEntry.to)}
+                                                    >
+                                                        <ListItemIcon
+                                                            color="inherit"
+                                                            className="justify-center overflow-hidden text-white lg:justify-normal"
+                                                        >
+                                                            {menuEntry.icon}
+                                                        </ListItemIcon>
+                                                        <ListItemText
+                                                            primary={menuEntry.label}
+                                                            primaryTypographyProps={{
+                                                                color: "inherit",
+                                                            }}
+                                                            className="hidden lg:block"
+                                                        />
+                                                    </ListItemButton>
+                                                ))}
+                                            </List>
+                                        </Collapse>
+                                    </div>
+                                }
+                            </ListItem>
+                        );
+                    })}
+                </List>
+            </div>
+        </aside>
+    );
 }