README change

The docs now include dark mode, the sidebar on mobile and a expanded
ticket lifecycle

README.cargo.md

@@ -45,14 +45,19 @@ location /api/ {
 ```
 
 
-
 ## Usage of AI
 
-Github Copilot CLI was used with the model Claude Haiku 4.5 to generate most of the documentation:
+Github Copilot CLI was used with the model Claude Haiku 4.5 to generate most of the documentation
+
+Google Antigravity generated the Sequence Diagrams
 
 ### Prompt 
 Generate comments for cargo doc describing the indivilual components and create links to relevant structs, functions etc.
 
+Generate a sequence diagramm in @[README.md] behind the class diagramms
+
 ### Output
 The comments with `///` or `//!`
-I've gone over most of it and modified it to my needs and opinions
+I've gone over it and modified it to my needs and opinions
+
+The general structure sequence diagrams above. I've modified and fixed any errors and discrepancys 

README.md

@@ -248,6 +248,10 @@ classDiagram
     class SidebarShellProps {
         +children: Children
     }
+    class SidebarComponentProps {
+        +is_open: bool
+        +on_close: Callback~()~
+    }
     class AdminCheckWrapperProps {
         +children: Children
     }
@@ -255,6 +259,7 @@ classDiagram
     RoomTotalsProps --> TicketPartial
     UserTotalProps --> UserPartial
     UserTotalProps --> TicketPartial
+    SidebarShellProps ..> SidebarComponentProps
 
 ```
 
@@ -351,6 +356,15 @@ sequenceDiagram
     DB-->>BE: Success
     BE-->>FE: HTTP 200 OK {"status": "success"}
     FE-->>Admin: Update ticket status in UI
+
+    Note over Admin, DB: Ticket Archiving Flow (Admin Only Route)
+    Admin->>FE: Open Archived Tickets page
+    FE->>BE: GET /api/tickets/archive (Includes 'token' cookie)
+    Note over BE: validate_admin middleware verifies token & admin role
+    BE->>DB: SELECT * FROM tickets WHERE status = 'Archived'
+    DB-->>BE: Return archived tickets
+    BE-->>FE: HTTP 200 OK [Archived Tickets]
+    FE-->>Admin: Render historical archive board
 ```
 
 ## Usage of AI
@@ -366,6 +380,6 @@ Generate a sequence diagramm in @[README.md] behind the class diagramms
 
 ### Output
 The comments with `///` or `//!`
-I've gone over most of it and modified it to my needs and opinions
+I've gone over it and modified it to my needs and opinions
 
-The sequence Diagrams above
+The general structure sequence diagrams above. I've modified and fixed any errors and discrepancys 

backend/src/handlers/auth.rs

@@ -145,7 +145,7 @@ pub async fn login(
         .ok_or_else(|| {
             (
                 StatusCode::BAD_REQUEST,
-                Json(json!({"status": "error", "message": "Invalid username"})),
+                Json(json!({"status": "error", "message": "Ungültiger Benutzername"})),
             )
         })?;
 
@@ -157,7 +157,7 @@ pub async fn login(
     if !valid_pwd {
         let error_response = serde_json::json!({
             "status": "error",
-            "message": "Invalid password"
+            "message": "Ungültiges passwort"
         });
         return Err((StatusCode::BAD_REQUEST, Json(error_response)));
     }
@@ -268,7 +268,7 @@ pub async fn get_current_user(
 /// - `404 Not Found` if user doesn't exist
 /// - `500 Internal Server Error` if database error occurs
 pub async fn delete_user(
-    Path(id): Path<i32>,
+    Path(id): Path<i16>,
     State(data): State<Arc<AppState>>,
 ) -> Result<impl IntoResponse, (StatusCode, Json<serde_json::Value>)> {
     let query = sqlx::query(r#"DELETE FROM users WHERE id = $1"#)
@@ -338,10 +338,7 @@ pub async fn get_users(
             (StatusCode::INTERNAL_SERVER_ERROR, Json(error))
         })?;
 
-    let response = users
-        .iter()
-        .map(filter_user)
-        .collect::<Vec<FilteredUser>>();
+    let response = users.iter().map(filter_user).collect::<Vec<FilteredUser>>();
     let json_respnse = json!(response);
     Ok(Json(json_respnse))
 }
@@ -381,12 +378,10 @@ pub async fn get_user_by_id(
             });
             Err((StatusCode::NOT_FOUND, Json(error_response)))
         }
-        Err(e) => {
-            Err((
-                StatusCode::INTERNAL_SERVER_ERROR,
-                Json(json!({"status": "error", "message": format!("{:?}", e)})),
-            ))
-        }
+        Err(e) => Err((
+            StatusCode::INTERNAL_SERVER_ERROR,
+            Json(json!({"status": "error", "message": format!("{:?}", e)})),
+        )),
     }
 }
 
