Navbar component missing

[rhanka]

Navbar is a usefull component, which i awlays use it on web sites and even apps : matchid.io, previsecours.fr, ...

Unfortunately, I can't use this promising lib for now because of the Navbar component. Navbar is quite rich and the only real need of a component is in the "Burger" behavior, needed for responsiveness.

This lib seems very promising. Using a lib with bulma and *.js (vue, react) is always a question for me. And it has a relative big impact on the velocity of coding. This one seem very promising.

[jinxmcg]

I don't know if you really need a component for that, however you can just simply add this functionality just by adding the html and the javascript part straight from the https://bulma.io/documentation/components/navbar/ demo on the bulma.io site

it just works.

nav.svelte

the javascript and html (it is really copy paste from bulma.io demo)

 <script>
        import { onMount,afterUpdate } from 'svelte'
	onMount(() => {
		const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

		// Check if there are any navbar burgers
		if ($navbarBurgers.length > 0) {
			// Add a click event on each of them
			$navbarBurgers.forEach( el => {
				el.addEventListener('click', () => {
					// Get the target from the "data-target" attribute
					const target = el.dataset.target;
					const $target = document.getElementById(target);
					// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
					el.classList.toggle('is-active');
					$target.classList.toggle('is-active');
				});
			});
		}
	});
       // in case you want to close it after user selects a different menu option
	afterUpdate(() => {
		const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger.is-active,.navbar-menu.is-active'), 0);
		if ($navbarBurgers.length > 0) {
			$navbarBurgers.forEach( el => {
				el.classList.toggle('is-active');
			});
		}
	});	


</script>



<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item">
        Documentation
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

[abbychau]

I usually uses the native html code for navbar too.

Please comment here if you have any abstraction ideas.