gitea_pages/frontend/src/components/navbar.rs

125 lines
4.4 KiB
Rust

use std::rc::Rc;
use yew::prelude::*;
use yew_router::prelude::*;
use yewdux::prelude::*;
use crate::{routes, stores};
pub enum Msg {
UpdateUser(Rc<stores::User>),
BurgerClicked,
Logout,
}
pub struct Navbar {
user: Rc<stores::User>,
user_dispatch: Dispatch<stores::User>,
burger_active: bool,
}
impl Component for Navbar {
type Message = Msg;
type Properties = ();
fn create(ctx: &Context<Self>) -> Self {
let user_dispatch = Dispatch::subscribe(ctx.link().callback(Msg::UpdateUser));
Self {
user: user_dispatch.get(),
user_dispatch,
burger_active: false,
}
}
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::UpdateUser(x) => {
self.user = x;
true
}
Msg::BurgerClicked => {
self.burger_active = !self.burger_active;
true
}
Msg::Logout => {
self.user_dispatch.set(stores::User(None));
true
}
}
}
fn view(&self, ctx: &Context<Self>) -> Html {
html! {
<header>
<nav
class={classes!("navbar", "is-primary")}
role="navigation"
aria-label="main navigation"
>
<div class={classes!("navbar-brand")}>
<Link<routes::Route> to={routes::Route::Index} classes={classes!("navbar-item")}>
<strong>{ "Gitea Pages" }</strong>
</Link<routes::Route>>
<a
role="button"
onclick={ctx.link().callback(|_| Msg::BurgerClicked)}
class={classes!("navbar-burger")}
aria-label="menu"
aria-expandable="false"
>
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
</a>
</div>
<div
class={classes!(
"navbar-menu",
"is-white",
if self.burger_active { Some("is-active") } else { None }
)}
>
<div class={classes!("navbar-end")}>
<a
href="https://git.dergrimm.net/dergrimm/gitea_pages"
target="_blank"
class={classes!("navbar-item")}
>
{ "Info" }
</a>
<div class={classes!("navbar-item")}>
<div class={classes!("buttons")}>
if self.user.logged_in() {
<button
onclick={ctx.link().callback(|_| Msg::Logout)}
class={classes!("button")}
>
<span class={classes!("icon", "is-small")}>
<i class={classes!("fa-solid", "fa-right-from-bracket")} />
</span>
<span>{ "Logout" }</span>
</button>
} else {
<Link<routes::Route> to={routes::Route::Login} classes={classes!("button")}>
<span class={classes!("icon", "is-small")}>
<i class={classes!("fa-solid", "fa-right-to-bracket")} />
</span>
<span>{ "Login" }</span>
</Link<routes::Route>>
}
</div>
</div>
</div>
</div>
</nav>
</header>
}
}
}