Tag: CSS

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>