Update examples, add css

examples/flat_router.rs

@@ -1,8 +1,18 @@
+//! This example shows how to use the `Router` component to create a simple navigation system.
+//! The more complex router example uses all of the router features, while this simple exmaple showcases
+//! just the `Layout` and `Route` features.
+//!
+//! Layouts let you wrap chunks of your app with a component. This is useful for things like a footers, heeaders, etc.
+//! Routes are enum variants with that match the name of a component in scope. This way you can create a new route
+//! in your app simply by adding the variant to the enum and creating a new component with the same name. You can
+//! override this of course.
+
 use dioxus::prelude::*;
 
 fn main() {
     launch(|| {
         rsx! {
+            style { {include_str!("./assets/flat_router.css")} }
             Router::<Route> {}
         }
     })
@@ -11,7 +21,7 @@ fn main() {
 #[derive(Routable, Clone)]
 #[rustfmt::skip]
 enum Route {
-    #[layout(Footer)]
+    #[layout(Footer)] // wrap the entire app in a footer
         #[route("/")]
         Home {},
 
@@ -28,45 +38,47 @@ enum Route {
 #[component]
 fn Footer() -> Element {
     rsx! {
-        Outlet::<Route> {}
-        p { "----" }
         nav {
-            style { {STYLE} }
             Link { to: Route::Home {}, class: "nav-btn", "Home" }
             Link { to: Route::Games {}, class: "nav-btn", "Games" }
             Link { to: Route::Play {}, class: "nav-btn", "Play" }
             Link { to: Route::Settings {}, class: "nav-btn", "Settings" }
         }
+        div { id: "content",
+            Outlet::<Route> {}
+        }
     }
 }
 
 #[component]
 fn Home() -> Element {
-    rsx!("Home")
+    rsx!(
+        h1 { "Home" }
+        p { "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }
+    )
 }
 
 #[component]
 fn Games() -> Element {
-    rsx!("Games")
+    rsx!(
+        h1 { "Games" }
+        // Dummy text that talks about video games
+        p { "Lorem games are sit amet  Sed do eiusmod tempor et dolore magna aliqua." }
+    )
 }
 
 #[component]
 fn Play() -> Element {
-    rsx!("Play")
+    rsx!(
+        h1 { "Play" }
+        p { "Always play with your full heart adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }
+    )
 }
 
 #[component]
 fn Settings() -> Element {
-    rsx!("Settings")
+    rsx!(
+        h1 { "Settings" }
+        p { "Settings are consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }
+    )
 }
-
-const STYLE: &str = r#"
-    nav {
-        display: flex;
-        justify-content: space-around;
-    }
-    .nav-btn {
-        text-decoration: none;
-        color: black;
-    }
-"#;