1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
use crate::{
components::{
Align,
button::{BtnState, BtnVariant, Button, ButtonIcon},
sidebar::NavItem,
user_navbutton::UserNavButton,
},
theme::ThemeToggle,
};
use leptos::prelude::*;
use phosphor_leptos::{LIST, X};
#[component]
pub fn AppHeader<Logo, Cart, IV, IB>(
#[prop()] logo: Logo,
#[prop()] cart: Cart,
#[prop()] nav_items: RwSignal<Vec<NavItem>>,
#[prop()] nav_items_user: RwSignal<Vec<NavItem>>,
) -> impl IntoView
where
Logo: Fn() -> IV,
IV: IntoView,
Cart: Fn() -> IB,
IB: IntoView,
{
let location = leptos_router::hooks::use_location();
let pathname = move || location.pathname.get();
let is_mobile_menu_open = RwSignal::new(false);
view! {
<header class="">
<div class="">
<div class="flex items-center h-16 gap-2 md:gap-5">
// Mobile navigation area
<div class="md:hidden flex items-center">
{move || {
view! {
<Button
variant=BtnVariant::Square
icon=match is_mobile_menu_open.get() {
true => ButtonIcon::Icon(&X),
false => ButtonIcon::Icon(&LIST),
}
on_click=Callback::new(move |_| {
is_mobile_menu_open.update(|v| *v = !*v)
})
/>
}
}}
</div>
<div class="flex items-center">{logo()}</div>
// Desktop navigation
<nav class="hidden md:flex items-center space-x-4">
<For
each=move || {
let current_path = pathname();
nav_items
.get()
.into_iter()
.map(move |item| { (item, current_path.clone()) })
.collect::<Vec<_>>()
}
key=|(item, path)| format!("{:#?}-{}", item, path)
children=move |(item, current_path)| {
match item {
NavItem::Link(item) => {
{
let href = item.url.clone();
let href2 = item.url.clone();
let is_active = current_path == href;
view! {
<Button
variant=BtnVariant::CallToAction
state=if is_active {
BtnState::Active
} else {
BtnState::Default
}
icon=item.icon.clone()
href=href2.clone()
>
{item.name}
</Button>
}
}
.into_any()
}
NavItem::Divider => view! { <div /> }.into_any(),
NavItem::Gap => view! { <div class="h-2 flex-1" /> }.into_any(),
}
}
/>
</nav>
<div class="flex-1" />
// <div class="hidden md:block">
// <ThemeToggle tooltip_align=Align::Bottom />
// </div>
{cart()}
<UserNavButton nav_items=nav_items_user />
</div>
// Mobile menu dropdown
<Show when=move || is_mobile_menu_open.get()>
<div
class="fixed top-0 left-0 w-screen h-screen opacity-0 cursor-default"
on:click=move |_| is_mobile_menu_open.set(false)
/>
<nav class="md:hidden pb-4">
<div class="flex flex-col space-y-1">
<For
each=move || nav_items.get()
key=|item| format!("{:#?}", item)
children=move |item| {
match item {
NavItem::Link(item) => {
{
let href = item.url.clone();
let is_active = move || pathname() == href;
view! {
<Button
variant=BtnVariant::Default
state=if is_active() {
BtnState::Active
} else {
BtnState::Default
}
on_click=Callback::new(move |_| {
is_mobile_menu_open.set(false);
window().location().set_href(&item.url).unwrap();
})
class="w-full text-left"
icon=item.icon.clone()
>
{item.name}
</Button>
}
}
.into_any()
}
NavItem::Divider => view! { <div /> }.into_any(),
NavItem::Gap => {
view! { <div class="h-2 flex-1" /> }.into_any()
}
}
}
/>
// <ThemeToggle tooltip_align=Align::Right />
</div>
</nav>
</Show>
</div>
</header>
}
}