fix iOS navigation (#246)

also see urlaubsverwaltung/urlaubsverwaltung#3772 closes #247
urlaubsverwaltung · May 17, 2023 · 6a88bde · 6a88bde
2 parents fbd7ac0 + ecb111b
commit 6a88bde
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 67 deletions.
diff --git a/src/main/css/style.css b/src/main/css/style.css
@@ -3,12 +3,17 @@
 @tailwind utilities;
 
 @layer base {
-  html {
+  :root {
     --navigation-header-height: 3rem;
   }
 
+  html {
+    height: --webkit-fill-available;
+  }
+
   body {
     min-height: 100vh;
+    min-height: --webkit-fill-available;
     background-image: linear-gradient(#ffffff, #fafafa);
     background-attachment: fixed;
   }
@@ -75,33 +80,20 @@
   }
 
   #menu-toggle-checkbox ~ label ~ nav {
+    position: fixed;
+    top: 100%;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    @apply px-6;
+    @apply py-8;
     @apply transition-all;
-    @apply duration-500;
-    @apply origin-top-left;
-    @apply scale-x-0;
-    @apply scale-y-0;
-    @apply opacity-0;
-    @apply z-40;
-    @apply fixed;
-    @apply inset-0;
-    @apply bg-zinc-100;
-    @apply py-32;
-    @apply px-8;
+    @apply duration-150;
+    @apply bg-white;
   }
 
   #menu-toggle-checkbox:checked ~ label ~ nav {
-    @apply scale-x-100;
-    @apply scale-y-100;
-    @apply opacity-100;
-  }
-
-  #menu-toggle-checkbox ~ label ~ nav > ul {
-    overflow: hidden;
-    transition: max-height 150ms ease-in-out;
-    max-height: 0;
-  }
-  #menu-toggle-checkbox:checked ~ label ~ nav > ul {
-    max-height: 90vh;
+    top: calc(var(--navigation-header-height) + 1.5rem);
   }
 
   .navigation-content-spacer {
@@ -143,20 +135,6 @@
     @apply rounded-tr-full;
   }
 
-  @screen lg {
-    #menu-toggle-checkbox ~ label ~ nav {
-      @apply static;
-      @apply scale-x-100;
-      @apply scale-y-100;
-      @apply opacity-100;
-      @apply py-0;
-      @apply px-0;
-    }
-    #menu-toggle-checkbox ~ label ~ nav > ul {
-      max-height: unset;
-    }
-  }
-
   #menu-toggle-checkbox + label > span:first-child {
     width: 30px;
     height: 18px;
@@ -227,6 +205,34 @@
     bottom: 6.5px;
     background-color: transparent !important;
   }
+
+  @screen xs {
+    #menu-toggle-checkbox ~ label ~ nav {
+      overflow: hidden;
+      max-height: 0;
+      top: -100%;
+      @apply bg-zinc-100;
+      z-index: 10;
+    }
+
+    #menu-toggle-checkbox:checked ~ label ~ nav,
+    #menu-toggle-checkbox:checked ~ label ~ nav:focus-within {
+      top: var(--navigation-header-height);
+      max-height: 100vh !important;
+    }
+  }
+
+  @screen lg {
+    #menu-toggle-checkbox ~ label ~ nav {
+      max-height: unset;
+      @apply static;
+      @apply scale-x-100;
+      @apply scale-y-100;
+      @apply opacity-100;
+      @apply py-0;
+      @apply px-0;
+    }
+  }
 }
 
 @layer components {
@@ -408,31 +414,20 @@
   }
 
   .nav-popup-menu {
-    @apply scale-0;
-    @apply opacity-0;
     position: fixed;
+    top: 100%;
     bottom: 0;
     left: 0;
     right: 0;
     @apply transition-all;
     @apply duration-150;
 
+    @apply rounded-t-2xl;
     @apply bg-white;
-    @apply backdrop-blur;
-    @apply supports-backdrop-blur:bg-white/[0.95];
   }
 
   .nav-popup-menu.visible {
-    @apply scale-100;
-    @apply opacity-100;
-    @apply rounded-t-2xl;
-  }
-
-  /* screen xs */
-  @media screen and (max-width: 481px) {
-    .nav-popup-menu.visible {
-      height: calc(100vh - 4rem);
-    }
+    top: calc(var(--navigation-header-height) + 1.5rem);
   }
 
   .nav-popup-menu-inner {
@@ -489,12 +484,16 @@
       @apply left-auto;
       @apply right-0;
       @apply bottom-auto;
-      @apply top-full;
       @apply rounded-2xl;
       @apply dark:border-zinc-800;
       @apply dark:shadow-none;
     }
 
