pkgs/ui/src/components/sidebar/index.tsx

@@ -8,9 +8,10 @@ import {
     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,6 +19,8 @@ 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;
@@ -28,39 +31,42 @@ type MenuEntry = {
     subMenuEntries?: MenuEntry[];
 };
 
-const menuEntries: MenuEntry[] = [
+const menuEntityEntries: MenuEntry[] = [
     {
-    icon: <HomeIcon />,
+        icon: <PersonIcon/>,
-    label: "Home",
-    to: "/",
-    disabled: false,
-  },
-  {
-    icon: <HubIcon />,
-    label: "Entities",
-    to: "/entities",
-    disabled: true,
-  },
-  {
-    icon: <PersonIcon />,
         label: "C1",
         to: "/client-1",
         disabled: false,
     },
     {
-    icon: <PersonIcon />,
+        icon: <PersonIcon/>,
         label: "C2",
         to: "/client-2",
         disabled: false,
+    }
+];
+
+const menuEntries: MenuEntry[] = [
+    {
+        icon: <HomeIcon/>,
+        label: "Home",
+        to: "/",
+        disabled: false,
     },
     {
-    icon: <RouterIcon />,
+        icon: <HubIcon/>,
+        label: "Entities",
+        to: "/entities",
+        disabled: false,
+    },
+    {
+        icon: <RouterIcon/>,
         label: "AP",
         to: "/access-point",
         disabled: false,
     },
     {
-    icon: <StorageIcon />,
+        icon: <StorageIcon/>,
         label: "DLG",
         to: "/distributed-ledger-gateway",
         disabled: false,
@@ -74,10 +80,15 @@ interface SidebarProps {
     show: boolean;
     onClose: () => void;
 }
-export function Sidebar(props: SidebarProps) {
-  const { show, onClose } = props;
 
+export function Sidebar(props: SidebarProps) {
+    const {show, onClose} = props;
     const [activeMenuItem, setActiveMenuItem] = React.useState("/");
+    const [collapseMenuOpen, setCollapseMenuOpen] = React.useState(true);
+
+    const handleCollapseClick = () => {
+        setCollapseMenuOpen(!collapseMenuOpen);
+    };
 
     const handleMenuItemClick = (path: string) => {
         setActiveMenuItem(path);
@@ -85,7 +96,7 @@ export function Sidebar(props: SidebarProps) {
 
     return (
         <aside
-      style={{ backgroundColor: "#00497c" }}
+            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`}
@@ -107,7 +118,7 @@ export function Sidebar(props: SidebarProps) {
             />
             <div className="flex w-full justify-center">
                 <IconButton size="large" className="text-white" onClick={onClose}>
-          <ChevronLeftIcon fontSize="inherit" />
+                    <ChevronLeftIcon fontSize="inherit"/>
                 </IconButton>
             </div>
             <div className="flex flex-col overflow-hidden overflow-y-auto">
@@ -119,6 +130,7 @@ export function Sidebar(props: SidebarProps) {
                                 disablePadding
                                 className="!overflow-hidden py-2"
                             >
+                                {menuEntry.label !== "Entities" ?
                                     <ListItemButton
                                         className="justify-center lg:justify-normal"
                                         LinkComponent={Link}
@@ -141,6 +153,58 @@ export function Sidebar(props: SidebarProps) {
                                             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>
                         );
                     })}