feat(ui): add responsive mobile layout with hamburger menu

Add three responsive breakpoints (1024px, 768px, 480px) to make the
dashboard fully usable on tablets and phones. The sidebar now slides
in as an overlay on mobile with a hamburger toggle in a fixed header bar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/app_shell.rs

@@ -1,4 +1,6 @@
 use dioxus::prelude::*;
+use dioxus_free_icons::icons::bs_icons::{BsList, BsX};
+use dioxus_free_icons::Icon;
 
 use crate::components::sidebar::Sidebar;
 use crate::i18n::{t, tw, Locale};
@@ -14,6 +16,7 @@ use crate::Route;
 #[component]
 pub fn AppShell() -> Element {
     let locale = use_context::<Signal<Locale>>();
+    let mut mobile_menu_open = use_signal(|| false);
 
     // use_resource memoises the async call and avoids infinite re-render
     // loops that use_effect + spawn + signal writes can cause.
@@ -26,12 +29,44 @@ pub fn AppShell() -> Element {
 
     match auth_snapshot {
         Some(Ok(info)) if info.authenticated => {
+            let menu_open = *mobile_menu_open.read();
+            let sidebar_cls = if menu_open {
+                "sidebar sidebar--open"
+            } else {
+                "sidebar"
+            };
+
             rsx! {
                 div { class: "app-shell",
+                    // Mobile top bar (visible only on small screens via CSS)
+                    header { class: "mobile-header",
+                        button {
+                            class: "mobile-menu-btn",
+                            onclick: move |_| {
+                                let current = *mobile_menu_open.read();
+                                mobile_menu_open.set(!current);
+                            },
+                            if menu_open {
+                                Icon { icon: BsX, width: 24, height: 24 }
+                            } else {
+                                Icon { icon: BsList, width: 24, height: 24 }
+                            }
+                        }
+                        span { class: "mobile-header-title", "CERTifAI" }
+                    }
+                    // Backdrop overlay when sidebar is open on mobile
+                    if menu_open {
+                        div {
+                            class: "sidebar-backdrop",
+                            onclick: move |_| mobile_menu_open.set(false),
+                        }
+                    }
                     Sidebar {
                         email: info.email,
                         name: info.name,
                         avatar_url: info.avatar_url,
+                        class: sidebar_cls,
+                        on_nav: move |_| mobile_menu_open.set(false),
                     }
                     main { class: "main-content", Outlet::<Route> {} }
                 }

src/components/sidebar.rs

@@ -27,8 +27,19 @@ struct NavItem {
 /// * `name` - User display name (shown in header if non-empty).
 /// * `email` - Email address displayed beneath the avatar placeholder.
 /// * `avatar_url` - URL for the avatar image (unused placeholder for now).
+/// * `class` - CSS class override (e.g. to add `sidebar--open` on mobile).
+/// * `on_nav` - Callback fired when a nav link is clicked (used to close
+///   the mobile menu).
 #[component]
-pub fn Sidebar(name: String, email: String, avatar_url: String) -> Element {
+pub fn Sidebar(
+    name: String,
+    email: String,
+    avatar_url: String,
+    #[props(default = "sidebar".to_string())]
+    class: String,
+    #[props(default)]
+    on_nav: EventHandler<()>,
+) -> Element {
     let locale = use_context::<Signal<Locale>>();
     let locale_val = *locale.read();
 
@@ -82,7 +93,7 @@ pub fn Sidebar(name: String, email: String, avatar_url: String) -> Element {
     let logout_label = t(locale_val, "common.logout");
 
     rsx! {
-        aside { class: "sidebar",
+        aside { class: "{class}",
             div { class: "sidebar-top-row",
                 SidebarHeader { name, email: email.clone(), avatar_url }
                 LocalePicker {}
@@ -104,7 +115,10 @@ pub fn Sidebar(name: String, email: String, avatar_url: String) -> Element {
                         };
                         let cls = if is_active { "sidebar-link active" } else { "sidebar-link" };
                         rsx! {
-                            Link { to: item.route, class: cls,
+                            Link {
+                                to: item.route,
+                                class: cls,
+                                onclick: move |_| on_nav.call(()),
                                 {item.icon}
                                 span { "{item.label}" }
                             }