@@ -411,7 +406,7 @@ pub async fn get_user_by_id(
 /// - This endpoint requires admin privileges (enforced by middleware via
 ///   [`validate_admin`](crate::cookie::validation::validate_admin)).
 pub async fn update_user(
-    Path(id): Path<i32>,
+    Path(id): Path<i16>,
     State(data): State<Arc<AppState>>,
     Json(body): Json<UserUpdateScheme>,
 ) -> Result<impl IntoResponse, (StatusCode, Json<serde_json::Value>)> {

frontend/Cargo.toml

@@ -16,7 +16,8 @@ serde = { workspace = true }
 wasm-bindgen-futures = "0.4.70"
 web-sys = { version = "0.3.95", features = [
   "Window","Document","Request","Response","Headers", "HtmlSelectElement", "RequestCredentials",
-  "SubmitEvent","InputEvent","HtmlInputElement","Event", "HtmlFormElement", "MouseEvent"
+  "SubmitEvent","InputEvent","HtmlInputElement","Event", "HtmlFormElement", "MouseEvent",
+  "Element", "MediaQueryList", "DomTokenList"
 ] }
 gloo-net = "0.7.0"
 gloo-storage = "0.4.0"

frontend/src/dark_mode.rs

@@ -0,0 +1,74 @@
+use gloo_storage::{LocalStorage, Storage};
+use web_sys::window;
+use yew::prelude::*;
+
+/// A persistent, floating toggle button to switch the user interface theme between Dark Mode and Light Mode.
+///
+/// # Functionality
+/// 1. **System Preference Check**: If the user hasn't explicitly set a preference, detects the operating system theme 
+///    preference using browser `match_media("(prefers-color-scheme: dark)")` query.
+/// 2. **Session Persistence**: Caches the selected theme choice under the `"dark-mode"` key in the browser's `LocalStorage` 
+///    so that user preferences persist across page reloads.
+/// 3. **Dynamic Style Swapping**: Injects or removes the `.theme-dark` / `.theme-light` classes directly on the document 
+///    `body` element, triggering the theme change via globally defined CSS variables.
+#[function_component(DarkModeToggle)]
+pub fn dark_mode_toggle() -> Html {
+    // 1. Initialize state from LocalStorage or system preference
+    let is_dark = use_state(|| {
+        LocalStorage::get::<bool>("dark-mode").unwrap_or_else(|_| {
+            // Fallback to system preference if not set
+            window()
+                .and_then(|w| w.match_media("(prefers-color-scheme: dark)").ok().flatten())
+                .map(|m| m.matches())
+                .unwrap_or(false)
+        })
+    });
+
+    // 2. Synchronize the class on the body when the state changes
+    {
+        let is_dark = is_dark.clone();
+        use_effect_with(is_dark, |is_dark| {
+            if let Some(win) = window() {
+                if let Some(doc) = win.document() {
+                    if let Some(body) = doc.body() {
+                        if **is_dark {
+                            let _ = body.class_list().add_1("theme-dark");
+                            let _ = body.class_list().remove_1("theme-light");
+                            let _ = LocalStorage::set("dark-mode", true);
+                        } else {
+                            let _ = body.class_list().add_1("theme-light");
+                            let _ = body.class_list().remove_1("theme-dark");
+                            let _ = LocalStorage::set("dark-mode", false);
+                        }
+                    }
+                }
+            }
+            || ()
+        });
+    }
+
+    // 3. Toggle action
+    let onclick = {
+        let is_dark = is_dark.clone();
+        Callback::from(move |_| {
+            is_dark.set(!*is_dark);
+        })
+    };
+
+    html! {
+        <button class="dark-mode-toggle" {onclick}>
+            if *is_dark {
+                // Sun Icon for switching to light mode
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="4"/>
+                    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
+                </svg>
+            } else {
+                // Moon Icon for switching to dark mode
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
+                </svg>
+            }
+        </button>
+    }
+}

frontend/src/lib.rs

@@ -1,5 +1,6 @@
 mod auth;
 mod pages;
+mod dark_mode;
 use crate::auth::ProtectedRoute;
 use crate::pages::*;
 use gloo_net::http::Request;
@@ -69,8 +70,15 @@ pub struct SidebarShellProps {
 /// This component is designed to wrap page-specific content, ensuring that the sidebar
 /// 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
-/// - [`crate::pages::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
@@ -83,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>
@@ -271,6 +316,7 @@ fn switch(route: Route) -> Html {
 pub fn app() -> Html {
     html! {
         <BrowserRouter>
+            <dark_mode::DarkModeToggle />
             <Switch<Route> render={switch} />
         </BrowserRouter>
     }

frontend/src/pages/sidebar.rs

@@ -319,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.
@@ -337,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");
 
@@ -382,46 +401,78 @@ pub fn sidebar() -> Html {
         None => html! { <div class="sidebar-loading">{ "Lade..." }</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}>{ "󰟒" }</Link<crate::Route>>
-                        <TicketMenu/>
-                        <li class="logout-item">
-                            <button
-                                class="logout-button"
-                                onclick={on_logout.clone()}
-                            >
-                                { "Abmelden" }
-                            </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">
+                                <button
+                                    class="logout-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}>{ "󰟒" }</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()}
-                            >
-                                { "Abmelden" }
-                            </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">
+                                <button
+                                    class="logout-button"
+                                    onclick={on_logout.clone()}
+                                >
+                                    { "Abmelden" }
+                                </button>
+                            </li>
+                        </ul>
+                    </nav>
+                </SidebarStateProvider>
+            }
         },
     }
 }

frontend/src/pages/ticket.rs

@@ -302,7 +302,7 @@ pub fn submit_ticket_component() -> Html {
                         <option value="Whiteboard Beamer">{ "Whiteboard Beamer" }</option>
                         <option value="Internet">{ "Internet" }</option>
                         <option value="iPad Koffer">{ "iPad Koffer" }</option>
-                        <option value="Apple TV">{ "Apple TV" }</option>
+                        <option value="Apple TV" selected=true>{ "Apple TV" }</option>
                         <option value="Docu Cam">{ "Dokumenten Kamera" }</option>
                         <option value="Sonstiges">{ "Sonstiges" }</option>
                     </select>

frontend/src/pages/user.rs

@@ -1,3 +1,4 @@
+use crate::dequote;
 use gloo_net::http::Request;
 use serde::{Deserialize, Serialize};
 use wasm_bindgen_futures::spawn_local;
@@ -333,8 +334,9 @@ pub fn login_component() -> Html {
                         navigator.push(&crate::Route::Home);
                     }
                     Ok(r) => {
-                        let text = r.text().await.unwrap_or_else(|_| "unbekannt".into());
-                        error.set(format!("HTTP {}: {}", r.status(), text));
+                        let text: serde_json::Value =
+                            r.json().await.unwrap_or_else(|_| "unbekannt".into());
+                        error.set(dequote!(format!("{}", text["message"].to_string())));
                     }
                     Err(err) => error.set(format!("Netzwerkfehler: {}", err)),
                 }
@@ -343,7 +345,7 @@ pub fn login_component() -> Html {
     };
 
     html! {
-        <main class="content">
+        <main class="content login">
             <div class="form-container">
                 <div class="page-header">
                     <h1>{ "Anmelden" }</h1>
@@ -771,10 +773,10 @@ 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">{ "Erfolgreich aktualisiert" }</p>
+                        <p class="alert success">{ "Erfolgreich aktualisiert" }</p>
                     }
                     if let Some(err) = &*save_error {
-                        <p style="color:red">{ err.clone() }</p>
+                        <p class="alert error">{ err.clone() }</p>
                     }
                 </form>
 
@@ -784,7 +786,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
 
                 <Link<crate::Route> to={crate::Route::AllUsers} classes="return-to">{ "Zurück zur Benutzerübersicht" }</Link<crate::Route>>
                 if let Some(err) = &*delete_error {
-                    <p style="color:red">{ err.clone() }</p>
+                    <p class="alert error">{ err.clone() }</p>
                 }
             </div>
         }

frontend/src/pages/utilities.rs

@@ -285,19 +285,20 @@ pub fn ticket_count_component() -> Html {
                     .send()
                     .await
                     && response.status() == 200
-                        && let Ok(json) = response.json::<serde_json::Value>().await {
-                            let id = json
-                                .get("data")
-                                .and_then(|d| d.get("id"))
-                                .and_then(|v| v.as_i64())
-                                .and_then(|n| i16::try_from(n).ok());
-                            let is_admin = json
-                                .get("data")
-                                .and_then(|d| d.get("is_admin"))
-                                .and_then(|v| v.as_bool())
-                                .unwrap_or(false);
-                            user.set(ActiveUser { id, is_admin });
-                        }
+                    && let Ok(json) = response.json::<serde_json::Value>().await
+                {
+                    let id = json
+                        .get("data")
+                        .and_then(|d| d.get("id"))
+                        .and_then(|v| v.as_i64())
+                        .and_then(|n| i16::try_from(n).ok());
+                    let is_admin = json
+                        .get("data")
+                        .and_then(|d| d.get("is_admin"))
+                        .and_then(|v| v.as_bool())
+                        .unwrap_or(false);
+                    user.set(ActiveUser { id, is_admin });
+                }
             });
             || ()
         });
