From 204a67f2ceb8e3f0967327b697718fe7b8ae6c60 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@avris.it>
Date: Thu, 31 Mar 2022 17:56:57 +0200
Subject: [PATCH] [design] make firefox fake-glass a bit transparent, add glass
 to hamburger menu

---
 assets/glass.scss     | 5 +++++
 components/Header.vue | 7 +++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/assets/glass.scss b/assets/glass.scss
index 484de028..c3eda8d6 100644
--- a/assets/glass.scss
+++ b/assets/glass.scss
@@ -1,4 +1,9 @@
 @supports (backdrop-filter: blur($glassBlur)) {
+    .hamburger-menu .bg {
+        backdrop-filter: blur($glassBlur);
+        background-color: transparent !important;
+    }
+
     @include media-breakpoint-up('lg', $grid-breakpoints) {
         header {
             backdrop-filter: blur($glassBlur);
diff --git a/components/Header.vue b/components/Header.vue
index 689ae5bd..9f3bb22f 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -39,7 +39,7 @@
             >
                 <Icon v="bars"/>
             </button>
-            <div :class="['bg-white border p-3', hamburgerActive ? '' : 'd-none']">
+            <div :class="['bg border p-3 shadow', hamburgerActive ? '' : 'd-none']">
                 <div class="btn-group-vertical d-flex nav-custom nav-custom-start mb-2">
                     <nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
                         <Icon :v="link.icon"/>
@@ -377,6 +377,9 @@
             left: $spacer;
             z-index: 1030;
             transition: all .5s ease-in-out;
+            .bg {
+                background-color: rgba($white, .9)
+            }
             .btn-hamburger {
                 &:not(:active):not(:hover):not(:focus):not(.active) {
                     background-color: $white;
@@ -409,7 +412,7 @@
             z-index: 99;
             top: 0;
             left: 0;
-            background-color: $white;
+            background-color: rgba($white, .9);
             box-shadow: $box-shadow;
         }