+    .nav-popup-menu.visible {
+      @apply top-full;
+      @apply z-10;
+    }
+
     .nav-popup-menu-inner {
       max-height: 75vh;
       @apply w-auto;

diff --git a/src/main/javascript/components/navigation/navigation-popup-menu.ts b/src/main/javascript/components/navigation/navigation-popup-menu.ts
@@ -1,4 +1,4 @@
-export class NavPopupMenuButton extends HTMLAnchorElement {
+export class NavPopupMenuButton extends HTMLElement {
   static get observedAttributes() {
     return ["data-open"];
   }
@@ -12,18 +12,21 @@ export class NavPopupMenuButton extends HTMLAnchorElement {
 
     this.#open = typeof newValue === "string";
 
-    const menu = document.querySelector(this.getAttribute("href"));
+    const href = this.querySelector("a")?.getAttribute("href");
+    const menu = document.querySelector(href);
+
     if (this.#open) {
-      menu.classList.add("visible");
+      menu?.classList.add("visible");
     } else {
-      menu.classList.remove("visible");
+      menu?.classList.remove("visible");
     }
   }
 
   connectedCallback() {
     this.addEventListener("click", (event) => {
       event.preventDefault();
-      const menu = document.querySelector(this.getAttribute("href"));
+      const href = this.querySelector("a").getAttribute("href");
+      const menu = document.querySelector(href);
 
       for (const otherMenu of document.querySelectorAll(
         ".nav-popup-menu[data-open]",
@@ -48,17 +51,15 @@ export class NavPopupMenuButton extends HTMLAnchorElement {
 // hide other popups
 document.body.addEventListener("click", function (event) {
   const closestClickedDatePicker = (event.target as HTMLElement).closest(
-    "[is='z-nav-popup-menu-button']",
+    "z-nav-popup-menu-button",
   );
   for (const picker of document.querySelectorAll(
-    "[is='z-nav-popup-menu-button'][data-open]",
+    "z-nav-popup-menu-button[data-open]",
   )) {
     if (picker !== closestClickedDatePicker) {
       delete (picker as HTMLElement).dataset.open;
     }
   }
 });
 
-customElements.define("z-nav-popup-menu-button", NavPopupMenuButton, {
-  extends: "a",
-});
+customElements.define("z-nav-popup-menu-button", NavPopupMenuButton);
diff --git a/src/main/resources/templates/_navigation.html b/src/main/resources/templates/_navigation.html
@@ -141,12 +141,12 @@
               </div>
               <div th:replace="~{launchpad/launchpad::navigation-item}"></div>
               <div class="shrink-0 relative flex">
-                <a
+                <z-nav-popup-menu-button>
+                  <a
                   href="#avatar-menu"
                   id="avatar-link"
                   aria-expanded="false"
                   aria-haspopup="true"
-                  is="z-nav-popup-menu-button"
                   class="flex flex-row items-center"
                 >
                   <span class="inline-flex text-blue-200">
@@ -159,6 +159,7 @@
                     th:replace="~{icons/chevron-down::svg(className='w-4 h-4')}"
                   ></svg>
                 </a>
+                </z-nav-popup-menu-button>
                 <div id="avatar-menu" class="nav-popup-menu xs:max-w-xs">
                   <div class="nav-popup-menu-inner">
                     <div class="nav-popup-menu-inner__header">

diff --git a/src/main/resources/templates/launchpad/launchpad.html b/src/main/resources/templates/launchpad/launchpad.html
@@ -10,11 +10,11 @@
       th:if="${launchpad}"
       class="relative flex items-center"
     >
-      <a
+      <z-nav-popup-menu-button>
+        <a
         href="#launchpad"
         aria-expanded="false"
         aria-haspopup="true"
-        is="z-nav-popup-menu-button"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -44,6 +44,7 @@
           Anwendungen
         </span>
       </a>
+      </z-nav-popup-menu-button>
       <div id="launchpad" class="nav-popup-menu xs:-right-4">
         <div class="nav-popup-menu-inner">
           <div class="nav-popup-menu-inner__header">