Restructured Header

Website/.env.development

@@ -1 +1 @@
-BACKEND_URI="http://127.0.0.1:8080"
+BACKEND_URI="http://localhost:8080"

Website/src/app/components/base_layout.tsx

@@ -1,6 +1,6 @@
 import "./globals.css";
-import Header from "@/app/components/header";
-import Footer from "@/app/components/footer";
+import Header from "@/app/components/layout/header";
+import Footer from "@/app/components/layout/footer";
 import React from "react";
 
 /**

Website/src/app/components/header.tsx → Website/src/app/components/layout/currentUser.tsx

@@ -1,33 +1,30 @@
 "use client";
 
-import Link from "next/link";
 import { useContext } from "react";
 import { UsernameContext } from "@/app/components/username-provider";
+import Link from "next/link";
 
 /**
- * The header for the web page
+ * A component showing the name of the currently logged-in user, with a logout link,
+ * or a login link if the user is not logged-in.
  */
-export default function Header() {
+export function CurrentUser({ className }: { className?: string }) {
 	const username = useContext(UsernameContext);
 
 	return (
-		<header className={"flex flex-row w-full flex-initial justify-items-center p-2"}>
-			<div>
-				<Link href={"/"}>RailTrail Admin interface</Link>
-			</div>
-			<div className={"grow"} />
+		<>
 			{username ? (
-				<div>
+				<div className={className}>
 					Hello {username} &ndash;{" "}
 					<Link href={"/logout"} prefetch={false}>
 						Logout
 					</Link>
 				</div>
 			) : (
-				<div>
+				<div className={className}>
 					<Link href={"/login"}>Login</Link>
 				</div>
 			)}
-		</header>
+		</>
 	);
 }

Website/src/app/components/layout/header.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { CurrentUser } from "@/app/components/layout/currentUser";
+
+/**
+ * The header for the web page
+ */
+export default function Header() {
+	return (
+		<header
+			className={
+				"flex flex-row w-full justify-items-center justify-around p-2 flex-wrap bg-white dark:bg-slate-800"
+			}>
+			<div className={"mr-auto"}>
+				<Link href={"/"}>RailTrail Verwaltung</Link>
+			</div>
+			<CurrentUser className={"ml-auto sm:order-last"} />
+			{/* Force a line break for small devices */}
+			<div className={"w-full sm:hidden"} />
+
+			<div>Foo</div>
+			<div>Bar</div>
+			<div>Baz</div>
+		</header>
+	);
+}

Website/src/app/components/login.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { FormEventHandler, PropsWithChildren, Suspense, useEffect, useRef, useState } from "react";
 
-import Footer from "@/app/components/footer";
+import Footer from "@/app/components/layout/footer";
 import { ErrorMessage } from "@/app/management/components/errorMessage";
 
 /**

Website/src/app/components/track_selection.tsx

@@ -2,7 +2,7 @@
 
 import { Dispatch, FormEventHandler, PropsWithChildren, useEffect, useRef, useState } from "react";
 
-import Footer from "@/app/components/footer";
+import Footer from "@/app/components/layout/footer";
 import useSWR from "swr";
 import { setCookie } from "cookies-next";
 import { inter } from "@/utils/common";