diff options
| author | Ashelyn Rose <git@ashen.earth> | 2025-03-22 14:51:36 -0600 |
|---|---|---|
| committer | Ashelyn Rose <git@ashen.earth> | 2025-03-22 14:51:36 -0600 |
| commit | 63e2395caf4ae93ebde96d97e12fc946af1e9ac9 (patch) | |
| tree | 2f5dbca4da84a99398b6677726621881bb04c037 /src | |
| parent | b18f08e8899b5a98dd3e1f8439ad812951a04cd9 (diff) | |
Component styles and hot-reloading
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/app.rs | 17 | ||||
| -rw-r--r-- | src/components/layout/layout.module.css | 34 | ||||
| -rw-r--r-- | src/components/layout/mod.rs | 26 | ||||
| -rw-r--r-- | src/components/mod.rs | 2 |
4 files changed, 71 insertions, 8 deletions
diff --git a/src/components/app.rs b/src/components/app.rs index 0a5ed80..7e2676a 100644 --- a/src/components/app.rs +++ b/src/components/app.rs @@ -1,10 +1,11 @@ use leptos::prelude::*; use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title}; use leptos_router::{ - components::{Route, Router, Routes}, - StaticSegment, + components::{ParentRoute, Route, Router, Routes}, path, StaticSegment }; +use crate::components::layout::Layout; + pub fn shell(options: LeptosOptions) -> impl IntoView { view! { <!DOCTYPE html> @@ -38,17 +39,17 @@ pub fn App() -> impl IntoView { // content for this welcome page <Router> - <main> - <Routes fallback=|| "Page not found.".into_view()> - <Route path=StaticSegment("") view=HomePage/> - </Routes> - </main> + <Routes fallback=|| "Page not found.".into_view()> + <ParentRoute path=path!("/") view=Layout> + <Route path=path!("/") view=HomePage/> + </ParentRoute> + </Routes> </Router> } } /// Renders the home page of your application. -#[island] +#[component] fn HomePage() -> impl IntoView { // Creates a reactive value to update the button let count = RwSignal::new(0); diff --git a/src/components/layout/layout.module.css b/src/components/layout/layout.module.css new file mode 100644 index 0000000..5b9ccc2 --- /dev/null +++ b/src/components/layout/layout.module.css @@ -0,0 +1,34 @@ +main.layout { + min-height: 100vh; + display: grid; + max-width: 1000px; + margin: 0 auto; + grid-template-columns: 200px 1fr; + grid-template-rows: 200px 1fr 100px auto; +} + +.layout header { + display: flex; + grid-row: 1 / 2; + grid-column: 1 / 3; +} + +.layout nav { + grid-row: 2 / 3; + grid-column: 1 / 2; +} + +.layout article { + grid-row: 2 / 3; + grid-column: 2 / 3; +} + +.layout footer { + grid-column: 1 / 3; + grid-row: 3 / 4; +} + +.layout::after { + grid-column: 1 / 3; + grid-row: 4 / 5; +} diff --git a/src/components/layout/mod.rs b/src/components/layout/mod.rs new file mode 100644 index 0000000..6ec37da --- /dev/null +++ b/src/components/layout/mod.rs @@ -0,0 +1,26 @@ +use leptos::prelude::*; +use leptos::component; +use leptos_router::components::Outlet; + +stylance::import_crate_style!(styles, "src/components/layout/layout.module.css"); + +#[component] +pub fn Layout() -> impl IntoView { + view! { + <main class=styles::layout> + <header> + <h1>Site Title</h1> + </header> + <nav> + <p>Nav</p> + </nav> + <article> + <p>Article</p> + <Outlet/> + </article> + <footer> + <p>Footer</p> + </footer> + </main> + } +} diff --git a/src/components/mod.rs b/src/components/mod.rs index 20df27e..62ca08a 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,3 +1,5 @@ +pub mod layout; + pub mod app; pub use app::App; |