added back navigation drawer for mobile

frontend/src/components/header/header.tsx

-import { useMemo } from "react";
-import { Coin, Logout } from "tabler-icons-react";
+import { useCallback, useMemo, useState } from "react";
+import { Coin, Logout, Menu2 } from "tabler-icons-react";
 import {
+  ActionIcon,
   Avatar,
+  Box,
   Button,
   Center,
+  Drawer,
   Grid,
   Group,
   Paper,
@@ -11,9 +14,11 @@ import {
 } from "@mantine/core";
 
 import { useAuth } from "context/auth/auth-context";
+import { Navigation } from "components/navigation/navigation";
 
 export const Header = () => {
   const { user, logout, isLoggedIn } = useAuth();
+  const [isOpen, setIsOpen] = useState(false);
 
   const initials = useMemo(() => {
     const parts = user?.name.trim().split(" ");
@@ -27,10 +32,23 @@ 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} />
+        <Grid.Col xs={6} md={4}>
+          <Box
+            sx={(theme) => ({
+              [theme.fn.largerThan("md")]: { display: "none" },
+            })}
+          >
+            <ActionIcon onClick={openDrawer}>
+              <Menu2 />
+            </ActionIcon>
+          </Box>
+        </Grid.Col>
         <Grid.Col
           xs={4}
           sx={(theme) => ({
@@ -60,6 +78,19 @@ 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/navigation/navigation.tsx

+import { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { Stack, Button, 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;
+  show?: ((user?: User) => boolean) | boolean;
+  sx?: Sx;
+};
+
+const navItems: NavItem[] = [
+  {
+    label: "Home",
+    to: "/",
+    icon: <Home />,
+  },
+  {
+    label: "Events",
+    to: "/events",
+    icon: <CalendarEvent />,
+  },
+  {
+    label: "Locations",
+    to: "/locations",
+    icon: <Location />,
+    show: (user) => user?.userRole === "MANAGER",
+  },
+  {
+    label: "My reservations",
+    to: "/my-reservations",
+    icon: <BuildingStore />,
+    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,
+  },
+];
+
+interface Props {
+  onClick?: () => void;
+}
+
+export const Navigation = ({ onClick }: Props) => {
+  const { user } = useAuth();
+
+  return (
+    <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>
+  );
+};

frontend/src/components/sidebar/sidebar.tsx

-import { ReactNode } from "react";
-import { Link } from "react-router-dom";
-import { Stack, Button, Paper, Sx } from "@mantine/core";
+import { Paper } 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;
-  show?: ((user?: User) => boolean) | boolean;
-  sx?: Sx;
-};
-
-const navItems: NavItem[] = [
-  {
-    label: "Home",
-    to: "/",
-    icon: <Home />,
-  },
-  {
-    label: "Events",
-    to: "/events",
-    icon: <CalendarEvent />,
-  },
-  {
-    label: "Locations",
-    to: "/locations",
-    icon: <Location />,
-    show: (user) => user?.userRole === "MANAGER",
-  },
-  {
-    label: "My reservations",
-    to: "/my-reservations",
-    icon: <BuildingStore />,
-    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,
-  },
-];
-
-interface Props {
-  onClick?: () => void;
-}
-
-export const Sidebar = ({ onClick }: Props) => {
-  const { user } = useAuth();
+import { Navigation } from "components/navigation/navigation";
 
+export const Sidebar = () => {
   return (
     <Paper
       withBorder
-      sx={{
+      sx={(theme) => ({
         flexGrow: 1,
         minWidth: 250,
         maxWidth: 350,
         position: "relative",
         padding: "1rem",
-      }}
+        [theme.fn.smallerThan("md")]: {
+          display: "none",
+        },
+      })}
     >
-      <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>
+      <Navigation />
     </Paper>
   );
 };

frontend/src/modules/events/events.tsx

@@ -306,7 +306,7 @@ export const Events = () => {
               value={search}
               onChange={handleSearchChange}
             />
-            {user !== undefined && user.userRole === "MANAGER" ? (
+            {user !== undefined && user.userRole === "MANAGER" && (
               <Button
                 variant="outline"
                 leftIcon={<Plus />}
@@ -314,8 +314,6 @@ export const Events = () => {
               >
                 Add Event
               </Button>
-            ) : (
-              <th />
             )}
           </Container>
           <Table