henrybuilt-js-library - npm Package Compare versions

Comparing version 1.8.255 to 1.8.256

package.json

 {
   "name": "henrybuilt-js-library",
-  "version": "1.8.255",
+  "version": "1.8.256",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

src/components/hb-po-header-3/hb-po-header-3.js

 var determineDomain = require('../determine-domain/determine-domain');
 
 var hbPoHeader3 = {
-  getComponent: ({containerElement, environment, shouldHideObjects=false}) => {
+  getComponent: ({containerElement, environment}) => {
     var activeCategoryKey = 'none';
     var brandDomains = determineDomain({environment});
 
+    var openMenuIconUrl = 'https://s3-us-west-2.amazonaws.com/henrybuilt-cdn/images/main/menu.png';
+    var closeMenuIconUrl = 'https://henrybuilt-cdn.s3-us-west-2.amazonaws.com/images/icons/x-white.png';
+
     var $header = $(`
-      <div class="hb-po-header">
-        <div class="hb-po-header-bar"></div>
+      <div class="hb-po-header-3">
+        <div class="hb-po-header-3-bar"></div>
       </div>
     `);
 
-    var $headerBar = $header.find('.hb-po-header-bar');
+    var $headerBar = $header.find('.hb-po-header-3-bar');
 
-    var $brandName = $(`
+    var $brandNameContainer = $(`
       <div class="brand-name-container">
@@ -22,5 +25,2 @@ <a class="brand-name" href="${brandDomains['henrybuilt']}">Henrybuilt</a>
 
-    $header.on('mouseleave', () => setActiveCategory({key: 'none'}));
-    $brandName.on('mouseenter', () => setActiveCategory({key: 'none'}));
-
     var $menuCategoriesContainer = $(`<div class="menu-categories-container"></div>`).appendTo($headerBar);
@@ -51,10 +51,2 @@
 
-        // $title.on('click', () => {
-        //   var shouldBeVisible = !$children.hasClass('visible');
-
-        //   $header.find('.menu-link-child-links').removeClass('visible');
-
-        //   if (shouldBeVisible) $children.addClass('visible');
-        // });
-
         _.forEach(children, link => createMenuLink({$container: $childLinksContainer, link}));
@@ -66,2 +58,26 @@ }
 
+    if (window.innerWidth > 800) { //HINT Desktop
+      $header.on('mouseleave', () => setActiveCategory({key: 'none'}));
+      $brandNameContainer.on('mouseenter', () => setActiveCategory({key: 'none'}));
+      $(window).on('scroll', () => setActiveCategory({key: 'none'}));
+    }
+    else { //HINT Mobile
+      var $toggleMenuButtonContainer = $(`
+        <div class="toggle-menu-button-container">
+          <img class="toggle-menu-button" src="${menuIsVisible ? closeMenuIconUrl : openMenuIconUrl}" />
+        </div>
+      `).appendTo($header);
+
+      var $toggleMenuButton = $toggleMenuButtonContainer.find('.toggle-menu-button');
+
+      $toggleMenuButton.on('click', () => toggleMenuVisibility());
+
+      //TODO
+      // $menuContainer.swipe({
+      //   swipe: (event, direction) => {
+      //     if (direction === 'left' && window.innerWidth <= 800) toggleMenu({shouldBecomeVisible: false});
+      //   }
+      // });
+    }
+
     _.forEach(menuCategories, ({title, key, links}) => {
@@ -75,8 +91,13 @@ var $menuCategory = $(`
       var $menuLinksContainer = $(`<div class="menu-links-container"></div>`).appendTo($menuCategory);
-      var $menuLinksBackground = $(`<div class="menu-links-background"></div>`).appendTo($menuCategory);
 
+      if (window.innerWidth > 800) { //HINT Desktop
+        var $menuLinksBackground = $(`<div class="menu-links-background"></div>`).appendTo($menuCategory);
+        $menuCategory.find('.menu-category-title').on('mouseover', () => setActiveCategory({key}));
+      }
+      else { //HINT Mobile
+        $menuCategory.find('.menu-category-title').on('click', () => setActiveCategory({key}));
+      }
+
       _.forEach(links, link => createMenuLink({$container: $menuLinksContainer, link}));
 
-      $menuCategory.on('mouseover', () => setActiveCategory({key}));
-
       $menuCategory.appendTo($menuCategoriesContainer);
@@ -86,163 +107,38 @@ });
     var setActiveCategory = ({key}) => {
-      activeCategoryKey = key;
+      if (window.innerWidth <= 800 && activeCategoryKey === key) { //HINT Mobile only
+        activeCategoryKey = 'none';
+      }
+      else {
+        activeCategoryKey = key;
+      }
 
       $menuCategoriesContainer.find('.menu-category').removeClass('active');
 
-      var $activeMenuCategory = $menuCategoriesContainer.find(`.menu-category#${key}`);
+      if (activeCategoryKey !== 'none') {
+        var $activeMenuCategory = $menuCategoriesContainer.find(`.menu-category#${key}`);
 
-      $activeMenuCategory.addClass('active');
+        $activeMenuCategory.addClass('active');
 
-      var activeMenuCategoryLinksContainerHeight = $activeMenuCategory.find('.menu-links-container').outerHeight();
+        var activeMenuCategoryLinksContainerHeight = $activeMenuCategory.find('.menu-links-container').outerHeight();
 
-      $activeMenuCategory.find('.menu-links-background').css('height', activeMenuCategoryLinksContainerHeight);
+        if (window.innerWidth > 800) { //HINT Desktop only
+          $activeMenuCategory.find('.menu-links-background').css('height', activeMenuCategoryLinksContainerHeight);
+        }
+      }
     };
 
-    // setInterval(() => {
-    //   var isLoggedIn = window.isLoggedIn === true;
+    var menuIsVisible = false;
 
-    //   $header.toggleClass('is-logged-in', isLoggedIn);
-    // }, 100);
+    var toggleMenuVisibility = () => {
+      menuIsVisible = !menuIsVisible;
 
-    // var createLink = ({$container, link}) => {
-    //   var {url, uri, key, title, children, className, spaceAfter, type, highlighted, indented} = link;
+      $toggleMenuButton.attr('src', menuIsVisible ? closeMenuIconUrl : openMenuIconUrl);
 
-    //   var $link = $(`<div class="menu-link ${indented ? 'indented': ''}"></div>`).appendTo($container);
+      $menuCategoriesContainer.toggleClass('visible', menuIsVisible);
+    };
 
-    //   if (type === 'static') {
-    //     $(`<div class="menu-static-title ${highlighted ? 'highlighted': ''}"><div>${title}<div></div>`).appendTo($link);
-    //   }
-    //   else {
-    //     var brand = _.get(link, 'brand', 'henrybuilt');
-
-    //     var url = url || `${brandDomains[brand]}${key ? `/page/${key}` : uri}`;
-
-    //     if (spaceAfter) $link.addClass('space-after');
-
-    //     if (!children) {
-    //       $(`
-    //         <div class="menu-link-title menu-link-has-link ${highlighted ? 'highlighted': ''}">
-    //           <a href="${url}">${title}</a>
-    //         </div>
-    //       `).appendTo($link);
-
-    //       if (className) $link.addClass(className);
-    //     }
-    //     else {
-    //       var $title = $(`
-    //         <div class="menu-link-title menu-link-expands ${highlighted ? 'highlighted': ''}">
-    //           <div>${title}<div>
-    //         </div>
-    //       `).appendTo($link);
-
-    //       var $children = $(`<div class="menu-link-child-links"></div>`).appendTo($link);
-
-    //       $title.on('click', () => {
-    //         var shouldBeVisible = !$children.hasClass('visible');
-
-    //         $header.find('.menu-link-child-links').removeClass('visible');
-
-    //         if (shouldBeVisible) $children.addClass('visible');
-    //       });
-
-    //       _.forEach(children, link => createLink({$container: $children, link}));
-    //     }
-    //   }
-    // };
-
-    // var $linkGroupPositionLeft = $(`<div class="link-group-title-container link-group-position-left">
-    //   <a class="desktop-arrow-link" href="${brandDomains['henrybuilt']}" style="margin-left: 2rem;">
-    //     <img class="desktop-arrow-link-image" style="height: 0.9rem; transform: translate(0px, 5.8px) !important;" src="https://henrybuilt-cdn.s3-us-west-2.amazonaws.com/public-site/home.png"/>
-    //   </a>
-    // </div>`).appendTo($headerBar);
-
-    // // menu icon
-    // var $desktopToggleMenuButton = $(`
-    //   <div class="desktop-arrow-link" >
-    //     <img class="desktop-arrow-link-image" src="https://s3-us-west-2.amazonaws.com/henrybuilt-cdn/images/main/menu-wide.png"/>
-    //   </div>
-    // `).prependTo($linkGroupPositionLeft);
-
-    // home icon
-    // $(`<a class="link-group-title-container link-group-position-right" href="${brandDomains['henrybuilt']}">
-    //   <div class="desktop-arrow-link" >
-    //     <img class="desktop-arrow-link-image" src="https://henrybuilt-cdn.s3-us-west-2.amazonaws.com/public-site/home.png"/>
-    //   </div>
-    // </a>`).appendTo($headerBar);
-
-    //phone icon
-    // $(`<a class="link-group-title-container link-group-position-right" href="${brandDomains['henrybuilt']}/page/contact">
-    //   <div class="desktop-arrow-link" >
-    //     <img class="desktop-arrow-link-image" src="https://henrybuilt-cdn.s3-us-west-2.amazonaws.com/public-site/phone.png"/>
-    //   </div>
-    // </a>`).appendTo($headerBar);
-
-    // _.forEach(linkGroups, linkGroup => {
-    //   var {title, position} = linkGroup;
-    //   var positionClassName = `link-group-position-${position}`;
-    //   var $linksContainer = $(`<div class="link-group-links-container ${positionClassName}" id="links-${position}">
-    //     <div class="menu-links menu-links-${position}"></div>
-    //   </div>`).appendTo($menu);
-
-    //   _.forEach(linkGroup.links, link => createLink({link, $container: $linksContainer.find('.menu-links')}));
-    // });
-
-    // var openUrl = 'https://s3-us-west-2.amazonaws.com/henrybuilt-cdn/images/main/menu.png';
-    // var closeUrl = 'https://henrybuilt-cdn.s3-us-west-2.amazonaws.com/images/icons/x.png';
-    // var homeUrl = 'https://henrybuilt-cdn.s3-us-west-2.amazonaws.com/public-site/home.png';
-
-    // var delay;
-
-    // var $openMenuButton = $(`<img class='vertical-open-menu-button'/>`).attr('src', openUrl).appendTo($header).on('click', () => {
-    //   toggleMenu({shouldBecomeVisible: true, isMobile: true});
-    // });
-
-    // var $closeMenuButton = $(`<img class='vertical-close-menu-button'/>`).attr('src', closeUrl).appendTo($menu).on('click', () => {
-    //   toggleMenu({shouldBecomeVisible: false, isMobile: true});
-    // });
-
-    // var $homeMenuButton = $(`<img class='vertical-home-menu-button'/>`).attr('src', homeUrl).appendTo($menu).on('click', () => {
-    //   document.location.href = `${brandDomains['henrybuilt']}`;
-    // });
-
-    // $desktopToggleMenuButton.on('click', () => toggleMenu({shouldBecomeVisible: $menuContainer.hasClass('visible') ? false : true}));
-
-    // $menuContainer.swipe({
-    //   swipe: (event, direction) => {
-    //     if (direction === 'left' && window.innerWidth <= 800) toggleMenu({shouldBecomeVisible: false});
-    //   }
-    // });
-
-    // $(window).on('scroll', () => {
-    //   if (window.innerWidth > 800) toggleMenu({shouldBecomeVisible: false});
-    // });
-
-    // var removeDisplay;
-
-    // var toggleMenu = ({shouldBecomeVisible, isMobile}) => {
-    //   var visibleVersion = isMobile ? 'visible visible-mobile' : 'visible';
-
-    //   if (shouldBecomeVisible) {
-    //     // $outsideMenu.addClass('visible');
-    //     // $closeMenuButton.addClass('visible');
-    //     // $homeMenuButton.addClass('visible');
-    //     $menuContainer.removeClass('no-display');
-    //     setTimeout(() => $menuContainer.addClass(visibleVersion), 50);
-    //     if (removeDisplay) clearTimeout(removeDisplay);
-    //   }
-    //   else {
-    //     $menuContainer.removeClass('visible visible-mobile');
-    //     $outsideMenu.removeClass('visible');
-    //     // $closeMenuButton.removeClass('visible');
-    //     // $homeMenuButton.removeClass('visible');
-    //     removeDisplay = setTimeout(() => {
-    //       $menuContainer.addClass('no-display');
-    //       $header.find('.menu-link-child-links').removeClass('visible');
-    //     }, 600);
-    //   }
-    // };
-
     //WARNING plain css - no scss
     var $style = $(`
       <style>
-        .hb-po-header {
+        .hb-po-header-3 {
           display: block;
@@ -259,20 +155,20 @@ position: relative;
         }
-        .hb-po-header:not(.is-logged-in) .logout-link {
+        .hb-po-header-3:not(.is-logged-in) .logout-link {
           display: none;
         }
+        .hb-po-header-3 * {
+          box-sizing: border-box;
+        }
 
-        .hb-po-header-bar {
+        .hb-po-header-3-bar {
           display: flex;
           flex-direction: column;
-          justify-content: center;
-          align-items: center;
           width: 100%;
         }
-        .hb-po-header-bar .brand-name-container {
+        .hb-po-header-3-bar .brand-name-container {
           display: flex;
-          margin-top: 0.25rem;
           width: 100%;
           justify-content: center;
         }
-        .hb-po-header-bar .brand-name-container .brand-name {
+        .hb-po-header-3-bar .brand-name-container .brand-name {
           font-size: 1.2rem;
@@ -284,3 +180,3 @@ letter-spacing: 8px;
         }
-        .hb-po-header-bar .menu-categories-container {
+        .hb-po-header-3-bar .menu-categories-container {
           display: flex;
@@ -290,6 +186,6 @@ flex-direction: row;
           align-items: center;
+          overflow: hidden;
           padding-bottom: 0.25rem;
         }
-        .hb-po-header-bar .menu-categories-container .menu-category {
-          padding: 0.25rem 1.5rem;
+        .hb-po-header-3-bar .menu-categories-container .menu-category {
           padding-bottom: 0.15rem;
@@ -308,17 +204,4 @@ }
         }
-        .menu-categories-container .menu-category .menu-links-container,
-        .menu-categories-container .menu-category .menu-links-background {
-          display: none;
-        }
-        .menu-categories-container .menu-category.active .menu-links-container,
-        .menu-categories-container .menu-category.active .menu-links-background {
-          display: flex;
-          position: absolute;
-          top: 100%;
-        }
         .menu-categories-container .menu-category.active .menu-links-container {
           flex-direction: column;
-          padding-top: 1rem;
-          padding-bottom: 2.25rem;
-          z-index: 1;
         }
@@ -333,6 +216,5 @@ .menu-categories-container .menu-category.active .menu-links-background {
           cursor: default;
+          margin-right: 1rem;
+          padding-bottom: 0.15rem;
         }
-        .menu-links-container .menu-link:not(:last-child) {
-          margin-bottom: 0.25rem;
-        }
         .menu-links-container .menu-link.space-after {
@@ -346,2 +228,3 @@ margin-bottom: 1.25rem;
           padding: 0.25rem 0;
+          padding-bottom: 0.1rem;
           border-bottom: 1px solid transparent;
@@ -351,3 +234,3 @@ }
           font-weight: bold;
-          margin-bottom: 0;
+          padding-bottom: 0.25rem;
         }
@@ -359,370 +242,93 @@ .menu-links-container .menu-link:not(.has-children) .menu-link-title:hover{
         .menu-links-container .menu-link .menu-link-child-links-container {
-          margin-bottom: 1.5rem;
+          margin-bottom: 0.75rem;
         }
 
-
-        /*.hb-po-header .link-group-links-container {
-          display: flex;
-        }
-        .hb-po-header .link-group-title-container, .link-group-links-container {
-          box-sizing: content-box;
-          position: relative;
-          text-decoration: none;
-          color: #FFFFFF;
-        }
-        .hb-po-header .hb-po-header-menu-container {
-          z-index: 0;
-          position: absolute;
-          left: 0;
-          top: 3em;
-          background-color: #000000;
-          padding: 1.5em;
-          padding-bottom: 2.15em;
-          display: block;
-        }
-        .hb-po-header .hb-po-header-menu-container.no-display {
-          display: none;
-        }
-        .hb-po-header .menu-link.space-after {
-          padding-bottom: 1.5em;
-        }
-        .hb-po-header .menu-link.indented {
-          margin-left: 0.95em;
-        }
-        .hb-po-header .menu-links {
-          font-size: 0.9em;
-        }
-        .hb-po-header .menu-link-title a, .hb-po-header .menu-link-title div,
-        .hb-po-header .menu-static-title div {
-          color: #bbb;
-          text-decoration: none;
-          display: inline-block;
-          padding: 0.4em 0;
-          position: relative;
-        }
-        .hb-po-header .menu-link-title.highlighted a, .hb-po-header .menu-link-title.highlighted div,
-        .hb-po-header .menu-static-title.highlighted div {
-          color: #fff;
-        }
-        .hb-po-header .menu-link-title a, .hb-po-header .menu-link-title div {
-          cursor: pointer;
-        }
-        .hb-po-header .menu-static-title div {
-          font-weight: 500;
-          cursor: default;
-        }
-        .hb-po-header .link-group-title-container {
-          white-space: nowrap;
-          cursor: pointer;
-          display: flex;
-        }
-        .hb-po-header .link-group-position-center .link-group-title {
-          cursor: pointer;
-        }
-        .hb-po-header .link-group-title {
-          text-decoration: none;
-          color: #FFFFFF;
-          padding: 0.4em 0;
-          position: relative;
-          display: inline-block;
-          transition: opacity 0.5s;
-        }
-        .hb-po-header .menu-link-title ::before {
-          content: "";
-          display: block;
-          position: absolute;
-          z-index: -1;
-          left: 0;
-          width: 0;
-          bottom: 1px;
-          background: #FFFFFF;
-          height: 1px;
-          transition: all 0.3s ease-in-out 0s;
-        }
-        .hb-po-header .menu-link-title :hover::before {
-          left: 0;
-          width: 100%;
-        }
-        .hb-po-header .menu-link-title.menu-link-expands ::before {
-          background-image: linear-gradient(to right, black 66%, rgba(255,255,255,0) 0%);
-          background-position: bottom;
-          background-size: 6px 2px;
-          background-repeat: repeat-x;
-          height: 2px;
-        }
-        .hb-po-header .menu-link-child-links {
-          padding-top: 0.6em;
-          padding-left: 0.95em;
-          padding-bottom: 1.25em;
-          transition: padding 0.4s;
-        }
-        .hb-po-header .menu-link-child-links.visible {
-          display: block;
-          opacity: 0.8;
-        }
-        .hb-po-header .outside-menu {
-          display: none;
-          position: fixed;
-          top: 0;
-          right: 0;
-          width: 100%;
-          height: 100%;
-          z-index: -1;
-        }
-        .hb-po-header .outside-menu.visible {
-          display: block;
-        }
-        .hb-po-header .vertical-open-menu-button, .vertical-close-menu-button,
-        .hb-po-header .vertical-open-menu-button, .vertical-home-menu-button {
-          height: 3.8em;
-          width: 3.8em;
-          opacity: 1;
-          cursor: pointer;
-          display: none;
-        }
-        .hb-po-header .vertical-open-menu-button, .vertical-close-menu-button {
-          padding: 0.4em;
-        }
-        .hb-po-header .vertical-home-menu-button {
-          padding: 1.1em;
-        }
-        .hb-po-header .mobile-arrow-link, .desktop-arrow-link {
-          padding: 0.3em;
-          padding-bottom: 0;
-        }
-        .hb-po-header .link-group-position-left .desktop-arrow-link,
-        .hb-po-header .link-group-position-left {
-          padding-left: 0;
-        }
-        .hb-po-header .link-group-position-left .mobile-arrow-link-image,
-        .hb-po-header .link-group-position-left .desktop-arrow-link-image {
-          height: 1.3rem;
-          transform: translate(0px, 3.2px);
-        }
-        .hb-po-header .link-group-position-right .mobile-arrow-link-image,
-        .hb-po-header .link-group-position-right .desktop-arrow-link-image {
-          height: 0.9rem;
-          transform: translate(0px, 7px);
-        }
-
-        @media print, (min-width: 801px) {
-          .hb-po-header .hb-po-header-menu-container {
-            opacity: 0;
-            top: -20em;
-            padding: 5em 3.9em;
-            width: 100%;
-            transition: opacity 0.6s, top 0.7s;
-            -moz-transition: opacity 0.6s, top 0.7s;
-            -webkit-transition: opacity 0.6s, top 0.7s;
+        /* DESKTOP STYLES */
+        @media only screen and (min-width: 801px) {
+          .hb-po-header-3-bar {
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
           }
-          .hb-po-header .hb-po-header-menu {
-            display: flex;
-            justify-content: space-between;
-            padding-bottom: 1em;
+          .hb-po-header-3-bar .brand-name-container {
+            margin-top: 0.25rem;
           }
-          .hb-po-header .link-group-vertical-title {
-            display: none;
+          .hb-po-header-3-bar .menu-categories-container {
+            max-width: 800px;
           }
-          .hb-po-header .hb-po-header-menu-container.visible {
-            opacity: 1;
-            top: 3em;
-          }
-          .hb-po-header .vertical-open-menu-button.projects-placement {
-            display: block;
-            margin-top: -2.85em;
-            margin-left: -0.9em;
-          }
-          .hb-po-header .link-group-links-container {
-            width: 8em;
-            white-space: nowrap;
-          }
-          .hb-po-header .menu-link-child-links.visible {
-            font-size: 0.8em;
-          }
-          .hb-po-header .menu-link-child-links {
+          .menu-categories-container .menu-category .menu-links-container,
+          .menu-categories-container .menu-category .menu-links-background {
             display: none;
           }
-          .hb-po-header .menu-links-center {
-            // padding-left: 2.6em;
+          .menu-categories-container .menu-category.active .menu-links-container,
+          .menu-categories-container .menu-category.active .menu-links-background {
+            display: flex;
+            position: absolute;
+            top: 100%;
           }
-          .hb-po-header .link-group-links-container {
-            transition: opacity 0.3s;
-            -moz-transition: opacity 0.3s;
-            -webkit-transition: opacity 0.3s;
+          .hb-po-header-3-bar .menu-categories-container .menu-category {
+            padding: 0.25rem 0.5rem;
           }
-          .mobile-arrow-link{
-            display: none;
+          .menu-categories-container .menu-category.active .menu-links-container {
+            z-index: 1;
+            max-height: 28rem;
+            padding-top: 1rem;
+            padding-bottom: 2.25rem;
           }
-          .desktop-arrow-link {
-            display: inline;
-            opacity: 1;
-            transition: opacity 0.5s;
+          .menu-categories-container .menu-category.active .menu-links-container {
+            flex-wrap: wrap;
           }
-          .hb-po-header .link-group-position-center {
-            margin-left: -20em;
+          .menu-links-container .menu-link:not(:last-child) {
+            margin-bottom: 0.25rem;
           }
-          .hb-po-header .link-group-position-right {
-            display: flex;
-            justify-content: flex-end;
+          .menu-links-container .menu-link.has-children > .menu-link-title {
+            margin-bottom: 0;
           }
         }
 
+        /* MOBILE STYLES */
         @media only screen and (max-width: 800px) {
-          .hb-po-header .hb-po-header-bar {
+          .hb-po-header-3-bar {
 
           }
-          .hb-po-header .hb-po-header-bar.visible {
-            opacity: 1;
-            display: block;
-            white-space: nowrap;
-          }
-          .hb-po-header .hb-po-header-menu-container {
-            overflow: auto;
-            background-color: #000000;
-            position: fixed;
-            width: 100%;
-            min-width: 27em;
-            max-width: 37em;
-            height: 100%;
-            opacity: 0;
+          .toggle-menu-button-container {
+            position: absolute;
             top: 0;
-            left: -27em;
-            padding-left: 2.3em;
-            white-space: nowrap;
-            transition: opacity 0.6s, left 0.7s;
-            -moz-transition: opacity 0.6s, left 0.7s;
-            -webkit-transition: opacity 0.6s, left 0.7s;
-          }
-          .hb-po-header-menu {
-            display: flex;
-            flex-flow: column;
-            margin-top: 2rem;
-            margin-left: 2rem;
-          }
-          .hb-po-header .hb-po-header-menu-container.visible {
-            opacity: 1;
             left: 0;
+            height: 2.4rem;
           }
-          .hb-po-header .vertical-open-menu-button {
-            display: block;
-            position: fixed;
-            left: 0;
-            top: 0;
-            background-color: #000000;
-            z-index: -1;
+          .toggle-menu-button-container .toggle-menu-button {
+            padding: 0.1rem 0.5rem;
+            height: 100%;
           }
-          .vertical-close-menu-button.visible,
-          .vertical-home-menu-button.visible {
-            position: absolute;
-            // right: 0.6em;
-            top: 0.3em;
-            display: block;
-            // filter: invert(100%);
+          .hb-po-header-3-bar .menu-categories-container {
+            display: none;
+            padding: 0.5rem
           }
-          .vertical-close-menu-button.visible {
-            right: 0.6em;
-            filter: invert(100%);
+          .hb-po-header-3-bar .menu-categories-container.visible {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: flex-start;
+            height: 100vh;
           }
-          .vertical-home-menu-button.visible {
-            left: 0.6em;
+          .hb-po-header-3-bar .menu-categories-container .menu-category {
+            padding: 0.25rem 1rem;
           }
-          .hb-po-header .vertical-open-menu-button:hover .vertical-close-menu-button:hover,
-          .hb-po-header .vertical-open-menu-button:hover .vertical-home-menu-button:hover {
-            opacity: 0.8;
-          }
-          .hb-po-header.hide-objects .link-group-position-right {
-            display: none !important;
-          }
-          .hb-po-header .link-group-links-container .menu-link {
-            width: 100%;
-          }
-          .hb-po-header .link-group-links-container .menu-link-title {
-            // max-height: 0px;
-            display: block;
-            overflow: hidden;
-            // transform: scale(0);
-            transform-origin: 0 0 0;
-            transition: transform 0.4s, max-height 0.4s;
-          }
-          .hb-po-header .link-group-links-container.active .menu-links > .menu-link > .menu-link-title,
-          .hb-po-header .link-group-links-container.active .menu-link .menu-link-child-links.visible .menu-link-title {
-            max-height: 2.06em;
-            transform: scale(1);
-            width: 100%;
-          }
-          .hb-po-header .menu-link-child-links:not(.visible),
-          .hb-po-header .link-group-links-container:not(.active) .menu-link-child-links {
-            padding: 0;
-          }
-          .hb-po-header .menu-link-child-links:not(.visible) .menu-link-title {
-            max-height: 0px;
-            transform: scale(0);
-          }
-          .hb-po-header-menu .link-group-links-container {
-            width: 100%;
-            padding: 0;
-            left: 0;
-            display: block;
-          }
-          .hb-po-header-menu .link-group-links-container.active {
-            border-left: 0.05rem solid #FFFFFF;
-          }
-          .hb-po-header-menu .link-group-links-container {
-            margin-bottom: 1.1em;
-          }
-          .hb-po-header-menu .link-group-links-container .link-group-position-center {
-            margin-left: -20em;
-          }
-          .hb-po-header-menu .link-group-links-container.active:not(.link-group-position-right) {
-            margin-bottom: 1.5em;
-          }
-          .hb-po-header .link-group-position-left {
-            order: 1;
-          }
-          .hb-po-header .link-group-position-center {
-            order: 2;
-          }
-          .hb-po-header .link-group-position-right {
-            order: 3;
-          }
-          .hb-po-header .menu-link-child-links.visible {
-            font-size: 0.9em;
-          }
-          .hb-po-header .link-group-title {
+          .menu-categories-container .menu-category .menu-links-container {
             display: none;
           }
-          .hb-po-header .link-group-title:hover::before, .menu-link-title :hover::before, .link-group-vertical-title:hover::before {
-            display: none;
+          .menu-categories-container .menu-category.active .menu-links-container {
+            display: flex;
+            padding-top: 0.5rem;
+            padding-bottom: 1rem;
+            margin-left: 1rem;
           }
-          .hb-po-header .link-group-vertical-title {
-            padding-top: 0.1em;
-            padding-bottom: 0.5em;
-            position: relative;
-            display: inline-block;
-            cursor: pointer;
-            text-decoration: none;
-            color: #FFFFFF;
-            font-size: 1.2em;
+          .menu-links-container .menu-link:not(:last-child) {
+            margin-bottom: 0.5rem;
           }
-          .hb-po-header .link-group-vertical-title, .menu-link {
-            padding-left: 0.7rem;
+          .menu-links-container .menu-link.has-children > .menu-link-title {
+            margin-bottom: 0.25rem;
           }
-          .hb-po-header {
-            padding-left: 0.7rem;
-          }
-          .hb-po-header {
-            margin-left: 2.7rem;
-            margin-top: 4rem;
-          }
         }
-        @media only screen and (max-width: 400px) {
-          .hb-po-header {
-            font-size: 0.7rem;
-          }
-        }
-        @media only screen and (max-width: 350px) {
-          .hb-po-header {
-            font-size: 0.6rem;
-          }
-        }*/
       </style>
@@ -729,0 +335,0 @@ `);

No alert changes

Worsened metrics

Total package byte prevSize

869115

decreased by-2.61%

Lines of code

8355

decreased by-4.2%

No dependency changes