From e861b8a5bed12c45b638f7bba592f9bc9f9a5872 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Wed, 3 Jun 2026 18:32:43 +0800
Subject: [PATCH] feat: add FrontendLayout component with Header, Footer and
 Outlet

- New FrontendLayout component wraps all frontend pages with shared
  Header (with nav items and theme toggle) and Footer
- Uses Outlet::<Route> to render child route components
- Similar pattern to existing AdminLayout but without auth checks
- Registered in components/mod.rs

This is the first step toward eliminating page transition flicker by
keeping Header/Footer mounted while only the main content area swaps.
---
 src/components/frontend_layout.rs | 23 +++++++++++++++++++++++
 src/components/mod.rs             |  1 +
 2 files changed, 24 insertions(+)
 create mode 100644 src/components/frontend_layout.rs

diff --git a/src/components/frontend_layout.rs b/src/components/frontend_layout.rs
new file mode 100644
index 0000000..4035c63
--- /dev/null
+++ b/src/components/frontend_layout.rs
@@ -0,0 +1,23 @@
+use dioxus::prelude::*;
+
+use crate::components::footer::Footer;
+use crate::components::header::Header;
+use crate::components::nav::use_nav_items;
+use crate::router::Route;
+use crate::theme::ThemeToggle;
+
+#[component]
+pub fn FrontendLayout() -> Element {
+    let route = use_route::<Route>();
+    let nav_items = use_nav_items(route);
+
+    rsx! {
+        div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20] transition-colors duration-300",
+            Header { nav_items, right_content: rsx! { ThemeToggle {} } }
+            main { class: "flex-1 w-full max-w-3xl mx-auto px-6 py-6",
+                Outlet::<Route> {}
+            }
+            Footer {}
+        }
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 9dba92a..ee4f14b 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1,6 +1,7 @@
 pub mod admin_layout;
 pub mod admin_skeleton;
 pub mod footer;
+pub mod frontend_layout;
 pub mod header;
 pub mod nav;
 pub mod page_layout;