Fix #46 : mise à jour de la navbar pour prendre en compte la "page courante" #53
@ -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 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-32 {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.h-96 {
|
||||
height: 24rem;
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.h-2\.5 {
|
||||
height: 0.625rem;
|
||||
}
|
||||
|
||||
.h-9 {
|
||||
height: 2.25rem;
|
||||
.h-32 {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-7 {
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
.h-96 {
|
||||
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 {
|
||||
border-radius: 9999px;
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
.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);
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
use axum::Router;
|
||||
|
||||
mod hello;
|
||||
mod nav;
|
||||
pub mod nav;
|
||||
mod profile;
|
||||
|
||||
pub fn get_routes() -> Router {
|
||||
|
||||
@ -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))
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<div
|
||||
id="nav-menu-desktop"
|
||||
hx-get="/nav/menu?mobile=false"
|
||||
hx-target="this"
|
||||
hx-trigger="load"
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<div
|
||||
id="nav-menu-mobile"
|
||||
hx-get="/nav/menu?mobile=true"
|
||||
hx-target="this"
|
||||
hx-trigger="load"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user