crates/app/assets/css/style.css

@@ -599,6 +599,22 @@ video {
   margin-right: -0.5rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-2\.5 {
+  margin-bottom: 0.625rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.me-3 {
+  margin-inline-end: 0.75rem;
+}
+
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -615,30 +631,10 @@ video {
   margin-top: 0.75rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
-.mb-2\.5 {
-  margin-bottom: 0.625rem;
-}
-
-.me-3 {
-  margin-inline-end: 0.75rem;
-}
-
 .block {
   display: block;
 }
@@ -667,48 +663,44 @@ video {
   height: 4rem;
 }
 
-.h-6 {
+.h-2 {
-  height: 1.5rem;
+  height: 0.5rem;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.h-32 {
-  height: 8rem;
-}
-
-.h-48 {
-  height: 12rem;
-}
-
-.h-96 {
-  height: 24rem;
 }
 
 .h-2\.5 {
   height: 0.625rem;
 }
 
-.h-9 {
+.h-32 {
-  height: 2.25rem;
+  height: 8rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
+.h-6 {
+  height: 1.5rem;
 }
 
 .h-7 {
   height: 1.75rem;
 }
 
-.h-2 {
+.h-8 {
-  height: 0.5rem;
+  height: 2rem;
 }
 
-.h-4 {
+.h-96 {
-  height: 1rem;
+  height: 24rem;
+}
+
+.h-full {
+  height: 100%;
 }
 
 .min-h-full {
@@ -719,6 +711,10 @@ video {
   width: 2.5rem;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
 .w-48 {
   width: 12rem;
 }
@@ -735,34 +731,18 @@ video {
   width: auto;
 }
 
-.w-32 {
-  width: 8rem;
-}
-
-.w-20 {
-  width: 5rem;
-}
-
-.w-24 {
-  width: 6rem;
-}
-
-.w-28 {
-  width: 7rem;
-}
-
 .max-w-7xl {
   max-width: 80rem;
 }
 
-.max-w-xs {
-  max-width: 20rem;
-}
-
 .max-w-sm {
   max-width: 24rem;
 }
 
+.max-w-xs {
+  max-width: 20rem;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -811,30 +791,30 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
-.rounded-full {
+.rounded {
-  border-radius: 9999px;
+  border-radius: 0.25rem;
 }
 
-.rounded-md {
+.rounded-full {
-  border-radius: 0.375rem;
+  border-radius: 9999px;
 }
 
 .rounded-lg {
   border-radius: 0.5rem;
 }
 
-.rounded {
+.rounded-md {
-  border-radius: 0.25rem;
+  border-radius: 0.375rem;
-}
-
-.border-2 {
-  border-width: 2px;
 }
 
 .border {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -857,11 +837,6 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -872,6 +847,11 @@ video {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -947,6 +927,11 @@ video {
   letter-spacing: -0.025em;
 }
 
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -967,13 +952,10 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-gray-200 {
+.shadow {
-  --tw-text-opacity: 1;
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  color: rgb(229 231 235 / var(--tw-text-opacity));
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-}
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-
-.opacity-0 {
-  opacity: 0;
 }
 
 .shadow-lg {
@@ -982,12 +964,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);

crates/app/src/templates/mod.rs

@@ -1,7 +1,7 @@
 use axum::Router;
 
 mod hello;
-mod nav;
+pub mod nav;
 mod profile;
 
 pub fn get_routes() -> Router {

crates/app/src/templates/nav.rs

@@ -8,6 +8,12 @@ struct MenuItem {
     current: bool,
 }
 
+#[derive(Deserialize, PartialEq)]
+pub enum MenuItems {
+    Home,
+    Cps,
+}
+
 #[derive(Deserialize)]
 struct MenuParameters {
     mobile: bool,
@@ -15,7 +21,7 @@ struct MenuParameters {
 
 #[derive(Template)]
 #[template(path = "layout/nav/nav-menu-items.html")]
-struct MenuTemplate {
+pub struct MenuTemplate {
     mobile: bool,
     items: Vec<MenuItem>,
 }
@@ -37,24 +43,28 @@ impl MenuTemplate {
     }
 }
 
-async fn menu(Query(params): Query<MenuParameters>) -> MenuTemplate {
+pub fn build_menu(mobile: bool, current: MenuItems) -> MenuTemplate {
     MenuTemplate {
-        mobile: params.mobile,
+        mobile,
         items: vec![
             MenuItem {
                 label: "Accueil".to_string(),
                 href: "/pages/home".to_string(),
-                current: true,
+                current: current == MenuItems::Home,
             },
             MenuItem {
                 label: "CPS".to_string(),
                 href: "/pages/cps".to_string(),
-                current: false,
+                current: current == MenuItems::Cps,
             },
         ],
     }
 }
 
+async fn menu(Query(params): Query<MenuParameters>) -> MenuTemplate {
+    build_menu(params.mobile, MenuItems::Home)
+}
+
 pub fn get_routes() -> Router {
     Router::new().route("/menu", routing::get(menu))
 }

crates/app/templates/layout/nav.html

@@ -6,7 +6,9 @@
     <div class="flex h-16 justify-between">
       <div class="flex">
         {% include "layout/nav/logo.html" %}
-        <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
+        <div id="nav-menu-desktop"
+             class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8"
+        >
           {% include "layout/nav/desktop/menu-items.html" %}
         </div>
       </div>
@@ -25,7 +27,9 @@
     x-show="menuOpen"
     x-cloak
   >
-    <div class="space-y-1 pb-3 pt-2">
+    <div id="nav-menu-mobile"
+         class="space-y-1 pb-3 pt-2"
+    >
       {% include "layout/nav/mobile/menu-items.html" %}
     </div>
     <div class="border-t border-gray-200 pb-3 pt-4">

crates/app/templates/layout/nav/desktop/menu-items.html

@@ -1,5 +1,4 @@
 <div
-  id="nav-menu-desktop"
   hx-get="/nav/menu?mobile=false"
   hx-target="this"
   hx-trigger="load"

crates/app/templates/layout/nav/mobile/menu-items.html

@@ -1,5 +1,4 @@
 <div
-  id="nav-menu-mobile"
   hx-get="/nav/menu?mobile=true"
   hx-target="this"
   hx-trigger="load"

crates/app/templates/pages/cps.html

@@ -2,6 +2,20 @@
     CPS
 </h3>
 
+<div
+  id="nav-menu-desktop"
+  hx-swap-oob="innerHTML"
+>
+  {{ crate::templates::nav::build_menu(false, crate::templates::nav::MenuItems::Cps)|safe }}
+</div>
+
+<div
+  id="nav-menu-mobile"
+  hx-swap-oob="innerHTML"
+>
+  {{ crate::templates::nav::build_menu(true, crate::templates::nav::MenuItems::Cps)|safe }}
+</div>
+
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
   <div
     class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"

crates/app/templates/pages/home.html

@@ -2,6 +2,20 @@
     Accueil
 </h3>
 
+<div
+  id="nav-menu-desktop"
+  hx-swap-oob="innerHTML"
+>
+  {{ crate::templates::nav::build_menu(false, crate::templates::nav::MenuItems::Home)|safe }}
+</div>
+
+<div
+  id="nav-menu-mobile"
+  hx-swap-oob="innerHTML"
+>
+  {{ crate::templates::nav::build_menu(true, crate::templates::nav::MenuItems::Home)|safe }}
+</div>
+
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
   <div
     class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"