Merge pull request 'frontend-2' (#49) from frontend-2 into main

Reviewed-on: #49

pkgs/ui/src/app/layout.tsx

@@ -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>
 

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

@@ -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>