use leptos::prelude::*;

#[component]
pub fn Navbar() -> impl IntoView {
    let (active, set_active) = signal(false);

    view! {
      <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
          <a class="navbar-item has-text-primary is-uppercase" href="/">
            tlater
          </a>

          <a
            role="button"
            on:click=move |_| { set_active.update(|active: &mut bool| *active = !*active) }
            class="navbar-burger"
            class=("is-active", move || active.get())
            aria-label="menu"
            aria-controls="main-navigation"
            aria-expanded=move || if active.get() { "true" } else { "false" }
          >
            <span aria-hidden="true" />
            <span aria-hidden="true" />
            <span aria-hidden="true" />
            <span aria-hidden="true" />
          </a>
        </div>

        <div id="main-navigation" class="navbar-menu" class=("is-active", move || active.get())>
          <div class="navbar-start">
            <a class="navbar-item" href="/mail">
              "E-Mail"
            </a>
            <a class="navbar-item" href="https://www.gitlab.com/tlater">
              GitLab
            </a>
            <a class="navbar-item" href="https://www.github.com/TLATER">
              GitHub
            </a>
          </div>
        </div>
      </nav>
    }
}