added sidebar, switched to hash router

frontend/src/app.tsx

 import { MantineProvider } from "@mantine/core";
 import { QueryClientProvider, QueryClient } from "react-query";
-import { BrowserRouter } from "react-router-dom";
+import { HashRouter } from "react-router-dom";
 import axios from "axios";
 
 import { AuthProvider } from "context/auth/auth-provider";
@@ -13,7 +13,7 @@ axios.defaults.withCredentials = true;
 
 export const App = () => {
   return (
-    <BrowserRouter
+    <HashRouter
       basename={process.env.NODE_ENV === "development" ? undefined : "/pa165"}
     >
       <MantineProvider>
@@ -27,6 +27,6 @@ export const App = () => {
           </NotificationProvider>
         </QueryClientProvider>
       </MantineProvider>
-    </BrowserRouter>
+    </HashRouter>
   );
 };

frontend/src/components/header/header.tsx

-import { useCallback, useMemo, useState } from "react";
-import { Coin, Menu2, Logout } from "tabler-icons-react";
+import { useMemo } from "react";
+import { Coin, Logout } from "tabler-icons-react";
 import {
-  ActionIcon,
   Avatar,
   Button,
   Center,
-  Drawer,
   Grid,
   Group,
   Paper,
@@ -14,11 +12,8 @@ import {
 
 import { useAuth } from "context/auth/auth-context";
 
-import { Navigation } from "./navigation";
-
 export const Header = () => {
   const { user, logout, isLoggedIn } = useAuth();
-  const [isOpen, setIsOpen] = useState(false);
 
   const initials = useMemo(() => {
     const parts = user?.name.trim().split(" ");
@@ -32,17 +27,10 @@ export const Header = () => {
     return result ?? "UN";
   }, [user?.name]);
 
-  const openDrawer = useCallback(() => setIsOpen(true), []);
-  const closeDrawer = useCallback(() => setIsOpen(false), []);
-
   return (
     <Paper shadow="sm" sx={{ padding: "0.5rem" }}>
       <Grid align="center">
-        <Grid.Col xs={6} md={4}>
-          <ActionIcon onClick={openDrawer}>
-            <Menu2 />
-          </ActionIcon>
-        </Grid.Col>
+        <Grid.Col xs={6} md={4} />
         <Grid.Col
           xs={4}
           sx={(theme) => ({
@@ -72,19 +60,6 @@ export const Header = () => {
           </Group>
         </Grid.Col>
       </Grid>
-      <Drawer
-        opened={isOpen}
-        onClose={closeDrawer}
-        title={
-          <Text size="md" weight="bold">
-            Navigation
-          </Text>
-        }
-        size="lg"
-        padding="md"
-      >
-        <Navigation onClick={closeDrawer} />
-      </Drawer>
     </Paper>
   );
 };

frontend/src/components/header/navigation.tsx → frontend/src/components/sidebar/sidebar.tsx

 import { ReactNode } from "react";
 import { Link } from "react-router-dom";
-import { Stack, Button } from "@mantine/core";
+import { Stack, Button, Paper, Sx } from "@mantine/core";
+
 import {
   BuildingStore,
   CalendarEvent,
   Home,
   Location,
+  Login,
+  UserPlus,
 } from "tabler-icons-react";
+import { User } from "models";
+
 import { useAuth } from "../../context/auth/auth-context";
 
 type NavItem = {
   label: string;
   to: string;
   icon: ReactNode;
-  showPermission: string;
+  show?: ((user?: User) => boolean) | boolean;
+  sx?: Sx;
 };
 
 const navItems: NavItem[] = [
@@ -21,25 +27,36 @@ const navItems: NavItem[] = [
     label: "Home",
     to: "/",
     icon: <Home />,
-    showPermission: "ALL",
   },
   {
     label: "Events",
     to: "/events",
     icon: <CalendarEvent />,
-    showPermission: "ALL",
   },
   {
     label: "Locations",
     to: "/locations",
     icon: <Location />,
-    showPermission: "MANAGER",
+    show: (user) => user?.userRole === "MANAGER",
   },
   {
     label: "My reservations",
     to: "/my-reservations",
     icon: <BuildingStore />,
-    showPermission: "SELLER",
+    show: (user) => user?.userRole === "SELLER",
+  },
+  {
+    label: "Login",
+    to: "/login",
+    icon: <Login />,
+    show: (user) => !user,
+    sx: { marginTop: "auto" },
+  },
+  {
+    label: "Register",
+    to: "/register",
+    icon: <UserPlus />,
+    show: (user) => !user,
   },
 ];
 
@@ -47,31 +64,38 @@ interface Props {
   onClick?: () => void;
 }
 
-export const Navigation = ({ onClick }: Props) => {
+export const Sidebar = ({ onClick }: Props) => {
   const { user } = useAuth();
 
-  const showPermission = user ? user.userRole : "ALL";
-
   return (
-    <Stack spacing={5}>
-      {navItems
-        .filter(
-          (item) =>
-            item.showPermission === showPermission ||
-            item.showPermission === "ALL"
-        )
-        .map(({ icon, label, to }) => (
-          <Button
-            variant="subtle"
-            leftIcon={icon}
-            key={to}
-            component={Link}
-            to={to}
-            onClick={onClick}
-          >
-            {label}
-          </Button>
-        ))}
-    </Stack>
+    <Paper
+      withBorder
+      sx={{
+        flexGrow: 1,
+        minWidth: 250,
+        maxWidth: 350,
+        position: "relative",
+        padding: "1rem",
+      }}
+    >
+      <Stack spacing={5} sx={{ position: "sticky", top: "1rem" }}>
+        {navItems.map(
+          ({ icon, label, to, show = true, sx }) =>
+            (show instanceof Function ? show?.(user) : show) && (
+              <Button
+                variant="subtle"
+                leftIcon={icon}
+                key={to}
+                component={Link}
+                to={to}
+                onClick={onClick}
+                sx={sx}
+              >
+                {label}
+              </Button>
+            )
+        )}
+      </Stack>
+    </Paper>
   );
 };

frontend/src/modules/app-routes.tsx

@@ -5,6 +5,7 @@ import { Header } from "components/header/header";
 import { useAuth } from "context/auth/auth-context";
 import { ProtectedRoute } from "components/protected-route/protected-route";
 import { EntryRoute } from "components/entry-route/entry-route";
+import { Sidebar } from "components/sidebar/sidebar";
 
 import { Home } from "./home/home";
 import { StandReservation } from "./stand-reservation/stand-reservation";
@@ -28,30 +29,37 @@ export const AppRoutes = () => {
         sx={(theme) => ({
           flexGrow: 1,
           backgroundColor: theme.fn.rgba(theme.colors.dark[1], 0.1),
+          display: "flex",
         })}
       >
-        {isFetchedAfterMount && (
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route element={<EntryRoute />}>
-              <Route path="/login" element={<Login />} />
-              <Route path="/register" element={<Register />} />
-            </Route>
-            <Route path="/events" element={<Events />} />
-            <Route path="/events/create" element={<CreateUpdateEvent />} />
-            <Route path="/events/:id/edit" element={<CreateUpdateEvent />} />
-            <Route element={<ProtectedRoute />}>
-              <Route path="/locations" element={<Locations />} />
-              <Route path="/stands/list/events/:id" element={<EventStands />} />
-            </Route>
-            <Route path="*" element={<NotFound />} />
-            <Route
-              path="/stand-reservation/:id"
-              element={<StandReservation />}
-            />
-            <Route path="/my-reservations" element={<UserReservations />} />
-          </Routes>
-        )}
+        <Sidebar />
+        <Box sx={{ flexGrow: 1 }}>
+          {isFetchedAfterMount && (
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route element={<EntryRoute />}>
+                <Route path="/login" element={<Login />} />
+                <Route path="/register" element={<Register />} />
+              </Route>
+              <Route path="/events" element={<Events />} />
+              <Route path="/events/create" element={<CreateUpdateEvent />} />
+              <Route path="/events/:id/edit" element={<CreateUpdateEvent />} />
+              <Route element={<ProtectedRoute />}>
+                <Route path="/locations" element={<Locations />} />
+                <Route
+                  path="/stands/list/events/:id"
+                  element={<EventStands />}
+                />
+              </Route>
+              <Route path="*" element={<NotFound />} />
+              <Route
+                path="/stand-reservation/:id"
+                element={<StandReservation />}
+              />
+              <Route path="/my-reservations" element={<UserReservations />} />
+            </Routes>
+          )}
+        </Box>
       </Box>
     </Box>
   );