57 lines
2.5 KiB
Rust
57 lines
2.5 KiB
Rust
use yew::prelude::*;
|
|
use yew_router::prelude::use_navigator;
|
|
|
|
use crate::{routes::main_router::{Route}, constants::{NAVBAR_TITLE, NAVBAR_COL_LANDING, NAVBAR_COL_PROYECTOS_ACABADOS, NAVBAR_COL_CONTACTO, NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION}, pages::search::PropertyState};
|
|
//use yew_router::prelude::use_navigator;
|
|
|
|
|
|
#[function_component(NavigationBar)]
|
|
pub fn navigation_bar() -> Html {
|
|
let navigator = use_navigator().unwrap();
|
|
let cloned_navigator_1 = navigator.clone();
|
|
let cloned_navigator_2 = navigator.clone();
|
|
let cloned_navigator_3 = navigator.clone();
|
|
let cloned_navigator_4 = navigator.clone();
|
|
let cloned_navigator_5 = navigator.clone();
|
|
|
|
let navbar_toggle = use_state(|| true);
|
|
let on_click_hamburger = {
|
|
let navbar_toggle = navbar_toggle.clone();
|
|
Callback::from(move |_| navbar_toggle.set(!*navbar_toggle))
|
|
};
|
|
|
|
html! {
|
|
<div class={"navbar-background"}>
|
|
<div class={"navbar-container"}>
|
|
<div class={"navbar-brand-container"} onclick={move |_| cloned_navigator_5.push(&Route::LandingPage)}>
|
|
<img class={"navbar-image"} src="images/remax-logo.png" alt=""/>
|
|
<div class={"navbar-title"}>
|
|
{NAVBAR_TITLE}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class={if *navbar_toggle {"navbar-closed"} else {"navbar-open"}}>
|
|
<div onclick={move |_| cloned_navigator_1.push(&Route::LandingPage)} class={"navbar-item"}>
|
|
{NAVBAR_COL_LANDING}
|
|
</div>
|
|
|
|
<div onclick={move |_| cloned_navigator_2.push(&Route::Search { property_state: PropertyState::Finished })} class={"navbar-item"}>
|
|
{NAVBAR_COL_PROYECTOS_ACABADOS}
|
|
</div>
|
|
|
|
<div onclick={move |_| cloned_navigator_3.push(&Route::Search { property_state: PropertyState::InConstruction })} class={"navbar-item"}>
|
|
{NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION}
|
|
</div>
|
|
|
|
<div onclick={move |_| cloned_navigator_4.push(&Route::Contact)} class={"navbar-item"}>
|
|
{NAVBAR_COL_CONTACTO}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class={"navbar-hamburger"} onclick={on_click_hamburger}>
|
|
<i class="fa-solid fa-bars" ></i>
|
|
</div>
|
|
</div>
|
|
}
|
|
} |