Combined new navbar with timetable. Route: /combined

src/frontend/App.tsx

@@ -9,6 +9,7 @@ import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import "./App.css";
 import TimetableNewPage from "./Pages/TimetableNewPage";
+import TimetableCombined from "./Pages/Timetable Combined";
 
 export default function App() {
     return (
@@ -24,6 +25,14 @@ export default function App() {
                         </TimetableDataContextProvider>
                     }
                 />
+                <Route
+                    path="/combined"
+                    element={
+                        <TimetableDataContextProvider>
+                            <TimetableCombined />
+                        </TimetableDataContextProvider>
+                    }
+                />
                 <Route path="/" element={<TimetableNewPage />} />
             </Routes>
         </Router>

src/frontend/Components/NavBar/NavBar.tsx

@@ -14,7 +14,7 @@ const NavBar = () => {
 
     return (
         <SelectedValuesProvider>
-            <AppBar position="static" sx={{ padding: "0.5rem" }}>
+            <AppBar position="fixed" sx={{ padding: "0.5rem" }}>
                 <Toolbar>
                     <AcademicYearButton />
                     <BatchButton />

src/frontend/Pages/Timetable Combined.tsx

@@ -0,0 +1,79 @@
+import React, { useContext, useState } from "react";
+import OldNavBar from "../Components/NavBar/OldNavBar";
+import OldTimetable from "../Components/Timetable/OldTimetable";
+import { styled } from "@mui/material/styles";
+import { useImmer } from "use-immer";
+import { Box } from "@mui/material";
+
+import { TimetableResponse } from "../../backend/api/routes/responseTypes";
+import { DrawerHeader, DrawerRight } from "../Components/Sidebar/Drawer";
+import { NavBar } from "../Components";
+import { TimetableDataContext } from "../context/TimetableDataContext";
+
+const drawerwidth = 300;
+
+const Main = styled("main", { shouldForwardProp: (prop) => prop !== "drawerState" })<{
+    drawerState?: boolean;
+    drawerwidth: number;
+}>(({ theme, drawerState, drawerwidth }) => ({
+    flexGrow: 1,
+    padding: theme.spacing(3),
+    transition: theme.transitions.create("margin", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    marginRight: -drawerwidth,
+    ...(drawerState && {
+        transition: theme.transitions.create("margin", {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+        marginRight: 0,
+    }),
+    /**
+     * This is necessary to enable the selection of content. In the DOM, the stacking order is determined
+     * by the order of appearance. Following this rule, elements appearing later in the markup will overlay
+     * those that appear earlier. Since the Drawer comes after the Main content, this adjustment ensures
+     * proper interaction with the underlying content.
+     */
+    position: "relative",
+}));
+
+export default function TimetableCombined() {
+    const [drawerState, setDrawerState] = useState(false);
+    const [selectedSlotIndex, setSelectedSlotIndex] = useState<number | null>(null);
+    const { timetable, setTimetable } = useContext(TimetableDataContext);
+    const handleDrawerOpen = () => {
+        setDrawerState(true);
+    };
+
+    const handleDrawerClose = () => {
+        setDrawerState(false);
+    };
+
+    return (
+        <>
+            <Box sx={{ display: "flex" }}>
+                <NavBar />
+
+                <Main drawerState={drawerState} drawerwidth={drawerwidth}>
+                    <DrawerHeader />
+                    <OldTimetable
+                        timetableData={timetable.available ? timetable.timetableData : null}
+                        handleDrawerOpen={handleDrawerOpen}
+                        setSelectedSlotIndex={setSelectedSlotIndex}
+                    />
+                </Main>
+                <DrawerRight
+                    setTimetable={setTimetable}
+                    drawerwidth={drawerwidth}
+                    handleDrawerClose={handleDrawerClose}
+                    setSelectedSlotIndex={setSelectedSlotIndex}
+                    drawerState={drawerState}
+                    selectedSlotIndex={selectedSlotIndex}
+                    timetableData={timetable.available ? timetable.timetableData : null}
+                />
+            </Box>
+        </>
+    );
+}

src/frontend/Pages/Timetable.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useState } from "react";
 import { NavBar } from "../Components";
 import OldTimetable from "../Components/Timetable/OldTimetable";
 import { TimetableDataContext } from "../context/TimetableDataContext";
+import { DrawerHeader } from "../Components/Sidebar/Drawer";
 
 export default function Timetable() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -11,6 +12,7 @@ export default function Timetable() {
     return (
         <React.Fragment>
             <NavBar />
+            <DrawerHeader />
             <OldTimetable
                 handleDrawerOpen={() => console.log("Called handler")}
                 setSelectedSlotIndex={setSelectedSlotIndex}

src/frontend/context/TimetableDataContext.tsx

@@ -1,12 +1,13 @@
 import React, { useState, Dispatch } from "react";
 import { TimetableResponse } from "../../backend/api/routes/responseTypes";
+import { Updater, useImmer } from "use-immer";
 
 type TimetableDataContextType = {
     timetable: {
         available: boolean;
         timetableData: TimetableResponse;
     };
-    setTimetable: Dispatch<TimetableResponse>;
+    setTimetable: Updater<TimetableResponse>;
     setAvailable: Dispatch<boolean>;
 };
 
@@ -19,7 +20,7 @@ export const TimetableDataContext = React.createContext<TimetableDataContextType
 });
 
 export const TimetableDataContextProvider = ({ children }: { children: React.ReactNode }) => {
-    const [timetable, setTimetable] = useState<TimetableResponse>();
+    const [timetable, setTimetable] = useImmer<TimetableResponse>(undefined as unknown as TimetableResponse);
     const [available, setAvailable] = useState<boolean>(false);
 
     return (