tallyweb_frontend/elements/
navbar.rs

1use super::*;
2use components::{CloseOverlays, ShowSidebar, ToolTip};
3use leptos::*;
4use leptos_router::A;
5
6#[component]
7pub fn Navbar(
8    #[prop(default=true.into(), into)] has_sidebar: MaybeSignal<bool>,
9    #[prop(default=ShowSidebar(false).into(), into)] show_sidebar: RwSignal<ShowSidebar>,
10) -> impl IntoView {
11    let user = expect_context::<RwSignal<UserSession>>();
12    let preferences = expect_context::<RwSignal<Preferences>>();
13    let close_overlay_signal = expect_context::<RwSignal<CloseOverlays>>();
14
15    let accent_color = create_read_slice(preferences, |pref| pref.accent_color.0.clone());
16
17    let toggle_sidebar = move |_| show_sidebar.update(|s| s.0 = !s.0);
18    let close_overlays = move |_| close_overlay_signal.update(|_| ());
19
20    let home_img_ref = create_node_ref::<html::Img>();
21
22    view! {
23        <nav on:click=close_overlays>
24            <button
25                id="toggle-sidebar"
26                aria-label="toggle sidebar"
27                on:click=toggle_sidebar
28                disabled=move || !has_sidebar()
29            >
30                <i class="fa-solid fa-bars"></i>
31            </button>
32            <A href="/">
33                <img
34                    node_ref=home_img_ref
35                    src="/favicon.svg"
36                    width=48
37                    height=48
38                    alt="Home"
39                    class="tooltip-parent"
40                />
41                <ToolTip parent_node=home_img_ref>Home</ToolTip>
42            </A>
43
44            <div style:margin-left="auto" style:display="flex" style:align-items="center">
45                <StatusBar />
46                <AccountIcon username=move || user.get().username accent_color />
47            </div>
48        </nav>
49    }
50}
51
52#[component]
53pub fn StatusBar() -> impl IntoView {
54    view! {
55        <Show when=|| false>
56            <div id="status-bar">
57                <Show when=|| false>
58                    <svg
59                        style:width="24px"
60                        style:height="24px"
61                        viewBox="0 0 48 48"
62                        xmlns="http://www.w3.org/2000/svg"
63                    >
64                        <title>wifi-disable</title>
65                        <g id="Layer_2" data-name="Layer 2">
66                            <g id="invisible_box" data-name="invisible box">
67                                <rect width="48" height="48" fill="none"></rect>
68                            </g>
69                            <g id="Q3_icons" data-name="Q3 icons">
70                                <g>
71                                    <path
72                                        fill="currentColor"
73                                        d="M40.7,26.5a2,2,0,0,0-.2-2.6A23,23,0,0,0,24.3,17L29,21.7a18.6,18.6,0,0,1,8.7,5A1.9,1.9,0,0,0,40.7,26.5Z"
74                                    ></path>
75                                    <path
76                                        fill="currentColor"
77                                        d="M45.4,17.4A31.2,31.2,0,0,0,17.1,9.8l3.4,3.4L24,13a27.4,27.4,0,0,1,18.6,7.3,2,2,0,0,0,3-.2h0A2.1,2.1,0,0,0,45.4,17.4Z"
78                                    ></path>
79                                    <circle fill="currentColor" cx="24" cy="38" r="5"></circle>
80                                    <path
81                                        fill="currentColor"
82                                        d="M5.4,3.6a1.9,1.9,0,0,0-2.8,0,1.9,1.9,0,0,0,0,2.8L9,12.8H8.7L6.8,14.1l-.3.3L4.7,15.7l-.3.2L2.6,17.4a2.1,2.1,0,0,0-.2,2.7h0a2,2,0,0,0,3,.2l1.7-1.4.4-.3,1.8-1.3.3-.2,2-1.1h0l.4-.2,3,3-.5.2-.6.3-.8.4-.6.3-.8.5-.5.4-.8.5-.5.4-.9.7-.4.3a11.4,11.4,0,0,1-1.1,1.1,2,2,0,0,0-.6,1.4,2.8,2.8,0,0,0,.4,1.2,1.9,1.9,0,0,0,3,.2l1.2-1,.3-.3.9-.7.4-.3,1.1-.7h.2l1.4-.8h.4l1.1-.5.5-.2h.3l3.3,3.3a16,16,0,0,0-9.1,5.3,1.9,1.9,0,0,0-.4,1.2,2,2,0,0,0,.4,1.3,2,2,0,0,0,3.1,0A11.5,11.5,0,0,1,24,29h1.2L38.6,42.4a1.9,1.9,0,0,0,2.8,0,1.9,1.9,0,0,0,0-2.8Z"
83                                    ></path>
84                                </g>
85                            </g>
86                        </g>
87                    </svg>
88                </Show>
89            </div>
90        </Show>
91    }
92}
tallyweb_frontend/elements/navbar.rs

tallyweb_frontend/elements/
navbar.rs
