IoSL/service-aware-frontend
3
0
Fork 0
generated from Luis/nextjs-python-web-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Layout] Modify the Entities to be in a collapsible submenu

Browse Source 
- implemented collapsible submenu for Entities
This commit is contained in:
Onur Arslan
2023-11-23 21:36:13 +01:00
parent ba62081f40
commit 21e71c4ec2
1 changed files with 186 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
pkgs/ui/src/components/sidebar/index.tsx
View File

@@ -1,16 +1,17 @@
import { import {
Divider, Divider,
IconButton, IconButton,
List, List,
ListItem, ListItem,
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
} from "@mui/material"; } from "@mui/material";
import Image from "next/image"; 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 Link from "next/link";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import HomeIcon from "@mui/icons-material/Home"; 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 PersonIcon from "@mui/icons-material/Person";
import RouterIcon from "@mui/icons-material/Router"; import RouterIcon from "@mui/icons-material/Router";
import StorageIcon from "@mui/icons-material/Storage"; import StorageIcon from "@mui/icons-material/Storage";
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
type MenuEntry = { type MenuEntry = {
icon: ReactNode; icon: ReactNode;
label: string; label: string;
to: string; to: string;
disabled: boolean; 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[] = [ const menuEntries: MenuEntry[] = [
{ {
icon: <HomeIcon />, icon: <HomeIcon/>,
label: "Home", label: "Home",
to: "/", to: "/",
disabled: false, disabled: false,
}, },
{ {
icon: <HubIcon />, icon: <HubIcon/>,
label: "Entities", label: "Entities",
to: "/entities", to: "/entities",
disabled: true, disabled: false,
}, },
{ {
icon: <PersonIcon />, icon: <RouterIcon/>,
label: "C1", label: "AP",
to: "/client-1", to: "/access-point",
disabled: false, disabled: false,
}, },
{ {
icon: <PersonIcon />, icon: <StorageIcon/>,
label: "C2", label: "DLG",
to: "/client-2", to: "/distributed-ledger-gateway",
disabled: false, 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 hideSidebar = tw`-translate-x-14 lg:-translate-x-64`;
const showSidebar = tw`lg:translate-x-0`; const showSidebar = tw`lg:translate-x-0`;
interface SidebarProps { interface SidebarProps {
show: boolean; show: boolean;
onClose: () => void; onClose: () => void;
} }
export function Sidebar(props: SidebarProps) { 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) => { const handleMenuItemClick = (path: string) => {
setActiveMenuItem(path); setActiveMenuItem(path);
}; };
return ( return (
<aside <aside
style={{ backgroundColor: "#00497c" }} style={{backgroundColor: "#00497c"}}
className={tw`${ className={tw`${
show ? showSidebar : hideSidebar 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`} } 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="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"> <div className="mt-8 hidden w-full text-center font-semibold text-white lg:block">
<Image <Image
src="/logo.png" src="/logo.png"
alt="TUB Logo" alt="TUB Logo"
width={75} width={75}
height={75} height={75}
priority priority
/> />
</div> </div>
</div> </div>
<Divider <Divider
flexItem flexItem
className="mx-8 mb-4 mt-9 hidden bg-neutral-40 lg:block" className="mx-8 mb-4 mt-9 hidden bg-neutral-40 lg:block"
/> />
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
<IconButton size="large" className="text-white" onClick={onClose}> <IconButton size="large" className="text-white" onClick={onClose}>
<ChevronLeftIcon fontSize="inherit" /> <ChevronLeftIcon fontSize="inherit"/>
</IconButton> </IconButton>
</div> </div>
<div className="flex flex-col overflow-hidden overflow-y-auto"> <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"> <List className="mb-14 px-0 pb-4 text-white lg:mt-1 lg:px-4">
{menuEntries.map((menuEntry, idx) => { {menuEntries.map((menuEntry, idx) => {
return ( return (
<ListItem <ListItem
key={idx} key={idx}
disablePadding disablePadding
className="!overflow-hidden py-2" className="!overflow-hidden py-2"
> >
<ListItemButton {menuEntry.label !== "Entities" ?
className="justify-center lg:justify-normal" <ListItemButton
LinkComponent={Link} className="justify-center lg:justify-normal"
href={menuEntry.to} LinkComponent={Link}
disabled={menuEntry.disabled} href={menuEntry.to}
selected={activeMenuItem === menuEntry.to} disabled={menuEntry.disabled}
onClick={() => handleMenuItemClick(menuEntry.to)} selected={activeMenuItem === menuEntry.to}
> onClick={() => handleMenuItemClick(menuEntry.to)}
<ListItemIcon >
color="inherit" <ListItemIcon
className="justify-center overflow-hidden text-white lg:justify-normal" color="inherit"
> className="justify-center overflow-hidden text-white lg:justify-normal"
{menuEntry.icon} >
</ListItemIcon> {menuEntry.icon}
<ListItemText </ListItemIcon>
primary={menuEntry.label} <ListItemText
primaryTypographyProps={{ primary={menuEntry.label}
color: "inherit", primaryTypographyProps={{
}} color: "inherit",
className="hidden lg:block" }}
/> className="hidden lg:block"
</ListItemButton> />
</ListItem> </ListItemButton>
); :
})} <div>
</List> <ListItemButton
</div> className="justify-center lg:justify-normal"
</aside> 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>
);
} }