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

frontend-2 #49

Merged
Ghost merged 25 commits from frontend-2 into main 2024-01-13 16:41:29 +00:00
Conversation 0 Commits 25 Files Changed 2 +33 -33
2 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
pkgs/ui/src/app/layout.tsx
View File

@@ -11,7 +11,6 @@ import {
import { StyledEngineProvider } from "@mui/material/styles";
import axios from "axios";
import localFont from "next/font/local";
import Image from "next/image";
import * as React from "react";
import { Toaster } from "react-hot-toast";
import "./globals.css";
@@ -76,25 +75,15 @@ export default function RootLayout({
!showSidebarDerived && translate
} flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
>
<div className="static top-0 mb-2 py-2">
<div className="grid grid-cols-3">
<div className="col-span-1">
<IconButton
hidden={true}
onClick={() => setShowSidebar((c) => !c)}
>
{!showSidebar && <MenuIcon />}
</IconButton>
</div>
<div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
<Image
src="/tub-favicon.png"
alt="TU Berlin Logo"
width={58}
height={58}
priority
/>
</div>
<div className="grid grid-cols-3">
<div className="col-span-1">
<IconButton
style={{ padding: "12px" }}
hidden={true}
onClick={() => setShowSidebar((c) => !c)}
>
{!showSidebar && <MenuIcon />}
</IconButton>
</div>
</div>

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

@@ -6,6 +6,7 @@ import {
ListItemButton,
ListItemIcon,
ListItemText,
useMediaQuery,
} from "@mui/material";
import Image from "next/image";
import React, { ReactNode } from "react";
@@ -88,14 +89,24 @@ export function Sidebar(props: SidebarProps) {
);
const [collapseMenuOpen, setCollapseMenuOpen] = React.useState(true);
const handleCollapseClick = () => {
setCollapseMenuOpen(!collapseMenuOpen);
};
const isSmallerScreen = useMediaQuery("(max-width: 1025px)");
const handleMenuItemClick = (path: string) => {
setActiveMenuItem(path);
};
const handleCollapseClick = () => {
setCollapseMenuOpen(!collapseMenuOpen);
};
React.useEffect(() => {
if (isSmallerScreen) {
setCollapseMenuOpen(false);
} else {
setCollapseMenuOpen(true);
}
}, [isSmallerScreen]);
return (
<aside
style={{ backgroundColor: "#00497c" }}
@@ -113,16 +124,16 @@ export function Sidebar(props: SidebarProps) {
priority
/>
</div>
<div className="lg:absolute lg:right-0 lg:top-0">
<IconButton size="large" className="text-white" onClick={onClose}>
<ChevronLeftIcon fontSize="inherit" />
</IconButton>
</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) => {
@@ -165,7 +176,7 @@ export function Sidebar(props: SidebarProps) {
>
<ListItemIcon
color="inherit"
className="justify-center overflow-hidden text-white lg:justify-normal"
className="overflow-hidden text-white lg:justify-normal"
>
{menuEntry.icon}
</ListItemIcon>
@@ -174,12 +185,12 @@ export function Sidebar(props: SidebarProps) {
primaryTypographyProps={{
color: "inherit",
}}
className="hidden lg:block"
className="mr-4 hidden lg:block"
/>
{collapseMenuOpen ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse
in={collapseMenuOpen}
in={collapseMenuOpen && show}
timeout="auto"
unmountOnExit
>
@@ -188,7 +199,7 @@ export function Sidebar(props: SidebarProps) {
<ListItemButton
key={idx}
sx={{ pl: 4 }}
className="justify-center lg:justify-normal"
className="lg:justify-normal"
LinkComponent={Link}
href={menuEntry.to}
disabled={menuEntry.disabled}
@@ -197,7 +208,7 @@ export function Sidebar(props: SidebarProps) {
>
<ListItemIcon
color="inherit"
className="justify-center overflow-hidden text-white lg:justify-normal"
className="overflow-hidden text-white lg:justify-normal"
>
{menuEntry.icon}
</ListItemIcon>