Fix menu z-index

Author: RoyalIcing

apps/components_guide_web/assets/css/app.css

@@ -15,6 +15,8 @@
   --link--color: var(--theme-primary, currentColor);
   --link--decoration: none;
   --link--decoration--hover: initial;
+  
+  --z-menu: 50;
 }
 
 a:not([class]) {
@@ -276,7 +278,7 @@ details[open] summary[aria-haspopup="menu"]:before {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 80;
+  z-index: calc(var(--z-menu) - 1);
   display: block;
   cursor: default;
   content: " ";

apps/components_guide_web/assets/tailwind.config.js

@@ -13,6 +13,9 @@ module.exports = {
         orange: colors.orange,
         current: 'currentColor',
       },
+      zIndex: {
+        'menu': 'var(--z-menu)'
+      }
     },
   },
 };

apps/components_guide_web/lib/components_guide_web/templates/layout/_banner.html.eex

@@ -10,7 +10,7 @@
     <hr class="mx-auto">
     <details class="relative" data-links="block p-3 underline-on-hover">
       <summary>Quick links</summary>
-      <details-menu role="menu" class="absolute top-full right-0 flex flex-col text-sm whitespace-nowrap bg-gray-900 rounded shadow-lg">
+      <details-menu role="menu" class="absolute z-menu top-full right-0 flex flex-col text-sm whitespace-nowrap bg-gray-900 rounded shadow-lg">
         <%= link("Accessibility First", to: '/accessibility-first') %>
         <%= link("React + TypeScript", to: '/react+typescript') %>
         <%= link("Web Standards", to: '/web-standards') %>