Tag: libraries

hamburgers by Jonathan Suh

TheSmithy

https://jonsuh.com/hamburgers/

https://discourse.roots.io/t/how-to-using-hamburgers-package-in-sage/11543

mmirus (2018):

Install:

yarn add hamburgers

Import in main.scss:

@import "~hamburgers/_sass/hamburgers/hamburgers";

Add the markup:
Probably in your header.blade.php partial.

<button class="hamburger hamburger--vortex" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

In this case, I’m using the ‘vortex’ type.

Customize as desired in _variables.scss:
Here’s what I used for my current project, but see the different types and the list of SASS variables in the page linked to above.

/** Hamburger icon */
$hamburger-padding-x: 0;
$hamburger-padding-y: 0;
$hamburger-layer-width: 20px;
$hamburger-layer-height: 2px;
$hamburger-layer-spacing: 4px;
$hamburger-layer-color: $brand-primary;
$hamburger-types: (vortex);

Again, I’m using the ‘vortex’ type here.

Add JS to make it functional to common.js:

export default {
  init() {
    // JavaScript to be fired on all pages
    $(".hamburger").click(function() {
      $(this).toggleClass("is-active");
    });
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  },
};

You would likely also be toggling the state of your menu in the same click handler.

That should be it.

toddsantoro (2022)

Might want to change the snippet in the guide to initiate the hamburger to:

  $('.hamburger').on( 'click', function() {
    $(this).toggleClass('is-active');
  });

so the deprecation warnings go away.

Or in AlpineJS you can do something like this:

<div class="flex justify-center items-center w-10 h-10 rounded-full border border-solid xl:hidden border-[#888]">
        
<button 
  :class="isOpen ? 'is-active' : ''" 
  class="hamburger hamburger--3dy" 
  type="button" 
  @@click="isOpen = !isOpen">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>
</div>