---
import { Navbar } from "react-bulma-components"
import { Icon } from 'astro-icon/components'
---

<Navbar id="navbar">
  <Navbar.Brand>
    <Navbar.Item href="/">
      <img src="/assets/icon-64.webp" alt="Navigation bar logo" style="width: auto">
      <div style="width: 15px"></div>
      <p class="is-size-4"><b><i>MassiveBox</i></b></p>
    </Navbar.Item>
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </Navbar.Brand>

  <Navbar.Menu id="navMenu">
    <Navbar.Container align="right">
      <Navbar.Item href="/"><span class="icon-text"><span class="icon"><Icon name="fa6-solid:house" /></span><span>Home</span></span></Navbar.Item>
      <Navbar.Item href="/about"><span class="icon-text"><span class="icon"><Icon name="fa6-solid:user" /></span><span>About</span></span></Navbar.Item>
      <Navbar.Item href="/blog"><span class="icon-text"><span class="icon"><Icon name="fa6-solid:rss" /></span><span>Blog</span></span></Navbar.Item>
      <Navbar.Item id="theme-btn"><span class="icon-text"><span class="icon"><Icon name="fa6-solid:lightbulb" /></span><span class="is-hidden-desktop">Toggle Theme</span></span></Navbar.Item>
    </Navbar.Container>
  </Navbar.Menu>
</Navbar>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
    $navbarBurgers.forEach( el => {
      el.addEventListener('click', () => {
        const target = el.dataset.target;
        const $target = document.getElementById(target);
        el.classList.toggle('is-active');
        if($target != null) {
          $target.classList.toggle('is-active');
        }
      });
    });
  });
</script>