Added wireframe layout leptos

This commit is contained in:
xeovalyte 2024-02-12 14:43:50 +01:00
parent ce2cac6103
commit 3cdbfe78f9
No known key found for this signature in database
9 changed files with 112 additions and 6 deletions

View File

@ -37,3 +37,41 @@ a {
font-weight: bold;
color: $text-color;
}
.route-active {
color: $primary-color !important;
}
.navbar {
background-color: $secondary-bg-color;
width: 100%;
display: flex;
justify-content: center;
padding: 8px;
}
.navbar > a {
margin: 0px 20px;
padding: 8px 16px;
border-radius: 8px;
transition: all 100ms;
}
.navbar > a:hover {
background-color: $primary-color-light;
color: $text-color !important;
}
.btn-add-link {
width: 100%;
padding: 12px 0;
background-color: $secondary-bg-color;
text-align: center;
border-radius: 15px;
border: dashed $secondary-bg-color-lighter;
}
.btn-add-link:hover {
background-color: $secondary-bg-color-light;
}

View File

@ -1,2 +1 @@
pub mod navbar;

View File

@ -0,0 +1,14 @@
use leptos::*;
use leptos_router::*;
/// Navigation bar
#[component]
pub fn Navbar() -> impl IntoView {
view! {
<div class="navbar">
<A href="/" active_class="route-active">Home</A>
<A href="/participants" active_class="route-active">Deelnemers</A>
<A href="/times" active_class="route-active">Tijden</A>
</div>
}
}

View File

@ -9,6 +9,8 @@ mod pages;
// Top-Level pages
use crate::pages::home::Home;
use crate::pages::not_found::NotFound;
use crate::pages::participants;
use crate::pages::times;
/// An app router which renders the homepage and handles 404's
#[component]
@ -49,10 +51,16 @@ pub fn App() -> impl IntoView {
}
>
<Router>
<components::navbar::Navbar />
<main>
<Routes>
<Route path="/" view=Home />
<Route path="/participants" view=participants::Participants />
<Route path="/participants/add" view=participants::add::Add />
<Route path="/times" view=times::Times />
<Route path="/*" view=NotFound />
</Routes>
</main>
</Router>
</ErrorBoundary>

View File

@ -1,2 +1,4 @@
pub mod home;
pub mod not_found;
pub mod participants;
pub mod times;

View File

@ -0,0 +1,12 @@
use leptos::*;
use leptos_router::*;
pub mod add;
/// Default Home Page
#[component]
pub fn Participants() -> impl IntoView {
view! {
<A class="btn-add-link" href="/participants/add">"Deelnemer toevoegen"</A>
}
}

View File

@ -0,0 +1,9 @@
use leptos::*;
/// Navigation bar
#[component]
pub fn Add() -> impl IntoView {
view! {
<h1>"Deelnemer toevoegen"</h1>
}
}

View File

@ -0,0 +1,15 @@
use leptos::*;
pub mod add;
/// Default Home Page
#[component]
pub fn Times() -> impl IntoView {
view! {
<div class="container">
<h1>"Tijden"</h1>
</div>
}
}

View File

@ -0,0 +1,9 @@
use leptos::*;
/// Navigation bar
#[component]
pub fn Add() -> impl IntoView {
view! {
<h1>"Deelnemer toevoegen"</h1>
}
}