Struct yew_styles::navbar::navbar_component::Navbar

pub struct Navbar {
    pub link: ComponentLink<Self>,
    pub props: NavbarProps,
    pub display_menu: bool,
}

Navbar component

Features required

navbar

Example

use yew::prelude::*;
use yew::services::ConsoleService;
use yew_styles::{
    navbar::{
        navbar_component::{Fixed, Navbar},
        navbar_container::NavbarContainer,
        navbar_item::NavbarItem,
    },
    styles::{Palette, Style},
    layouts::{
        container::{JustifyContent, Mode},
    },
};

pub struct App {
  link: ComponentLink<Self>,
  close_navbar_mobile: bool,
}

pub enum Msg {
  ChangeMenu(String),
  CloseNavarMobile(MouseEvent),
}
#[derive(Clone, Properties)]
pub struct Props {}

impl Component for App {
    type Message = Msg;
    type Properties = Props;

    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
        App {
            link
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::ChangeMenu(menu) => {
                ConsoleService::log(&format!("{}", menu));
            }
            Msg::CloseNavarMobile(mouse_event) => {
                let target_class = mouse_event
                    .target()
                    .unwrap()
                    .dyn_into::<Element>()
                    .unwrap()
                    .class_list();

                let target_parent = mouse_event
                    .target()
                    .unwrap()
                    .dyn_into::<Element>()
                    .unwrap()
                    .parent_element()
                    .unwrap()
                    .tag_name();

                if !target_class.value().contains("navbar-menu") && target_parent != "svg" {
                    self.close_navbar_mobile = true;
                } else {
                    self.close_navbar_mobile = false
                }
            }
        }
        false
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        false
    }

    fn view(&self) -> Html {
       html! {
           <div onclick=self.link.callback(|e| Msg::CloseNavarMobile(e))>
                <Navbar
                    fixed=Fixed::None
                    navbar_style=Style::Light
                    navbar_palette=Palette::Info
                    hide_navbar_items_mobile = self.close_navbar_mobile
                    branch=html!{<img src="/assets/spielrs_logo.png"></img>}>
                        <NavbarContainer justify_content=JustifyContent::FlexStart(Mode::NoMode)>
                            <NavbarItem
                                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Home")))>
                                <span>{"Home"}</span>
                            </NavbarItem>
                            <NavbarItem
                                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Shop")))>
                                <span>{"Shop"}</span>
                            </NavbarItem>
                            <NavbarItem
                                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Shop")))>
                                <span>{"Shop"}</span>
                            </NavbarItem>
                            <NavbarItem
                                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("About us")))>
                                <span>{"About us"}</span>
                            </NavbarItem>
                            <NavbarItem
                                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Contact")))>
                                <span>{"Contact"}</span>
                            </NavbarItem>
                        </NavbarContainer>
                 </Navbar>
            </div>
        }
    }
}

Fields

link: ComponentLink<Self>

props: NavbarProps

display_menu: bool

Trait Implementations

impl Component for Navbar

type Message = Msg

Messages are used to make Components dynamic and interactive. Simple Component’s can declare their Message type to be (). Complex Component’s commonly use an enum to declare multiple Message types.

type Properties = Props

Properties are the inputs to a Component and should not mutated within a Component. They are passed to a Component using a JSX-style syntax.

fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self

Components are created with their properties as well as a ComponentLink which can be used to send messages and create callbacks for triggering updates.

fn update(&mut self, msg: Self::Message) -> ShouldRender

Components handle messages in their update method and commonly use this method to update their state and (optionally) re-render themselves.

fn rendered(&mut self, first_render: bool)

The rendered method is called after each time a Component is rendered but before the browser updates the page.

fn change(&mut self, props: Self::Properties) -> ShouldRender

When the parent of a Component is re-rendered, it will either be re-created or receive new properties in the change lifecycle method. Component’s can choose to re-render if the new properties are different than the previously received properties. Most Component’s will use props with a PartialEq impl and will be implemented like this:

fn view(&self) -> Html

Components define their visual layout using a JSX-style syntax through the use of the html! procedural macro. The full guide to using the macro can be found in Yew’s documentation.

fn destroy(&mut self)

The destroy method is called right before a Component is unmounted.