navbar.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as brand from "/assets/brand/brand.js";
import { AnimateCSS } from "/services/common/common.js";

// local variables
let user;
let menu;

export function mount(mountpoint) {
  const where = document.getElementById(mountpoint);
  window.document.title = brand.windowTitle;
  where.innerHTML = /* HTML */ `
    <div class="navbar-brand">
      <a class="navbar-item is-size-4" href="/"
        ><img src="assets/brand/logo.png" alt="logo" />${brand.navTitle}</a
      >
      <a
        role="button"
        id="navbar-burger"
        class="navbar-burger burger"
        aria-label="menu"
        aria-expanded="false"
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div id="navbar-menu" class="navbar-menu"></div>
  `;
  // Hamburger menu
  const burger = document.getElementById("navbar-burger");
  menu = document.getElementById("navbar-menu");
  const openClose = (e) => {
    if (burger.classList.contains("is-active")) {
      AnimateCSS(menu, "slideOutRight", function () {
        menu.classList.remove("is-active");
        burger.classList.remove("is-active");
      });
    } else {
      if (e.srcElement == burger) {
        menu.classList.add("is-active");
        burger.classList.add("is-active");
        AnimateCSS(menu, "slideInRight");
      }
    }
  };
  burger.addEventListener("click", openClose);
  menu.addEventListener("click", openClose);
  CreateMenu();
}

export async function CreateMenu() {
  user = await Auth.GetUser();
  menu.innerHTML = `
        <div class="navbar-start">
          ${
            user === undefined
              ? ``
              : /* HTML */ `
                  <a class="navbar-item" href="#home"
                    ><i class="navbar-menu-icon fas fa-home"></i>Accueil</a
                  >
                  <a class="navbar-item" href="#visualization"
                    ><i class="navbar-menu-icon fas fa-poll"></i>Résultats</a
                  >
                  ${user.role == "ADMIN" || "CAPTURER"
                    ? /* HTML */ `
                        <a class="navbar-item" href="#votes"
                          ><i class="navbar-menu-icon fas fa-vote-yea"></i
                          >Votes</a
                        >
                      `
                    : ""}
                  ${user.role == "ADMIN"
                    ? /* HTML */ `
                        <a class="navbar-item" href="#management"
                          ><i class="navbar-menu-icon fas fa-edit"></i
                          >Gestion</a
                        >
                        <a class="navbar-item" href="#users"
                          ><i class="navbar-menu-icon fas fa-users"></i
                          >Utilisateurs</a
                        >
                      `
                    : ""}
                `
          }
        </div>
        <div class="navbar-end">
          ${
            user === undefined
              ? /* HTML */ `
                  <a class="navbar-item" href="#login"
                    ><i class="navbar-menu-icon fas fa-sign-in-alt"></i
                    >Connexion</a
                  >
                `
              : /* HTML */ `
                  <a class="navbar-item" href="/Logout"
                    ><i class="navbar-menu-icon fas fa-sign-out-alt"></i
                    >Déconnexion</a
                  >
                `
          }
        </div>
     `;
}