Merge branch 'main' of https://git.raffauf-clan.de/schn33fuchs/ticketsystem

frontend/Cargo.toml

@@ -26,3 +26,4 @@ gloo = "0.12.0"
 chrono = { workspace = true }
 chrono-tz = "0.10.4"
 wasm-bindgen = "0.2.120"
+theme = { version = "0.0.3", features = ["yew"] }

frontend/src/auth.rs

@@ -33,14 +33,14 @@ pub struct ProtectedRouteProps {
 
 /// A component that protects routes by enforcing authentication and optional administrator privileges.
 ///
-/// This component fetches the current user's authentication and admin status from the
-/// `/api/users/current` endpoint upon mounting. Based on the `AuthState` and the
-/// `admin_page` property, it either renders its children or redirects the user.
+/// This component uses the backend's validation middleware by fetching the current user's authentication
+/// and admin status from the `/api/users/current` endpoint (which requires a valid JWT token).
+/// Based on the [`AuthState`] and the `admin_page` property, it either renders its children or redirects the user.
 ///
 /// # Behavior
-/// - **Initial Load**: Displays "Loading..." while checking authentication status.
+/// - **Initial Load**: Displays "Loading..." while checking authentication status via the backend.
 /// - **Not Authenticated**: Redirects to the login page (`crate::Route::Login`).
-/// - **Authenticated**:
+/// - **Authenticated** (valid JWT token from backend):
 ///   - If `admin_page` is `true`:
 ///     - If the user is an administrator (`is_admin: Some(true)`), it renders `children`.
 ///     - If the user is not an administrator (`is_admin: Some(false)`), it redirects to
@@ -109,7 +109,7 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
         AuthState {
             is_authenticated: None,
             ..
-        } => html! { <div>{ "Loading..." } </div> },
+        } => html! { <div>{ "Wird geladen..." } </div> },
         AuthState {
             is_authenticated: Some(false),
             ..
@@ -126,7 +126,7 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
                     Some(false) => {
                         html! { <Redirect<crate::Route> to={crate::Route::PermissionDenied}/> }
                     }
-                    None => html! { <div>{ "Checking permissions..." }</div> },
+                    None => html! { <div>{ "Überprüfe Berechtigungen..." }</div> },
                 }
             } else {
                 props.children.clone().into()

frontend/src/darkmode.rs

@@ -0,0 +1,41 @@
+use yew::prelude::*;
+
+/// A button component that toggles between light and dark theme modes.
+///
+/// Clicking this button switches the application's theme by modifying the `data-theme` attribute
+/// on the document element. The theme preference is applied via CSS variables for consistent styling.
+///
+/// # Behavior
+/// - Reads the current `data-theme` attribute value from the HTML element
+/// - Sets `data-theme="dark"` if currently in light mode
+/// - Clears the attribute (light mode) if currently in dark mode
+/// - Re-renders to reflect the visual changes (typically toggled via CSS)
+///
+/// # Example Usage
+/// ```ignore
+/// html! {
+///     <ThemeToggle />
+/// }
+/// ```
+#[function_component]
+pub fn ThemeToggle() -> Html {
+    let onclick = {
+        Callback::from(|_| {
+            if let Some(window) = web_sys::window() {
+                if let Some(document) = window.document() {
+                    if let Some(html) = document.document_element() {
+                        let current = html.get_attribute("data-theme").unwrap_or_default();
+                        let new_theme = if current == "dark" { "" } else { "dark" };
+                        let _ = html.set_attribute("data-theme", new_theme);
+                    }
+                }
+            }
+        })
+    };
+
+    html! {
+        <button {onclick} class="sidebar-button">
+            {"🌙"}
+        </button>
+    }
+}

frontend/src/lib.rs

@@ -1,4 +1,5 @@
 mod auth;
+mod darkmode;
 mod pages;
 use crate::auth::ProtectedRoute;
 use crate::pages::*;
@@ -10,7 +11,9 @@ use yew_router::prelude::*;
 /// Defines the application's various routes and their corresponding paths.
 ///
 /// This enum is used by `yew-router` to map URLs to specific components,
-/// enabling navigation within the single-page application.
+/// enabling navigation within the single-page application. Each route is protected
+/// by [`ProtectedRoute`] middleware where appropriate to enforce authentication and authorization.
+/// See [`switch`] for the routing logic.
 #[derive(Clone, PartialEq, Routable)]
 enum Route {
     /// The application's home page.
@@ -65,10 +68,17 @@ pub struct SidebarShellProps {
 /// A shell component that provides a consistent layout with a sidebar and a main content area.
 ///
 /// This component is designed to wrap page-specific content, ensuring that the sidebar
-/// is always present for navigation.
+/// is always present for navigation. Integrates with [`crate::pages::sidebar::Sidebar`] for navigation.
+///
+/// # Mobile Support
+/// On mobile displays, the sidebar is hidden by default and can be toggled:
+/// - **Menu Toggle Button**: Renders a floating menu button to slide the sidebar open.
+/// - **Dark Mode Toggle**: Floating button to change theme.
+/// - **Overlay Backdrop**: Dims the screen when the sidebar is open. Clicking it closes the sidebar.
+/// - **Auto-Close on Navigation**: Automatically closes the sidebar when navigating to a new route.
 ///
 /// # Components
-/// - [`sidebar::Sidebar`]: The navigation sidebar component.
+/// - [`crate::pages::sidebar::Sidebar`]: The navigation sidebar component, accepting mobile open state.
 /// - Main content area: Renders the `children` passed to this component.
 ///
 /// # Example
@@ -81,9 +91,46 @@ pub struct SidebarShellProps {
 /// ```
 #[component(SidebarShell)]
 fn sidebar_shell(props: &SidebarShellProps) -> Html {
+    let route = use_route::<Route>();
+    let mobile_sidebar_open = use_state(|| false);
+
+    // Close mobile sidebar automatically on any route transition
+    {
+        let mobile_sidebar_open = mobile_sidebar_open.clone();
+        use_effect_with(route, move |_| {
+            mobile_sidebar_open.set(false);
+            || ()
+        });
+    }
+
+    let on_open = {
+        let mobile_sidebar_open = mobile_sidebar_open.clone();
+        Callback::from(move |_: MouseEvent| mobile_sidebar_open.set(true))
+    };
+
+    let on_close = {
+        let mobile_sidebar_open = mobile_sidebar_open.clone();
+        Callback::from(move |_: ()| mobile_sidebar_open.set(false))
+    };
+
+    let on_close_click = {
+        let on_close = on_close.clone();
+        Callback::from(move |_: MouseEvent| on_close.emit(()))
+    };
+
     html! {
         <div class="layout">
-            <sidebar::Sidebar/>
+            <button class="mobile-menu-toggle" onclick={on_open}>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="4" x2="20" y1="12" y2="12"/>
+                    <line x1="4" x2="20" y1="6" y2="6"/>
+                    <line x1="4" x2="20" y1="18" y2="18"/>
+                </svg>
+            </button>
+
+            <div class={if *mobile_sidebar_open { "sidebar-overlay open" } else { "sidebar-overlay" }} onclick={on_close_click}></div>
+
+            <sidebar::Sidebar is_open={*mobile_sidebar_open} on_close={on_close} />
             <main class="content">
                 { for props.children.iter() }
             </main>
@@ -91,6 +138,7 @@ fn sidebar_shell(props: &SidebarShellProps) -> Html {
     }
 }
 
+
 /// Props for the AdminCheckWrapper component.
 #[derive(Properties, PartialEq)]
 pub struct AdminCheckWrapperProps {
@@ -101,11 +149,11 @@ pub struct AdminCheckWrapperProps {
 ///
 /// This component is used to gate access to pages that should only be accessible before
 /// system initialization (e.g., login page). It performs an asynchronous check to the
-/// `/api/check-admin` endpoint to determine system state.
+/// backend's `/api/check-admin` endpoint (via `crate::handlers::auth::check_admin_exists`) to determine system state.
 ///
 /// # Behavior
-/// - **Loading**: Displays "Loading..." while checking admin status
-/// - **No Admin**: Automatically redirects to `/setup` page to initialize
+/// - **Loading**: Displays "Loading..." while checking admin status from the backend
+/// - **No Admin**: Automatically redirects to [`Route::Setup`] page for initialization
 /// - **Admin Exists**: Renders the wrapped children (e.g., login page)
 ///
 /// # Example Usage
@@ -115,19 +163,9 @@ pub struct AdminCheckWrapperProps {
 /// </AdminCheckWrapper>
 /// ```
 ///
-/// # Implementation Detail
-/// The check happens in `use_effect_with` on component mount:
-/// ```ignore
-/// spawn_local(async move {
-///     match Request::get("/api/check-admin").send().await {
-///         Ok(resp) if resp.status() == 200 => {
-///             let has_admin = data["has_admin"].as_bool().unwrap_or(false);
-///             admin_exists.set(Some(has_admin));
-///         }
-///         _ => admin_exists.set(Some(false))
-///     }
-/// });
-/// ```
+/// # Backend Integration
+/// The check queries the backend's `/api/check-admin` endpoint which returns `{"has_admin": bool}`.
+/// This allows the frontend to determine if initial admin setup is required.
 #[component(AdminCheckWrapper)]
 fn admin_check_wrapper(props: &AdminCheckWrapperProps) -> Html {
     let admin_exists = use_state(|| None::<bool>);
@@ -155,10 +193,10 @@ fn admin_check_wrapper(props: &AdminCheckWrapperProps) -> Html {
     }
 
     match *admin_exists {
-        None => html! { <div>{ "Loading..." }</div> },
+        None => html! { <div>{ "Wird geladen..." }</div> },
         Some(false) => {
             navigator.push(&Route::Setup);
-            html! { <div>{ "Redirecting to setup..." }</div> }
+            html! { <div>{ "Wird weitergeleitet zur Einrichtung..." }</div> }
         }
         Some(true) => props.children.clone().into(),
     }
@@ -166,18 +204,24 @@ fn admin_check_wrapper(props: &AdminCheckWrapperProps) -> Html {
 
 /// The main routing logic for the application.
 ///
-/// This function takes a `Route` enum variant and returns the corresponding HTML
+/// This function takes a [`Route`] enum variant and returns the corresponding HTML
 /// content to be rendered. It acts as a central dispatcher for the application's
-/// navigation.
+/// navigation and authentication flow.
 ///
-/// Many routes are wrapped in a [`ProtectedRoute`] to enforce authentication
-/// and authorization, and in a [`SidebarShell`] to maintain consistent layout.
+/// Most routes are wrapped in [`ProtectedRoute`] to enforce authentication
+/// and authorization based on the `admin_page` flag, and in [`SidebarShell`] to maintain consistent layout.
+/// Login and Setup routes use [`AdminCheckWrapper`] instead to handle pre-authentication states.
 ///
 /// # Arguments
 /// - `route`: The [`Route`] enum variant representing the current URL path.
 ///
 /// # Returns
 /// An `Html` component that should be rendered for the given route.
+///
+/// # Route Protection
+/// - **Admin-required routes** (`admin_page={true}`): Require both authentication and admin privileges
+/// - **Public routes** (`admin_page={false}`): Require only authentication
+/// - **Pre-auth routes** (`AdminCheckWrapper`): Used before admin creation or login
 fn switch(route: Route) -> Html {
     match route {
         Route::Home => html! {
@@ -259,12 +303,16 @@ fn switch(route: Route) -> Html {
 /// The root component of the Yew application.
 ///
 /// This component sets up the application's routing using `yew-router`'s
-/// [`BrowserRouter`] and [`Switch`] components. All other application content
-/// is rendered based on the current route.
+/// `BrowserRouter` and `Switch` components. All other application content
+/// is rendered based on the current [`Route`] matched by the `switch` function.
+///
+/// Uses [`switch`] as the routing dispatcher to handle all route-specific rendering,
+/// which applies appropriate middleware like [`ProtectedRoute`] and [`AdminCheckWrapper`].
 ///
 /// # Structure
-/// - [`BrowserRouter`]: Enables client-side routing.
-/// - [`Switch`]: Renders components based on the matched [`Route`].
+/// - `BrowserRouter`: Enables client-side routing.
+/// - `Switch`: Renders components based on the matched [`Route`].
+/// - `switch` function: Determines which component to render for each route.
 #[component(App)]
 pub fn app() -> Html {
     html! {

frontend/src/main.rs

@@ -1,5 +1,9 @@
 use frontend::App;
 
+/// Main entry point for the Yew frontend application.
+///
+/// Initializes the Yew framework and renders the root [`App`] component into the DOM.
+/// This function is typically called automatically by the WebAssembly runtime.
 fn main() {
     yew::Renderer::<App>::new().render();
 }

frontend/src/pages/basic_pages.rs

@@ -3,6 +3,29 @@ use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
 use yew_router::prelude::*;
 
+/// Removes surrounding double quotes from a string.
+///
+/// This macro takes an expression that evaluates to a string and returns a new `String`
+/// with any leading or trailing double quotes removed. It's useful for cleaning up
+/// string data that might be inadvertently wrapped in quotes, such as JSON string values.
+///
+/// # Arguments
+///
+/// * `$str`: An expression that can be converted into a string slice (`&str`).
+///
+/// # Examples
+///
+/// ```rust
+/// use your_crate::dequote; // Assuming `dequote` is re-exported or in scope
+///
+/// let quoted_string = "\"hello world\"";
+/// let dequoted_string = dequote!(quoted_string);
+/// assert_eq!(dequoted_string, "hello world");
+///
+/// let already_clean = "no quotes";
+/// let dequoted_clean = dequote!(already_clean);
+/// assert_eq!(dequoted_clean, "no quotes");
+/// ```
 macro_rules! dequote {
     ($str:expr) => {
         $str.trim_matches('"').to_string()
@@ -56,11 +79,11 @@ pub fn home_component() -> Html {
     }
 
     html! {
-        <div class="rundbg">
+        <div class="rundbg home">
             <crate::utilities::TicketCount/>
 
-            <p>{ "You are logged in as: " }</p>
-            <p>{ &*name }</p>
+            <p class="login-status">{ "Sie sind angemeldet als: " }</p>
+            <p class="name">{ &*name }</p>
         </div>
     }
 }
@@ -78,7 +101,7 @@ pub fn home_component() -> Html {
 /// ```
 #[component(NotFound)]
 pub fn not_found_component() -> Html {
-    let message = "404 Not found";
+    let message = "404 Nicht gefunden";
     html! {
         <div>
             <h1>{&message}</h1>

frontend/src/pages/setup.rs

@@ -29,7 +29,7 @@ pub struct AdminSetupScheme {
 /// a form to create the first admin user. Key functionality:
 ///
 /// - **Admin Check**: On mount, verifies if an admin already exists by calling `/api/check-admin`.
-///   If an admin is found, the user is redirected to the login page (`crate::Route::Login`).
+///   If an admin is found, the user is redirected to the login page ([`crate::Route::Login`]).
 /// - **Form Fields**: Collects `first_name`, `last_name`, `username`, `password`, and `confirm_password`.
 /// - **Form Validation**:
 ///   - Ensures password fields are not empty.
@@ -103,7 +103,7 @@ pub fn initial_admin_setup() -> Html {
     }
 
     if !*admin_check_done {
-        return html! { <div>{ "Checking..." }</div> };
+        return html! { <div>{ "Wird überprüft..." }</div> };
     }
 
     let onsubmit = {
@@ -121,17 +121,17 @@ pub fn initial_admin_setup() -> Html {
             e.prevent_default();
 
             if (*pwd).is_empty() || (*pwd_confirm).is_empty() {
-                error.set("Password fields cannot be empty".to_string());
+                error.set("Passwortfelder dürfen nicht leer sein".to_string());
                 return;
             }
 
             if *pwd != *pwd_confirm {
-                error.set("Passwords do not match".to_string());
+                error.set("Passwörter stimmen nicht überein".to_string());
                 return;
             }
 
             if (*username).is_empty() {
-                error.set("Username cannot be empty".to_string());
+                error.set("Benutzername darf nicht leer sein".to_string());
                 return;
             }
 
@@ -172,28 +172,28 @@ pub fn initial_admin_setup() -> Html {
                         navigator.push(&crate::Route::Login);
                     }
                     Ok(r) => {
-                        let text = r.text().await.unwrap_or_else(|_| "unknown".into());
-                        error.set(format!("HTTP {}: {}", r.status(), text));
+                        let text = r.text().await.unwrap_or_else(|_| "Unbekannt".into());
+                        error.set(text);
                     }
-                    Err(err) => error.set(format!("Network error: {}", err)),
+                    Err(err) => error.set(format!("Netzwerkfehler: {}", err)),
                 }
             });
         })
     };
 
     html! {
-        <div class="setup-container">
+        <div class="setup-container rundbg">
             <div class="setup-box">
-                <h1>{ "Initial Admin Setup" }</h1>
-                <p>{ "Create your first administrator account" }</p>
+                <h1>{ "Admin-Einrichtung" }</h1>
+                <p>{ "Erstellen Sie Ihr erstes Administratorkonto" }</p>
 
                 <form {onsubmit} class="setup-form">
                     <div class="form-group">
-                        <label for="first_name">{ "First Name:" }
+                        <label for="first_name">{ "Vorname:" }
                             <input
                                 id="first_name"
                                 type="text"
-                                placeholder="First name"
+                                placeholder="Vorname"
                                 value={(*first_name).clone()}
                                 oninput={Callback::from(move |e: InputEvent| {
                                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -204,11 +204,11 @@ pub fn initial_admin_setup() -> Html {
                     </div>
 
                     <div class="form-group">
-                        <label for="last_name">{ "Last Name:" }
+                        <label for="last_name">{ "Nachname:" }
                             <input
                                 id="last_name"
                                 type="text"
-                                placeholder="Last name"
+                                placeholder="Nachname"
                                 value={(*last_name).clone()}
                                 oninput={Callback::from(move |e: InputEvent| {
                                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -219,11 +219,11 @@ pub fn initial_admin_setup() -> Html {
                     </div>
 
                     <div class="form-group">
-                        <label for="username">{ "Username:" }
+                        <label for="username">{ "Benutzername:" }
                             <input
                                 id="username"
                                 type="text"
-                                placeholder="Username"
+                                placeholder="Benutzername"
                                 value={(*username).clone()}
                                 oninput={Callback::from(move |e: InputEvent| {
                                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -234,11 +234,11 @@ pub fn initial_admin_setup() -> Html {
                     </div>
 
                     <div class="form-group">
-                        <label for="password">{ "Password:" }
+                        <label for="password">{ "Passwort:" }
                             <input
                                 id="password"
                                 type="password"
-                                placeholder="Password"
+                                placeholder="Passwort"
                                 value={(*pwd).clone()}
                                 oninput={Callback::from(move |e: InputEvent| {
                                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -249,11 +249,11 @@ pub fn initial_admin_setup() -> Html {
                     </div>
 
                     <div class="form-group">
-                        <label for="pwd_confirm">{ "Confirm Password:" }
+                        <label for="pwd_confirm">{ "Passwort bestätigen:" }
                             <input
                                 id="pwd_confirm"
                                 type="password"
-                                placeholder="Confirm password"
+                                placeholder="Passwort bestätigen"
                                 value={(*pwd_confirm).clone()}
                                 oninput={Callback::from(move |e: InputEvent| {
                                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -264,7 +264,7 @@ pub fn initial_admin_setup() -> Html {
                     </div>
 
                     <button type="submit" disabled={*loading} class="submit-btn">
-                        { if *loading { "Creating..." } else { "Create Admin Account" } }
+                        { if *loading { "Wird erstellt..." } else { "Administratorkonto erstellen" } }
                     </button>
 
                     if !error.is_empty() {
@@ -272,7 +272,7 @@ pub fn initial_admin_setup() -> Html {
                     }
 
                     if *success {
-                        <p class="success-message" style="color:green">{ "Admin account created successfully! Redirecting to login..." }</p>
+                        <p class="success-message" style="color:green">{ "Administratorkonto erfolgreich erstellt! Wird weitergeleitet zum Login..." }</p>
                     }
                 </form>
             </div>

frontend/src/pages/sidebar.rs

@@ -7,6 +7,11 @@ use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
 use yew_router::prelude::*;
 
+/// The key used to store and retrieve the sidebar's expansion state in `LocalStorage`.
+///
+/// This constant ensures consistency when accessing the stored state across different
+/// parts of the application. The value associated with this key in `LocalStorage`
+/// will be a serialized [`SidebarExpandState`] object.
 const STORAGE_KEY: &str = "sidebar_state";
 
 /// Represents the expansion state of collapsible menus within the sidebar.
@@ -128,7 +133,7 @@ pub fn sidebar_state_provider(props: &SidebarProps) -> Html {
         Callback::from(move |v: bool| {
             state.set(SidebarExpandState {
                 ticket_open: v,
-                users_open: (*state).users_open,
+                users_open: state.users_open,
             })
         })
     };
@@ -136,10 +141,10 @@ pub fn sidebar_state_provider(props: &SidebarProps) -> Html {
     let toggle_tickets = {
         let state = state.clone();
         Callback::from(move |_| {
-            let current = (*state).ticket_open;
+            let current = state.ticket_open;
             state.set(SidebarExpandState {
                 ticket_open: !current,
-                users_open: (*state).users_open,
+                users_open: state.users_open,
             });
         })
     };
@@ -148,7 +153,7 @@ pub fn sidebar_state_provider(props: &SidebarProps) -> Html {
         let state = state.clone();
         Callback::from(move |v: bool| {
             state.set(SidebarExpandState {
-                ticket_open: (*state).ticket_open,
+                ticket_open: state.ticket_open,
                 users_open: v,
             })
         })
@@ -157,9 +162,9 @@ pub fn sidebar_state_provider(props: &SidebarProps) -> Html {
     let toggle_users = {
         let state = state.clone();
         Callback::from(move |_| {
-            let current = (*state).users_open;
+            let current = state.users_open;
             state.set(SidebarExpandState {
-                ticket_open: (*state).ticket_open,
+                ticket_open: state.ticket_open,
                 users_open: !current,
             });
         })
@@ -229,10 +234,10 @@ pub fn ticket_menu() -> Html {
                     html! {
                         <ul class="submenu" role="menu">
                             <li role="none">
-                                <Link<crate::Route> to={crate::Route::Ticket}><span role="menuitem">{ "Submit Ticket" }</span></Link<crate::Route>>
+                                <Link<crate::Route> to={crate::Route::Ticket}><span role="menuitem">{ "Ticket einreichen" }</span></Link<crate::Route>>
                             </li>
                             <li role="none">
-                                <Link<crate::Route> to={crate::Route::AllTickets}><span role="menuitem">{ "View Tickets" }</span></Link<crate::Route>>
+                                <Link<crate::Route> to={crate::Route::AllTickets}><span role="menuitem">{ "Tickets anzeigen" }</span></Link<crate::Route>>
                             </li>
                         </ul>
                     }
@@ -284,7 +289,7 @@ pub fn users_menu() -> Html {
                 onclick={on_toggle}
                 aria-expanded={open.to_string()}
             >
-                { "Users" }
+                { "Benutzer" }
                 { if open { " ▾" } else { " ▸" } }
             </button>
 
@@ -293,10 +298,10 @@ pub fn users_menu() -> Html {
                     html! {
                         <ul class="submenu" role="menu">
                             <li role="none">
-                                <Link<crate::Route> to={crate::Route::Register}><span role="menuitem">{ "Create User" }</span></Link<crate::Route>>
+                                <Link<crate::Route> to={crate::Route::Register}><span role="menuitem">{ "Benutzer erstellen" }</span></Link<crate::Route>>
                             </li>
                             <li role="none">
-                                <Link<crate::Route> to={crate::Route::AllUsers}><span role="menuitem">{ "View Users" }</span></Link<crate::Route>>
+                                <Link<crate::Route> to={crate::Route::AllUsers}><span role="menuitem">{ "Benutzer anzeigen" }</span></Link<crate::Route>>
                             </li>
                         </ul>
                     }
@@ -314,6 +319,11 @@ pub fn users_menu() -> Html {
 /// and administrative status. It fetches the current user's details via `/api/users/current`
 /// to determine what menu items to display.
 ///
+/// # Mobile Support
+/// On small screens:
+/// - Slides into view from the left when `props.is_open` is `true`.
+/// - Renders a close button (`✕`) in the header that emits `props.on_close`.
+///
 /// # Structure
 /// - Wraps its content in a [`SidebarStateProvider`] to allow nested menus to manage their state.
 /// - Contains a navigation (`<nav>`) element with an unordered list (`<ul>`) of menu items.
@@ -332,8 +342,22 @@ pub fn users_menu() -> Html {
 /// # Logout Functionality
 /// The "Logout" button sends a GET request to `/api/logout`, clears the user's session,
 /// and then redirects the user to the login page (`crate::Route::Login`).
+/// Properties for the [`Sidebar`] component.
+///
+/// These properties enable managing and controlling the responsive mobile sidebar
+/// layout and its visibility settings.
+#[derive(Properties, PartialEq)]
+pub struct SidebarComponentProps {
+    /// A boolean flag indicating whether the mobile sidebar is currently slid open (`true`) or hidden (`false`).
+    #[prop_or_default]
+    pub is_open: bool,
+    /// A callback emitted when the user requests to close/hide the mobile sidebar.
+    #[prop_or_default]
+    pub on_close: Callback<()>,
+}
+
 #[component(Sidebar)]
-pub fn sidebar() -> Html {
+pub fn sidebar(props: &SidebarComponentProps) -> Html {
     let is_admin = use_state(|| None::<bool>);
     let navigator = use_navigator().expect("Sidebar must be used within a Router");
 
@@ -374,59 +398,84 @@ pub fn sidebar() -> Html {
     };
 
     match *is_admin {
-        None => html! { <div class="sidebar-loading">{ "Loading..." }</div> },
+        None => html! { <div class="sidebar-loading">{ "Wird geladen..." }</div> },
 
         // Non-admin: render a condensed user sidebar (no diagnostics, limited links)
-        Some(false) => html! {
-            <SidebarStateProvider>
-                <nav class="sidebar user">
-                    <ul>
-                        <Link<crate::Route> to={crate::Route::Home} classes="home">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="home-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-                                <polyline points="9 22 9 12 15 12 15 22"/>
-                            </svg>
-                        </Link<crate::Route>>
-                        <TicketMenu/>
-                        <li class="logout-item">
-                            <button
-                                class="logout-button"
-                                onclick={on_logout.clone()}
-                            >
-                                { "Logout" }
-                            </button>
-                        </li>
-                    </ul>
-                </nav>
-            </SidebarStateProvider>
-        },
+        Some(false) => {
+            let on_close = props.on_close.clone();
+            html! {
+                <SidebarStateProvider>
+                    <nav class={if props.is_open { "sidebar user open" } else { "sidebar user" }}>
+                        <ul>
+                            <li class="sidebar-header">
+                                <Link<crate::Route> to={crate::Route::Home} classes="home">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="home-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                                        <polyline points="9 22 9 12 15 12 15 22"/>
+                                    </svg>
+                                </Link<crate::Route>>
+                                <button class="sidebar-close" onclick={move |_| on_close.emit(())}>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <line x1="18" y1="6" x2="6" y2="18"/>
+                                        <line x1="6" y1="6" x2="18" y2="18"/>
+                                    </svg>
+                                </button>
+                            </li>
+                            <TicketMenu/>
+                            <li class="logout-item">
+                                <crate::darkmode::ThemeToggle/>
+                                <button
+                                    class="sidebar-button"
+                                    onclick={on_logout.clone()}
+                                >
+                                    { "Abmelden" }
+                                </button>
+                            </li>
+                        </ul>
+                    </nav>
+                </SidebarStateProvider>
+            }
+        }
 
         // Admin: full sidebar wrapped in provider so submenu state persists
-        Some(true) => html! {
-            <SidebarStateProvider>
-                <nav class="sidebar admin">
-                    <ul>
-                        <Link<crate::Route> to={crate::Route::Home} classes="home">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="home-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-                                <polyline points="9 22 9 12 15 12 15 22"/>
-                            </svg>
-                        </Link<crate::Route>>
-                        <TicketMenu/>
-                        <UsersMenu/>
-                        <Link<crate::Route> to={crate::Route::Diagnostics}>{ "Statistiken" }</Link<crate::Route>>
-                        <Link<crate::Route> to={crate::Route::ArchivedTickets}>{ "Archiv" }</Link<crate::Route>>
-                        <li class="logout-item">
-                            <button
-                                class="logout-button"
-                                onclick={on_logout.clone()}
-                            >
-                                { "Logout" }
-                            </button>
-                        </li>
-                    </ul>
-                </nav>
-            </SidebarStateProvider>
-        },
+        Some(true) => {
+            let on_close = props.on_close.clone();
+            html! {
+                <SidebarStateProvider>
+                    <nav class={if props.is_open { "sidebar admin open" } else { "sidebar admin" }}>
+                        <ul>
+                            <li class="sidebar-header">
+                                <Link<crate::Route> to={crate::Route::Home} classes="home">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="home-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                                        <polyline points="9 22 9 12 15 12 15 22"/>
+                                    </svg>
+                                </Link<crate::Route>>
+                                <button class="sidebar-close" onclick={move |_| on_close.emit(())}>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <line x1="18" y1="6" x2="6" y2="18"/>
+                                        <line x1="6" y1="6" x2="18" y2="18"/>
+                                    </svg>
+                                </button>
+                            </li>
+                            <TicketMenu/>
+                            <UsersMenu/>
+                            <Link<crate::Route> to={crate::Route::Diagnostics}>{ "Statistiken" }</Link<crate::Route>>
+                            <Link<crate::Route> to={crate::Route::ArchivedTickets}>{ "Archiv" }</Link<crate::Route>>
+                            <li class="logout-item">
+                                <crate::darkmode::ThemeToggle/>
+                                <button
+                                    class="sidebar-button"
+                                    onclick={on_logout.clone()}
+                                >
+                                    { "Abmelden" }
+                                </button>
+                            </li>
+                        </ul>
+                    </nav>
+                </SidebarStateProvider>
+            }
+        }
     }
 }
+

frontend/src/pages/ticket.rs

@@ -180,7 +180,7 @@ pub fn submit_ticket_component() -> Html {
         Callback::from(move |e: SubmitEvent| {
             e.prevent_default();
             if room.is_none() {
-                status.set(Some("Invalid room".into()));
+                status.set(Some("Ungültiger Raum".into()));
                 return;
             }
             let category = (*category).clone();
@@ -188,7 +188,7 @@ pub fn submit_ticket_component() -> Html {
             let description = (*description).clone();
             let room = room.unwrap();
             if !valid_rooms.contains(&room) {
-                status.set(Some("Room not allowed".into()));
+                status.set(Some("Raum nicht erlaubt".into()));
                 return;
             }
             let status = status.clone();
@@ -208,9 +208,12 @@ pub fn submit_ticket_component() -> Html {
                     .expect("Failed to build request");
 
                 match request.send().await {
-                    Ok(response) if response.status() == 200 => status.set(Some("Success".into())),
-                    Ok(response) => status.set(Some(format!("Error: {}", response.status()))),
-                    Err(err) => status.set(Some(format!("Network error: {}", err))),
+                    Ok(response) if response.status() == 200 => status.set(Some("Erfolg".into())),
+                    Ok(response) => {
+                        let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
+                        status.set(Some(text));
+                    },
+                    Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
             });
         })
@@ -313,14 +316,14 @@ pub fn submit_ticket_component() -> Html {
             {
                 if !room_valid {
                     html! {
-                        <p class="warning" >{ "Ungültiger / nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
+                        <p class="warning" >{ "Ungültiger/nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
                     }
                 } else {
                     html! {}
                 }
             }
             <br/>
-            <button type="submit">{ "Send" }</button>
+            <button type="submit">{ "Absenden" }</button>
 
             <Link<crate::Route> to={crate::Route::AllTickets}>{ "Tickets ansehen" }</Link<crate::Route>>
 
@@ -448,9 +451,12 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
                     .expect("Failed to construct request");
 
                 match request.send().await {
-                    Ok(response) if response.status() == 200 => error.set(Some("Success".into())),
-                    Ok(response) => error.set(Some(format!("Error: {}", response.status()))),
-                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                    Ok(response) if response.status() == 200 => error.set(Some("Erfolg".into())),
+                    Ok(response) => {
+                        let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
+                        error.set(Some(text));
+                    },
+                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
             });
         })
@@ -488,14 +494,13 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
 
                 match request.send().await {
                     Ok(resp) if resp.status() == 200 || resp.status() == 204 => {
-                        // remove local state or navigate away
-                        ticket_state.set(None); // clears the shown item
+                        ticket_state.set(None);
                     }
                     Ok(resp) => {
-                        let txt = resp.text().await.unwrap_or_else(|_| "Unknown".into());
-                        delete_error.set(Some(format!("HTTP {}: {}", resp.status(), txt)));
+                        let txt = resp.text().await.unwrap_or_else(|_| "Unbekannt".into());
+                        delete_error.set(Some(txt));
                     }
-                    Err(err) => delete_error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => delete_error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
                 deleting.set(false);
             });
@@ -503,12 +508,12 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
     };
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else if let Some(t) = &*ticket {
         html! {
-            <div>
+            <div class="rundbg">
                 <h1>{ format!("Ticket #{}", t.id) }</h1>
                 <p><strong>{ "Kategorie: " }</strong>{ &t.category }</p>
                 <p><strong>{ "Betreff: " }</strong>{ &t.betreff }</p>
@@ -549,7 +554,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
             </div>
         }
     } else {
-        html! { <p>{ "No ticket found." }</p> }
+        html! { <p>{ "Kein Ticket gefunden." }</p> }
     }
 }
 
@@ -659,9 +664,9 @@ pub fn all_tickets_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else {
         html! {
             <ul class= "postits">
@@ -676,21 +681,11 @@ pub fn all_tickets_component() -> Html {
                 html! {
                     <div class={classes!{status_class, "listbox"}}>
                         <li key={t.id.to_string()}>
-                            <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{} - #{}", t.betreff, t.id) }</h3></Link<crate::Route>>
-                            <p>{ &t.description }</p>
-                            <p>{ match t.status.as_str() {
-                                "ToDo" => "Zu tun",
-                                "InProgress" => "In Bearbeitung",
-                                "Completed" => "Erledigt",
-                                "Archived" => "Archiviert",
-                                _ => "Ungültiger Status"
-                            }}</p>
+                            <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{}", t.betreff,) }</h3></Link<crate::Route>>
                         </li>
 
                     </div>
                 }})}
-
-                <Link<crate::Route> to={crate::Route::Ticket}>{ "Zurück zur Startseite" }</Link<crate::Route>>
             </ul>
         }
     }
@@ -752,17 +747,17 @@ pub fn archived_tickets_component() -> Html {
                     Ok(response) if response.status() == 200 => {
                         match response.json::<Vec<Ticket>>().await {
                             Ok(t) => tickets.set(t),
-                            Err(e) => error.set(Some(format!("parse error: {}", e))),
+                            Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
                         }
                     }
                     Ok(response) => {
                         if let Ok(text) = response.text().await {
                             error.set(Some(text));
                         } else {
-                            error.set(Some(format!("status {}", response.status())));
+                            error.set(Some(format!("Status {}", response.status())));
                         }
                     }
-                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
                 loading.set(false);
             });
@@ -802,14 +797,14 @@ pub fn archived_tickets_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else {
         html! {
-            <ul>
+            <ul class="postits">
             { for tickets.iter().filter(|t| t.status == "Archived" && (user.is_admin || if let Some(uid) = user.id { t.user_id == uid } else { false })).map(|t| html! {
-                    <div>
+                    <div class="listbox">
                         <li key={t.id.to_string()}>
                             <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{} - #{}", t.betreff, t.id) }</h3></Link<crate::Route>>
                             <p>{ &t.description }</p>

frontend/src/pages/user.rs

@@ -102,6 +102,14 @@ pub struct UserProps {
     pub id: i16,
 }
 
+/// Represents an error response from the API.
+///
+/// This struct is used to deserialize error messages received from the backend API.
+/// It typically contains a human-readable message and an internal status code.
+///
+/// # Fields
+/// - `message`: A `String` containing a description of the error.
+/// - `_status`: An internal status code or message, often ignored in frontend display.
 #[derive(Deserialize, Debug)]
 struct ApiError {
     message: String,
@@ -173,9 +181,12 @@ pub fn register_component() -> Html {
                     .expect("Error building request");
 
                 match request.send().await {
-                    Ok(response) if response.status() == 200 => status.set(Some("Success".into())),
-                    Ok(response) => status.set(Some(format!("Error: {}", response.status()))),
-                    Err(err) => status.set(Some(format!("Network error: {}", err))),
+                    Ok(response) if response.status() == 200 => status.set(Some("Erfolg".into())),
+                    Ok(response) => {
+                        let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
+                        status.set(Some(text));
+                    },
+                    Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
             });
         })
@@ -318,10 +329,10 @@ pub fn login_component() -> Html {
                         navigator.push(&crate::Route::Home);
                     }
                     Ok(r) => {
-                        let text = r.text().await.unwrap_or_else(|_| "unknown".into());
-                        error.set(format!("HTTP {}: {}", r.status(), text));
+                        let text = r.text().await.unwrap_or_else(|_| "Unbekannt".into());
+                        error.set(text);
                     }
-                    Err(err) => error.set(format!("Network error: {}", err)),
+                    Err(err) => error.set(format!("Netzwerkfehler: {}", err)),
                 }
             });
         })
@@ -332,7 +343,7 @@ pub fn login_component() -> Html {
         <h1 class="headline">{ "Anmeldung" }</h1>
         <form {onsubmit} class="rundbg login">
             <input
-                placeholder="username"
+                placeholder="Benutzername"
                 value={(*username).clone()}
                 oninput={Callback::from(move |e: InputEvent| {
                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -341,14 +352,14 @@ pub fn login_component() -> Html {
             />
             <input
                 type="password"
-                placeholder="password"
+                placeholder="Passwort"
                 value={(*pwd).clone()}
                 oninput={Callback::from(move |e: InputEvent| {
                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
                     pwd.set(input.value());
                 })}
             />
-            <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
+            <button type="submit" disabled={*loading}>{ if *loading { "Anmeldung läuft..." } else { "Anmelden" } }</button>
             if !error.is_empty() { <p style="color:red">{(*error).clone()}</p> }
         </form>
         </div>
@@ -420,15 +431,15 @@ pub fn all_users_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else {
         html! {
             <ul class="postits">
             { for users.iter().map(|t| html! {
                     <li key={t.id.to_string()} class="listbox">
-                        <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3></Link<crate::Route>>
+                        <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}", t.first_name, t.last_name) }</h3></Link<crate::Route>>
                     </li>
                 })}
             </ul>
@@ -629,7 +640,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
             // confirm
             if !web_sys::window()
                 .and_then(|w| {
-                    w.confirm_with_message("Are you sure you want to delete this item?")
+                    w.confirm_with_message("Möchten Sie diesen Eintrag wirklich löschen?")
                         .ok()
                 })
                 .unwrap_or(false)
@@ -645,19 +656,18 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
             let user_state = user_state.clone();
 
             spawn_local(async move {
-                let url = format!("/api/users/{}", id); // or /api/tickets/{}
+                let url = format!("/api/users/{}", id);
                 let req = Request::delete(&url).credentials(web_sys::RequestCredentials::Include);
 
                 match req.send().await {
                     Ok(resp) if resp.status() == 200 || resp.status() == 204 => {
-                        // remove local state or navigate away
-                        user_state.set(None); // clears the shown item
+                        user_state.set(None);
                     }
                     Ok(resp) => {
-                        let txt = resp.text().await.unwrap_or_else(|_| "Unknown".into());
-                        delete_error.set(Some(format!("HTTP {}: {}", resp.status(), txt)));
+                        let txt = resp.text().await.unwrap_or_else(|_| "Unbekannt".into());
+                        delete_error.set(Some(txt));
                     }
-                    Err(err) => delete_error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => delete_error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
                 deleting.set(false);
             });
@@ -665,12 +675,12 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
     };
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else if let Some(u) = &*user {
         html! {
-            <div>
+            <div class="rundbg">
                 <div>
                     <p><strong>{ "Vorname: " }</strong>{ &u.first_name }</p>
                     <p><strong>{ "Nachname: " }</strong>{ &u.last_name }</p>
@@ -735,7 +745,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
 
                     <button type="submit" disabled={*saving}>{ if *saving { "Speichern..." } else { "Speichern" } }</button>
                     if *save_success {
-                        <p style="color:green">{ "Updated successfully" }</p>
+                        <p style="color:green">{ "Erfolgreich aktualisiert" }</p>
                     }
                     if let Some(err) = &*save_error {
                         <p style="color:red">{ err.clone() }</p>
@@ -753,6 +763,6 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
             </div>
         }
     } else {
-        html! { <p>{ "No ticket found." }</p> }
+        html! { <p>{ "Kein Benutzer gefunden." }</p> }
     }
 }

frontend/src/pages/utilities.rs

@@ -28,7 +28,7 @@ struct TicketPartial {
 /// for calculating and visualizing ticket distribution per room.
 ///
 /// # Fields
-/// - `tickets`: A vector of `TicketPartial` containing ticket data relevant for room totals.
+/// - `tickets`: A vector of [`TicketPartial`] containing ticket data relevant for room totals.
 #[derive(Properties, PartialEq)]
 struct RoomTotalsProps {
     tickets: Vec<TicketPartial>,
@@ -64,7 +64,7 @@ fn weekday_index(dt: &DateTime<Utc>) -> usize {
 /// the total count of tickets submitted on that day.
 ///
 /// # Arguments
-/// - `tickets`: A slice of `TicketPartial` items to count.
+/// - `tickets`: A slice of [`TicketPartial`] items to count.
 ///
 /// # Returns
 /// An array `[usize; 7]` with ticket counts for each weekday.
@@ -78,12 +78,12 @@ fn count_by_weekday(tickets: &[TicketPartial]) -> [usize; 7] {
 
 /// Calculates the occurrences of each weekday within the date range covered by the tickets.
 ///
-/// This function determines the minimum and maximum dates from the provided `TicketPartial`
+/// This function determines the minimum and maximum dates from the provided [`TicketPartial`]
 /// slice and then counts how many times each weekday occurs within that inclusive date range.
 /// This is useful for normalizing ticket counts against the number of available days for each weekday.
 ///
 /// # Arguments
-/// - `partials`: A slice of `TicketPartial` items defining the date range.
+/// - `partials`: A slice of [`TicketPartial`] items defining the date range.
 ///
 /// # Returns
 /// An array `[usize; 7]` where each element represents the number of times a
@@ -132,7 +132,8 @@ fn day_counts(partials: &[TicketPartial]) -> [usize; 7] {
 
 /// Converts a numerical room representation back into a human-readable string format.
 ///
-/// This function is the inverse of the room parsing logic in `SubmitTicket` component.
+/// This function is the inverse of the room parsing logic in
+/// [`SubmitTicket`](`crate::pages::ticket::SubmitTicket`) component.
 /// It converts negative numbers back to "K" prefixed rooms, numbers >= 1000 back to "D" prefixed rooms,
 /// and other numbers to their string representation.
 ///
@@ -169,7 +170,7 @@ fn parse_room(r: i16) -> String {
 #[component(Diagnostics)]
 pub fn diagnostics_component() -> Html {
     html! {
-        <div>
+        <div class="rundbg">
             <TicketCount/>
             <SubmitStats/>
         </div>
@@ -224,17 +225,17 @@ pub fn ticket_count_component() -> Html {
                     Ok(response) if response.status() == 200 => {
                         match response.json::<Vec<Ticket>>().await {
                             Ok(t) => tickets.set(t),
-                            Err(e) => error.set(Some(format!("parse error: {}", e))),
+                            Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
                         }
                     }
                     Ok(response) => {
                         if let Ok(text) = response.text().await {
                             error.set(Some(text));
                         } else {
-                            error.set(Some(format!("status {}", response.status())));
+                            error.set(Some(format!("Status {}", response.status())));
                         }
                     }
-                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
                 loading.set(false);
             });
@@ -274,9 +275,9 @@ pub fn ticket_count_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else {
         let status_conditions = |t: &Ticket| t.status == "ToDo" || t.status == "InProgress";
         let count = tickets
@@ -287,7 +288,7 @@ pub fn ticket_count_component() -> Html {
             })
             .count();
         html! {
-            <div>
+            <div class="ticket-count">
                 <h2>{ "Offene Tickets" }</h2>
                 <h4>{ count }</h4>
             </div>
@@ -303,12 +304,12 @@ pub fn ticket_count_component() -> Html {
 ///
 /// # State
 /// Uses `use_state` hooks to manage:
-/// - `tickets`: A vector of `TicketPartial` for statistical analysis.
+/// - `tickets`: A vector of [`TicketPartial`] for statistical analysis.
 /// - `error`: Any error message from API calls.
 /// - `loading`: A boolean indicating if data is being fetched.
 ///
 /// # Functionality
-/// - Fetches all tickets (as `TicketPartial`) from `/api/tickets`.
+/// - Fetches all tickets (as [`TicketPartial`]) from `/api/tickets`.
 /// - Calculates:
 ///   - `counts`: Number of tickets submitted on each weekday.
 ///   - `occ`: Number of occurrences of each weekday in the ticket date range.
@@ -341,17 +342,17 @@ pub fn submit_stats_component() -> Html {
                     Ok(response) if response.status() == 200 => {
                         match response.json::<Vec<TicketPartial>>().await {
                             Ok(t) => tickets.set(t),
-                            Err(e) => error.set(Some(format!("parse error: {}", e))),
+                            Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
                         }
                     }
                     Ok(response) => {
                         if let Ok(text) = response.text().await {
                             error.set(Some(text));
                         } else {
-                            error.set(Some(format!("status {}", response.status())));
+                            error.set(Some(format!("Status {}", response.status())));
                         }
                     }
-                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
                 loading.set(false);
             });
@@ -371,7 +372,7 @@ pub fn submit_stats_component() -> Html {
         }
     }
 
-    let weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+    let weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
     let (max_idx, _max_val) = counts
         .iter()
         .enumerate()
@@ -382,12 +383,12 @@ pub fn submit_stats_component() -> Html {
     html! {
         <div class="diagnostics-section">
             if *loading {
-                <p>{ "Loading..." }</p>
+                <p>{ "Wird geladen..." }</p>
             }
             if let Some(e) = &*error {
                 <p style="color: red;">{ e.clone() }</p>
             }
-            <h3>{ "Tickets per weekday" }</h3>
+            <h3>{ "Tickets pro Wochentag" }</h3>
             <div class="weekday-chart">
                 <div class="weekday-bars">
                     { for (0..7).map(|i| {
@@ -421,7 +422,7 @@ pub fn submit_stats_component() -> Html {
 
 /// A component that displays the total number of tickets per room.
 ///
-/// This component takes a list of `TicketPartial` items and calculates the
+/// This component takes a list of [`TicketPartial`] items and calculates the
 /// total number of tickets for each room. It then displays these totals
 /// in a sorted list with a bar chart visualization.
 ///
@@ -433,7 +434,7 @@ pub fn submit_stats_component() -> Html {
 /// - **Sorts Results**: Displays rooms sorted by ticket count in descending order.
 /// - **Visualizes Data**: Renders a bar chart where the width of each bar is
 ///   proportional to the ticket count for that room, relative to the room with the maximum tickets.
-/// - **Room Formatting**: Uses the `parse_room` function to display room numbers
+/// - **Room Formatting**: Uses the [`parse_room`] function to display room numbers
 ///   in a human-readable format.
 ///
 /// # Example

frontend/src/styles/_mixins.scss

@@ -4,5 +4,5 @@
   backgroud: #fff;
   border-radius: &border-radius;
   box-shadow: 0 1px 3px rgba(0,0,0,0.06);
-  padding: $spacing-md;
+  padding: var(--spacing-md);
 }

frontend/src/styles/_utilities.scss

@@ -1,6 +1,6 @@
 @use "variables" as *;
 
 .u-hidden { display: none !important; }
-.u-gap-sm { gap: $spacing-sm; }
-.text-muted { color: $color-muted; }
+.u-gap-sm { gap: var(--spacing-sm); }
+.text-muted { color: var(--color-muted); }
 

frontend/src/styles/_variables.scss

@@ -1,8 +1,29 @@
-$color-bg: #ffffff;
-$color-sidebar: #570000;
-$color-accent: #2563eb;
-$color-muted: #6b7280;
-$spacing-sm: 8px;
-$spacing-md: 16px;
-$border-radius: 6px;
-$rundbgbackgroundcolor: #a0a0a0;
+:root {
+  --color-bg: #ffffff;
+  --color-sidebar: #570000;
+  --color-accent: #2563eb;
+  --color-muted: #6b7280;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --border-radius: 6px;
+  --rundbgbackgroundcolor: #a0a0a0;
+  --sidebar-font: #fffefe;
+  --color: #ffffff;
+  --color-container: #f0f0f0;
+  --color-text: #000000;
+}
+
+[data-theme='dark'] {
+  --color-bg: #000000;
+  --color-sidebar: #b7d300;
+  --color-accent: #eb2525;
+  --color-muted: #999999;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --border-radius: 6px;
+  --rundbgbackgroundcolor: #505050;
+  --sidebar-font: #000000;
+  --color: #000000;
+  --color-container: #1a1a1a;
+  --color-text: #ffffff;
+}

frontend/src/styles/components/_diagnostics.scss

@@ -4,17 +4,17 @@
 .diagnostics-container {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: var(--spacing-md);
 }
 
 .diagnostics-section {
-  background-color: $color-bg;
-  border-radius: $border-radius;
-  padding: $spacing-md;
+  background-color: #ffffff;
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 
   h3 {
-    margin: 0 0 $spacing-md 0;
+    margin: 0 0 var(--spacing-md) 0;
     color: #1f2937;
     font-size: 1.1rem;
     font-weight: 600;
@@ -26,7 +26,7 @@
   flex-direction: column;
   gap: 12px;
   border: 1px solid #e5e7eb;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   background-color: #f9fafb;
 }
 
@@ -35,7 +35,7 @@
   gap: 12px;
   align-items: flex-end;
   height: 205px;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
   overflow-x: auto;
   padding-bottom: 0px;
 }
@@ -47,10 +47,11 @@
   flex: 1;
   min-width: 60px;
   height: 100%;
+  justify-content: end;
 
   .bar {
     width: 100%;
-    background-color: $color-accent;
+    background-color: var(--color-accent);
     border-radius: 4px 4px 0 0;
     transition: background-color 0.2s ease;
 
@@ -63,7 +64,7 @@
 .weekday-labels {
   display: flex;
   gap: 12px;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
   padding-top: 0;
   overflow-x: auto;
 
@@ -82,7 +83,7 @@
 
     .value {
       font-size: 11px;
-      color: $color-muted;
+      color: var(--color-muted);
     }
   }
 }
@@ -91,9 +92,9 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
   border: 1px solid #e5e7eb;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   background-color: #f9fafb;
 }
 
@@ -116,7 +117,7 @@
 
     .room-count {
       font-size: 12px;
-      color: $color-muted;
+      color: var(--color-muted);
       font-weight: 500;
     }
   }

frontend/src/styles/components/_home.scss

@@ -0,0 +1,9 @@
+.login-status {
+  font-weight: bold;
+  margin: 4px 8px;
+}
+
+.name {
+  font-size: 24px;
+  margin: 4px 8px;
+}

frontend/src/styles/components/_icon.scss

@@ -10,8 +10,18 @@
   justify-content: center;
   padding: 0;
 
+  @media (max-width: 768px) {
+    max-width: 60px;
+    
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+
   img {
     width: auto;
     height: auto;
   }
 }
+

frontend/src/styles/components/_sidebar.scss

@@ -8,32 +8,33 @@
 
 .sidebar {
   width: 260px;
-  background: $color-sidebar;
-  color: #fffefe;
+  background: var(--color-sidebar);
+  color: var(--sidebar-font);
   min-height: 100%;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
   display: flex;
   flex-direction: column;
 
  
 
-  ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $spacing-sm; flex: 1; }
+  ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; }
 
   a, .menu-toggle {
-    color: #ffffff;
+    color: var(--sidebar-font);
     text-decoration: none;
     display: block;
     padding: 8px 12px;
-    border-radius: 4px;
-    &:hover { background: rgba(158, 45, 1, 0.842); }
+    border-radius: var(--border-radius);
+    transition: background 0.2s ease-in-out;
+    &:hover { background: rgba(255,255,255,0.1); }
   }
 
-  .menu-toggle { background: #ff5a316c; border: none; text-align: left; width: 100%; cursor: pointer; }
+  .menu-toggle { background: transparent; border: none; text-align: left; width: 100%; cursor: pointer; }
 
   .submenu {
     margin-left: 8px;
-    background: rgba(255,255,255,0.02);
-    border-radius: 4px;
+    background: rgba(255,255,255,0.05);
+    border-radius: var(--border-radius);
     padding: 6px;
     li { padding: 4px 0; }
   }
@@ -41,34 +42,146 @@
   .logout-item {
     margin-top: auto;
     border-top: 1px solid rgba(255,255,255,0.1);
-    padding-top: $spacing-sm;
+    padding-top: var(--spacing-sm);
   }
 
-  .logout-button {
+  .sidebar-button {
     background: rgba(255, 93, 43, 0.527);
-    color: #ffffff;
+    color: var(--sidebar-font);
     border: 1px solid rgba(255, 255, 255, 0.801);
     padding: 8px 12px;
     border-radius: 4px;
     width: 100%;
     cursor: pointer;
     text-align: left;
-    &:hover { background: rgba(255,255,255,0.15); }
-    &:active { background: rgba(255,255,255,0.2); }
+    margin-top: var(--spacing-sm);
   }
 
-  &.user { width: 220px; background: darken($color-sidebar, 6%); }
-
-  .home-svg {
-      width: 24px;
-      height: 24px; 
-      vertical-align: middle;
-      margin: 0 auto;
-  }
-
-  .home {
+  .sidebar-header {
     display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: var(--spacing-md);
+
+    .home {
+      flex-grow: 1;
+      display: flex;
+      justify-content: center;
+      
+      @media (max-width: 768px) {
+        padding-left: 36px;
+      }
+    }
+
+    .sidebar-close {
+      display: none;
+      background: transparent;
+      border: none;
+      color: var(--sidebar-font);
+      cursor: pointer;
+      padding: 8px;
+      border-radius: 50%;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.2s ease-in-out;
+      margin-bottom: 0;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+        stroke: var(--sidebar-font);
+      }
+
+      @media (max-width: 768px) {
+        display: flex;
+      }
+    }
+  }
+  
+  .home-svg {
+    width: 24px;
+    height: 24px; 
+    vertical-align: middle;
+    margin-right: 8px;
+  }
+
+  &.user { width: 220px; background: darken(#570000, 6%); }
+}
+
+// Floating mobile menu toggle button
+.mobile-menu-toggle {
+  display: none;
+  
+  @media (max-width: 768px) {
+    display: flex;
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    z-index: 999;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid rgba(128, 128, 128, 0.2);
+    background-color: var(--color-container);
+    color: var(--color-text);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+    align-items: center;
     justify-content: center;
+    padding: 0;
+    transition: all 0.2s ease-in-out;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+      stroke: var(--color-text);
+      transition: stroke 0.2s ease-in-out;
+    }
+    
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+      background-color: var(--color-bg);
+      color: var(--color-container);
+      
+      svg {
+        stroke: var(--color-container);
+      }
+    }
+    
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}
+
+// Overlay backdrop that dims the screen and allows dismissals on mobile
+.sidebar-overlay {
+  display: none;
+  
+  @media (max-width: 768px) {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
+    z-index: 999;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+    
+    &.open {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 
 }

frontend/src/styles/components/_tickets.scss

@@ -3,12 +3,12 @@
 
 .ticket-card {
   @include card();
-  border-left: 4px solid $color-accent;
+  border-left: 4px solid var(--color-accent);
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: var(--spacing-sm);
 
-  .meta { color: $color-muted; font-size: 0.9rem; }
+  .meta { color: var(--color-muted); font-size: 0.9rem; }
   .title { font-weight: 600; }
 
 }
@@ -17,18 +17,19 @@
   max-width: auto;
   margin:0 0;
   background-color: #90ff82;
-  background-color: $rundbgbackgroundcolor;
-  padding-bottom: 96px;
+  background-color: var(--rundbgbackgroundcolor);
+  padding-bottom: 8px;
   color: white;
-  padding-left: 32px;
-  padding-right: 32px;
-  padding-top: 96px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 8px;
   border-radius: 20px;
   border-color: #000000;
   border-style: double;
   box-shadow: 10px 10px 10px rgba(43, 43, 43, 0.8);
   font-size: 26px;
   list-style-type: none;
+  text-align: center;
 
   
   &.To-Do {
@@ -46,14 +47,33 @@
   &.Archived {
     background-color: #af69ee;
   }
+
+  a {
+    text-decoration: none;
+    color: white;
+  }
 }
 
 .postits {
   display: grid;
-  grid-template-columns: auto auto auto;
   gap: 8px;
   margin-top: 96px; 
 }
 .warning {
   color: #570000;
 }
+
+.ticket-count {
+  border-radius: 10px;
+  border: 2px solid black;
+  width: fit-content;
+  padding: 8px;
+  margin: 0 auto;
+  margin-bottom: 32px;
+
+  h4 {
+    text-align: center;
+    font-size: 32px;
+    margin: 8px;
+  }
+}

frontend/src/styles/main.scss

@@ -9,7 +9,7 @@
 @use "components/icon";
 
 body {
-  background: variables.$color-bg;
+  background: var(--color-bg);
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
   color: #111827;
   margin: 0;
@@ -27,7 +27,10 @@ body {
 .sidebar {
   width: 260px;
   flex-shrink: 0;
-  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
   overflow-y: auto;
   box-sizing: border-box;
 }
@@ -35,9 +38,10 @@ body {
 .content {
   flex: 1;
   min-width: 0;
+  margin-left: 260px;
   height: 100%;
   overflow-y: auto;
-  padding: variables.$spacing-md;
+  padding: var(--spacing-md);
   box-sizing: border-box;
 }
 
@@ -46,23 +50,23 @@ body {
     position: fixed;
     top: 0;
     bottom: 0;
-    left: -100%;
-    transition: left .2s;
+    left: -260px;
+    transition: left .3s ease-in-out;
     z-index: 1000;
     height: 100%;
     box-sizing: border-box;
   }
   .sidebar.open { left: 0; }
-  .content { margin-left: 0; padding: variables.$spacing-md; box-sizing: border-box; }
+  .content { margin-left: 0; padding: var(--spacing-md); box-sizing: border-box; }
 }
 
 .rundbg {
   display: flex;
   justify-content: center;
   flex-direction: column;
-  max-width: 40%;
+  max-width: 60%;
   margin: 0 auto;
-  background-color: variables.$rundbgbackgroundcolor;
+  background-color: var(--rundbgbackgroundcolor);
   padding-bottom: 96px;
   padding-left: 32px;
   padding-right: 32px;
@@ -99,13 +103,18 @@ body {
   }
 
   a {
-    color: #000000;
+    color: var (--color);
     text-align: center;
     border-style: dashed;
   }
 
   &.login {
     margin-top: 96px;
+    max-width: 40%;
+  }
+
+  &.home {
+    padding-top: 16px;
   }
 }