Added wireframe layout leptos

application/public/styles.scss

@@ -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;
+}
+

application/src/components/mod.rs

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

application/src/components/navbar.rs

@@ -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>
+    }
+}

application/src/lib.rs

@@ -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>
-                <Routes>
+                <components::navbar::Navbar />
-                    <Route path="/" view=Home />
+                <main>
-                    <Route path="/*" view=NotFound />
+                    <Routes>
-                </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>

application/src/pages/mod.rs

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

application/src/pages/participants.rs

@@ -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>
+    }
+}

application/src/pages/participants/add.rs

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

application/src/pages/times.rs

@@ -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>
+    }
+}

application/src/pages/times/add.rs

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