Merge pull request #2552 from patternfly/docs/hamburger-menu

docs: improve hamburger menu for mobile

Author: zeroedin

docs/_includes/_nav.njk

@@ -2,9 +2,15 @@
   <div class="header-bar">
    {% include "../_snippets/pf-bar-html.md" %}
     <div class="logo-bar">
-      <a href="{{ '/' | url }}" aria-label="PatternFly Elements Home">
-        <img src="{{ '/images/pfe-logo-inverse-white.svg' | url }}" alt="PatternFly Elements">
-      </a>
+      <div class="logo-flex-wrap">
+        <div class="placeholder"></div>
+        <a href="{{ '/' | url }}" aria-label="PatternFly Elements Home">
+          <picture>
+            <source media="(min-width: 420px)" srcset="{{ '/images/pfe-logo-inverse-white.svg' | url }}">
+            <img alt="PatternFly Elements" src="{{ '/images/pfe-logo-icon-white.svg' | url }}">
+          </picture>  
+        </a>
+      </div>
       {# TODO: implement pf-dropdown
       <pf-dropdown id="docs-versions-dropdown" aria-label="Docs Versions" label="Docs Versions">
         {% for version in versions %}
@@ -47,15 +53,12 @@
     </div>
   </div>
 
-  <input id="mobile-menu-toggle" class="menu-toggle element-invisible" type="checkbox"
-    aria-controls="mobile-menu-menu-container" autocomplete="off">
-
+  <input id="mobile-menu-toggle" class="menu-toggle element-invisible" type="checkbox" aria-controls="mobile-menu-menu-container" autocomplete="off">
   <label class="menu-toggle__button l-header__mobile-menu-toggle" for="mobile-menu-toggle"
     data-controls="mobile-menu-menu-container">
     <span class="l-header__burger-icon"></span>
     <span class="menu-toggle-assistive-text element-invisible">Toggle menu visibility</span>
-  </label>
-
+  </label>  
   <div class="menu-toggle__toggleable site-navigation__outer-wrapper">
     <nav class="l-header__site-navigation site-navigation menu-toggle__toggleable-content-wrapper">
       <ul class="site-navigation__wrapper">

docs/images/pfe-logo-icon-white.svg

@@ -383,12 +383,10 @@ main.blog {
   translate: 6px;
 }
 
-
 .logo-bar {
-  --pf-navigation--Height--actual: 70px;
   display: flex;
+  --pf-navigation--Height--actual: 70px;
   align-items: center;
-  gap: 1em;
   height: 4.375rem; /* old: 3.75rem */
   padding-inline-start: var(--pf-c-masthead--PaddingLeft, var(--pf-c-masthead--inset, 24px));
   padding-inline-end: var(--pf-c-masthead--PaddingRight, var(--pf-c-masthead--inset, 24px));
@@ -398,19 +396,32 @@ main.blog {
   background: var(--pf-theme--color--accent, #0066cc);
 }
 
-.logo-bar > a {
+.logo-flex-wrap {
+  display: flex;
+  gap: 1em;
+  width: 100%;
+  height: 100%;
+}
+
+.logo-flex-wrap > .placeholder {
+  /* 25px is the width of the hamburger */
+  width: 25px;
+  height: 57px;
+}
+
+.logo-flex-wrap > a {
   display: flex;
   align-items: center;
   color: white;
   text-decoration: none;
   font-size: 1.25rem;
   font-weight: bold;
-  margin-left: calc(1.5rem + 16px);
-  height: 100%;
+  gap: 1rem;
 }
 
-.logo-bar > a img {
-  display: none;
+.logo-flex-wrap > a > picture,
+.logo-flex-wrap > a > picture > img {
+  width: 100%;
   height: 100%;
 }
 
@@ -494,7 +505,6 @@ main.blog {
 .l-header__mobile-menu-toggle {
   width: 1.5rem;
   height: 4.375rem;
-  margin-right: 16px;
   color: #fff;
   z-index: 200;
   position: fixed;
@@ -515,6 +525,8 @@ main.blog {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  /* header-bar is set to z-index: 300 */
+  z-index: 301;
 }
 
 .l-header__burger-icon {
@@ -836,6 +848,14 @@ blockquote {
     padding-inline: var(--pf-global--spacer--3xl, 4rem)
   }
 
+  .logo-flex-wrap {
+    gap: 0;
+  }
+
+  .logo-flex-wrap .placeholder:empty {
+    display: none;
+  }
+
   #component-list {
     padding: var(--pf-global--spacer--3xl, 4rem) var(--pf-global--spacer--3xl, 4rem);
   }
@@ -862,11 +882,11 @@ blockquote {
     top: 2rem;
   }
 
-  .logo-bar > a {
+  .logo-flex-wrap > a {
     margin-left: 16px;
   }
 
-  .logo-bar > a img {
+  .logo-flex-wrap > a > picture > img {
     display: inline-block;
     position: relative;
     left: -1rem;