@@ -311,10 +312,7 @@ pub fn ticket_count_component() -> Html {
         let status_conditions = |t: &Ticket| t.status == "ToDo" || t.status == "InProgress";
         let count = tickets
             .iter()
-            .filter(|t| {
-                status_conditions(t)
-                    && (user.is_admin || (user.id == Some(t.user_id)))
-            })
+            .filter(|t| status_conditions(t) && (user.is_admin || (user.id == Some(t.user_id))))
             .count();
         html! {
             <div class="open-tickets">
@@ -435,7 +433,7 @@ pub fn submit_stats_component() -> Html {
                 <p>{ "Lade..." }</p>
             }
             if let Some(e) = &*error {
-                <p style="color: red;">{ e.clone() }</p>
+                <p class="alert error">{ e.clone() }</p>
             }
             <h3>{ "Tickets pro Wochentag" }</h3>
             <div class="weekday-chart">

frontend/src/styles/_variables.scss

@@ -1,15 +1,15 @@
 // Color Palette (Reference Style)
-$color-bg: #f0f2f5;
-$color-bg-dark: #121212;
-$color-container: #ffffff;
-$color-container-dark: #333333;
+$color-bg: var(--color-bg);
+$color-bg-dark: var(--color-bg-dark);
+$color-container: var(--color-container);
+$color-container-dark: var(--color-container-dark);
 $color-sidebar: #0f172a;
 $color-primary: #2b79c2;
 $color-primary-hover: #1d5fa0;
 $color-accent: #2b79c2;
 $color-muted: #6b7280;
-$color-text: #111827;
-$color-text-dark: #e2e2e2;
+$color-text: var(--color-text);
+$color-text-dark: var(--color-text-dark);
 
 // Status Colors
 $color-status-todo: #ffcccc;

frontend/src/styles/components/_dark_mode.scss

@@ -0,0 +1,75 @@
+:root {
+  --color-bg: #f0f2f5;
+  --color-bg-dark: #121212;
+  --color-container: #ffffff;
+  --color-container-dark: #333333;
+  --color-text: #111827;
+  --color-text-dark: #e2e2e2;
+}
+
+// Automatically respect standard media query if no override is set
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #121212;
+    --color-container: #333333;
+    --color-text: #e2e2e2;
+  }
+}
+
+// Force Light Mode overrides
+body.theme-light {
+  --color-bg: #f0f2f5;
+  --color-bg-dark: #f0f2f5;
+  --color-container: #ffffff;
+  --color-container-dark: #ffffff;
+  --color-text: #111827;
+  --color-text-dark: #111827;
+}
+
+// Force Dark Mode overrides
+body.theme-dark {
+  --color-bg: #121212;
+  --color-bg-dark: #121212;
+  --color-container: #333333;
+  --color-container-dark: #333333;
+  --color-text: #e2e2e2;
+  --color-text-dark: #e2e2e2;
+}
+
+// Fixed positioning ensures NO other component's layout is ever altered
+.dark-mode-toggle {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 9999;
+  width: 55px;
+  height: 55px;
+  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.1);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+
+  svg {
+    width: 36px;
+    height: 36px;
+    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.15);
+    background-color: var(--color-bg);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}

frontend/src/styles/components/_login.scss

@@ -37,3 +37,7 @@
     transform: scale(1.05);
   }
 }
+
+.content.login {
+  margin: 0;
+}

frontend/src/styles/components/_sidebar.scss

@@ -49,6 +49,126 @@
     text-align: left;
   }
 
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: $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: #fff;
+      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: #fff;
+      }
+
+      @media (max-width: 768px) {
+        display: flex;
+      }
+    }
+  }
+  
+  .home-svg {
+    width: 24px;
+    height: 24px; 
+    vertical-align: middle;
+    margin-right: 8px;
+  }
+
   &.user { width: 220px; background: darken($color-sidebar, 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: 998;
+    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);
+    }
+    
+    &: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/main.scss

@@ -10,6 +10,7 @@
 @use "components/diagnostics";
 @use "components/pages";
 @use "components/setup";
+@use "components/dark_mode";
 
 * {
   box-sizing: border-box;