{"id":14593,"date":"2022-04-26T12:38:38","date_gmt":"2022-04-26T10:38:38","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=14593"},"modified":"2022-04-26T12:38:40","modified_gmt":"2022-04-26T10:38:40","slug":"hamburgers-by-jonathan-suh-2","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/hamburgers-by-jonathan-suh-2\/","title":{"rendered":"hamburgers by Jonathan Suh"},"content":{"rendered":"\n<p><a href=\"https:\/\/jonsuh.com\/hamburgers\/\">https:\/\/jonsuh.com\/hamburgers\/<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/discourse.roots.io\/t\/how-to-using-hamburgers-package-in-sage\/11543\">https:\/\/discourse.roots.io\/t\/how-to-using-hamburgers-package-in-sage\/11543<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><a class=\"\" href=\"https:\/\/discourse.roots.io\/u\/mmirus\">mmirus<\/a> (2018):<\/p>\n\n\n\n<p><strong>Install:<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\"><code>yarn add hamburgers<\/code><\/p>\n\n\n\n<p><strong>Import in <code>main.scss<\/code>:<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\"><code>@import \"~hamburgers\/_sass\/hamburgers\/hamburgers\";<\/code><\/p>\n\n\n\n<p><strong>Add the markup:<\/strong><br>Probably in your <code>header.blade.php<\/code> partial.<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>&lt;button class=\"hamburger hamburger--vortex\" type=\"button\"&gt;\n  &lt;span class=\"hamburger-box\"&gt;\n    &lt;span class=\"hamburger-inner\"&gt;&lt;\/span&gt;\n  &lt;\/span&gt;\n&lt;\/button&gt;\n<\/code><\/pre>\n\n\n\n<p>In this case, I\u2019m using the \u2018vortex\u2019 type.<\/p>\n\n\n\n<p><strong>Customize as desired in <code>_variables.scss<\/code>:<\/strong><br>Here\u2019s what I used for my current project, but see the different types and the list of SASS variables in the page linked to above.<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>\/** Hamburger icon *\/\n$hamburger-padding-x: 0;\n$hamburger-padding-y: 0;\n$hamburger-layer-width: 20px;\n$hamburger-layer-height: 2px;\n$hamburger-layer-spacing: 4px;\n$hamburger-layer-color: $brand-primary;\n$hamburger-types: (vortex);\n<\/code><\/pre>\n\n\n\n<p>Again, I\u2019m using the \u2018vortex\u2019 type here.<\/p>\n\n\n\n<p><strong>Add JS to make it functional to <code>common.js<\/code>:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>export default {\n  init() {\n    \/\/ JavaScript to be fired on all pages\n    $(\".hamburger\").click(function() {\n      $(this).toggleClass(\"is-active\");\n    });\n  },\n  finalize() {\n    \/\/ JavaScript to be fired on all pages, after page specific JS is fired\n  },\n};\n<\/code><\/pre>\n\n\n\n<p>You would likely also be toggling the state of your menu in the same <code>click<\/code> handler.<\/p>\n\n\n\n<p>That should be it.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><a class=\"\" href=\"https:\/\/discourse.roots.io\/u\/toddsantoro\">toddsantoro<\/a> (2022)<\/p>\n\n\n\n<p>Might want to change the snippet in the guide to initiate the hamburger to:<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>  $('.hamburger').on( 'click', function() {\n    $(this).toggleClass('is-active');\n  });\n<\/code><\/pre>\n\n\n\n<p>so the deprecation warnings go away.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Or in AlpineJS you can do something like this:<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>&lt;div class=\"flex justify-center items-center w-10 h-10 rounded-full border border-solid xl:hidden border-&#91;#888]\">\n        \n&lt;button \n  :class=\"isOpen ? 'is-active' : ''\" \n  class=\"hamburger hamburger--3dy\" \n  type=\"button\" \n  @@click=\"isOpen = !isOpen\">\n  &lt;span class=\"hamburger-box\">\n    &lt;span class=\"hamburger-inner\">&lt;\/span>\n  &lt;\/span>\n&lt;\/button>\n&lt;\/div><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8220;~hamburgers\/_sass\/hamburgers\/hamburgers&#8221;; Add the markup:Probably in your header.blade.php partial. In this case, I\u2019m using the \u2018vortex\u2019 type. Customize as desired in _variables.scss:Here\u2019s what I used for my current project, but see the different types and the list of SASS variables in the page linked [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[37,198,279,197],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14593"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=14593"}],"version-history":[{"count":1,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14593\/revisions"}],"predecessor-version":[{"id":14594,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14593\/revisions\/14594"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=14593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=14593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=14593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}