freyr 0.2.8

A UI component library for Dioxus web.
Documentation 
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

use crate::assets::navbar_style::NAVBAR_STYLES;
use crate::enums::navbar_enums::NavbarWithLogoConfig;
use crate::Orientation;
use dioxus::prelude::*;

/// This navbar works the same as the normal **navbar** component, but instead of taking a logo as _String_ it takes an _image_.
///
/// # Examples
///
/// ```rust
///    #[component]
///    fn Navigation() -> Element {
///     const LOGO: Asset = asset!("./assets/logo.png");
///
///     let navbar_logo_config = NavbarWithLogoConfig {
///         background_color: ColorScheme::Freyr,
///         nav_items: vec!["Home".to_string(), "About".to_string(), "Contact".to_string()],
///         nav_links: vec!["/".to_string(), "/about".to_string(), "/contact".to_string()],
///         orientation: Some(Orientation::Center),
///         nav_item_color: NavItemsColor::Light,
///         icon_color: IconColor::White,
///         logo_url: String::from("/"),
///         logo_src: LOGO,
///         logo_alt: String::from("logo"),
///     };
///
///     rsx! {
///         NavbarWithLogo { navbar_logo_config }
///         Outlet::<Route> {}
///     }
///    }
/// ```
#[component]
pub fn NavbarWithLogo(navbar_logo_config: NavbarWithLogoConfig) -> Element {
    let mut menu_open = use_signal(|| false);
    let orientation_class = match navbar_logo_config
        .orientation
        .clone()
        .unwrap_or(Orientation::Right)
    {
        Orientation::Left => "menu-items left",
        Orientation::Center => "menu-items center",
        Orientation::Right => "menu-items right",
    };

    rsx! {
        div {
            style { "{NAVBAR_STYLES}" }

            nav {
                class: "navbar",
                style: "background-color: {navbar_logo_config.background_color.as_css_class()};",

                div { class: "nav-div",

                    Link { to: "{navbar_logo_config.logo_url}",
                        img {
                            class: "nav-logo",
                            src: "{navbar_logo_config.logo_src}",
                            alt: "{navbar_logo_config.logo_alt}",
                        }
                    }

                    button {
                        class: "hamburger",
                        onclick: move |_| menu_open.set(!menu_open()),

                        match menu_open() {
                            true => {
                                rsx! {
                                    svg {
                                        xmlns: "http://www.w3.org/2000/svg",
                                        width: "32",
                                        height: "32",
                                        view_box: "0 0 24 24",
                                        fill: "none",
                                        stroke: "{navbar_logo_config.icon_color.as_css_class()}",
                                        stroke_width: "2",
                                        stroke_linecap: "round",
                                        stroke_linejoin: "round",
                                        path { d: "M18 6L6 18M6 6L18 18" }
                                    }
                                }
                            }
                            false => {
                                rsx! {
                                    svg {
                                        xmlns: "http://www.w3.org/2000/svg",
                                        width: "32",
                                        height: "32",
                                        view_box: "0 0 24 24",
                                        fill: "none",
                                        stroke: "{navbar_logo_config.icon_color.as_css_class()}",
                                        stroke_width: "2",
                                        stroke_linecap: "round",
                                        stroke_linejoin: "round",
                                        path { d: "M4 6h16M4 12h16M4 18h16" }
                                    }
                                }
                            }
                        }
                    }
                }

                div {
                    class: match menu_open() {
                        true => "menu open",
                        false => "menu",
                    },
                    style: "background-color: {navbar_logo_config.background_color.as_css_class()};",

                    div { class: "{orientation_class}",
                        for (item , link) in navbar_logo_config.nav_items.iter().zip(navbar_logo_config.nav_links.iter()) {
                            Link {
                                class: "menu-item",
                                to: "{link}",
                                style: "color: {navbar_logo_config.nav_item_color.as_css_class()};",
                                onclick: move |_| menu_open.set(false),
                                "{item}"
                            }
                        }
                    }
                }
            }
        }
    }
}