frontend/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "openapi-fetch": "^0.13.5",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-router": "^7.4.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
@@ -1316,6 +1317,12 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -1751,6 +1758,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2785,6 +2801,30 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.1.tgz",
+      "integrity": "sha512-Vmizn9ZNzxfh3cumddqv3kLOKvc7AskUT0dC1prTabhiEi0U4A33LmkDOJ79tXaeSqCqMBXBU/ySX88W85+EUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -2899,6 +2939,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2984,6 +3030,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

frontend/package.json

@@ -14,7 +14,8 @@
   "dependencies": {
     "openapi-fetch": "^0.13.5",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router": "^7.4.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

frontend/src/App.tsx

@@ -3,6 +3,8 @@ import "./App.css";
 import { useBackend } from "./hooks/backend.ts";
 import { paths } from "./lib/api";
 import suLogoLandscape from "./assets/SU_logo_optimized.svg";
+import { ProfileContext } from "./hooks/profile.ts";
+import Studentportalen from "./Studentportalen.tsx";
 
 type Profile =
   paths["/profile"]["get"]["responses"]["200"]["content"]["application/json"];
@@ -48,7 +50,11 @@ function App() {
     return splashScreen("Application failed to start");
   }
 
-  return state.name;
+  return (
+    <ProfileContext value={state}>
+      <Studentportalen />
+    </ProfileContext>
+  );
 }
 
 function splashScreen(extraContent: string) {

frontend/src/Studentportalen.tsx

@@ -0,0 +1,17 @@
+import { BrowserRouter, Route, Routes } from "react-router";
+import Home from "./studentportalen/Home.tsx";
+import Layout from "./studentportalen/Layout.tsx";
+
+export default function Studentportalen() {
+  return (
+    <>
+      <BrowserRouter>
+        <Routes>
+          <Route element={<Layout />}>
+            <Route index element={<Home />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </>
+  );
+}

frontend/src/hooks/profile.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+
+export type Profile = {
+  name: string;
+  language: "en" | "sv";
+};
+
+export const ProfileContext = createContext<Profile>({
+  name: "Unknown",
+  language: "en",
+});
+
+export function useProfile() {
+  return useContext(ProfileContext);
+}

frontend/src/index.css

@@ -1,5 +1,6 @@
 :root {
-    --color-su-primary: #002F5F;
+  --color-su-primary: #002f5f;
+  --color-su-primary-80: #33587f;
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
 * {

frontend/src/studentportalen/Footer.tsx

@@ -0,0 +1,3 @@
+export default function Footer() {
+  return <footer></footer>;
+}

frontend/src/studentportalen/Header.tsx

@@ -0,0 +1,14 @@
+import "./header.css";
+import suLogo from "../assets/SU_logo_optimized.svg";
+import { useProfile } from "../hooks/profile.ts";
+
+export default function Header() {
+  const profile = useProfile();
+
+  return (
+    <header>
+      <img src={suLogo} alt="Stockholm University" />
+      <span>{profile.name}</span>
+    </header>
+  );
+}

frontend/src/studentportalen/Home.tsx

@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <>
+      <h1>Home screen</h1>
+      <p>Here you can see the latest and greatest</p>
+    </>
+  );
+}

frontend/src/studentportalen/Layout.tsx

@@ -0,0 +1,20 @@
+import Header from "./Header.tsx";
+import Menu from "./Menu.tsx";
+import { Outlet } from "react-router";
+import Footer from "./Footer.tsx";
+import "./layout.css";
+
+export default function Layout() {
+  return (
+    <>
+      <div id={"layout"}>
+        <Header />
+        <Menu />
+        <main>
+          <Outlet />
+        </main>
+        <Footer />
+      </div>
+    </>
+  );
+}

frontend/src/studentportalen/Menu.tsx

@@ -0,0 +1,23 @@
+import { NavLink } from "react-router";
+import "./menu.css";
+import { useState } from "react";
+
+export default function Menu() {
+  const [subMenuVisible, setSubMenuVisible] = useState(false);
+  return (
+    <menu className={"main"}>
+      <li>
+        <NavLink to={"/"}>Home</NavLink>
+      </li>
+      <li>
+        <button onClick={() => setSubMenuVisible((current) => !current)}>
+          <span>| | |</span>
+        </button>
+        <menu className={"sub " + (subMenuVisible ? "visible" : "")}>
+          <li>Profile</li>
+          <li>Log out</li>
+        </menu>
+      </li>
+    </menu>
+  );
+}

frontend/src/studentportalen/header.css

@@ -0,0 +1,12 @@
+header {
+  height: 4em;
+  background-color: var(--color-su-primary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 1em;
+  color: white;
+  img {
+    max-height: 100%;
+  }
+}

frontend/src/studentportalen/layout.css

@@ -0,0 +1,6 @@
+#layout {
+  min-height: 100vh;
+}
+main {
+  padding: 0 1em;
+}

frontend/src/studentportalen/menu.css

@@ -0,0 +1,57 @@
+menu.main {
+  position: fixed;
+  bottom: 0;
+  background-color: var(--color-su-primary);
+  margin: 0;
+  padding: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  li {
+    list-style: none;
+    margin: 0;
+    flex-basis: 1px;
+    &:last-child {
+      margin-left: auto;
+    }
+  }
+  a,
+  button {
+    color: white;
+    padding: 1.3em;
+    display: block;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    min-width: 5em;
+  }
+  button {
+    background: none;
+    border: none;
+    span {
+      transform: rotate(90deg);
+      display: block;
+    }
+  }
+  menu.sub.visible {
+    display: flex;
+  }
+  menu.sub {
+    flex-direction: column-reverse;
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    color: white;
+    background-color: var(--color-su-primary-80);
+
+    li {
+      min-width: 10em;
+      padding: 1em;
+      border: 1px solid black;
+      border-bottom: none;
+    }
+  }
+}