Draft nav blur gradient effect

Author: MrWillCom

layout/_partial/nav.ejs

@@ -1,3 +1,11 @@
+<div class="masked">
+  <div order="1"></div>
+  <div order="2"></div>
+  <div order="3"></div>
+  <div order="4"></div>
+  <div order="5"></div>
+  <div order="6"></div>
+</div>
 <nav id="theme-nav">
   <div class="inner">
     <a class="title" href="<%= config.root %>"><%= theme.nav.title %></a>

source/css/nav.scss

@@ -1,18 +1,20 @@
+@use 'sass:math';
+
 @mixin flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 nav {
-  background-color: var(--color-background-secondary-translucent);
+  // background-color: var(--color-background-secondary-translucent);
   user-select: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
-  backdrop-filter: var(--filter-blur);
+  // backdrop-filter: var(--filter-blur);
   transition: height 0.4s cubic-bezier(0.86, 0, 0.07, 1);
 
   .inner {
@@ -153,7 +155,7 @@ nav {
       }
     }
 
-    &.open {
+    .nav-open & {
       height: var(--open-height);
 
       .title {
@@ -195,3 +197,38 @@ nav {
     }
   }
 }
+
+.masked > [order] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  // background-color: var(--color-background-secondary-translucent);
+  background-color: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(10px);
+  mask-image: linear-gradient(to bottom, #000, transparent);
+  -webkit-mask-composite: destination-in;
+  pointer-events: none;
+  z-index: 1000;
+  transition:
+    height 0.6s cubic-bezier(0.86, 0, 0.07, 1),
+    backdrop-filter 0.6s cubic-bezier(0.86, 0, 0.07, 1);
+
+  .nav-open & {
+    backdrop-filter: blur(36px);
+  }
+
+  --height: 100px;
+  $base: 1.2;
+  @for $i from 1 through 6 {
+    &[order='#{$i}'] {
+      height: calc(var(--height) / math.pow(($base), ($i - 1)));
+
+      @media (max-width: 600px) {
+        .nav-open & {
+          height: calc(var(--open-height) * 3 / math.pow(($base), ($i - 1)));
+        }
+      }
+    }
+  }
+}

source/js/main.js

@@ -2,34 +2,34 @@
   var navEl = document.getElementById('theme-nav')
   navEl.addEventListener('click', e => {
     if (window.innerWidth <= 600) {
-      if (!navEl.classList.contains('open')) {
-        navEl.style.setProperty(
+      if (!document.body.classList.contains('nav-open')) {
+        document.body.style.setProperty(
           '--open-height',
           48 +
             document.querySelector('#theme-nav .nav-items').clientHeight +
             'px',
         )
       }
 
-      navEl.classList.toggle('open')
+      document.body.classList.toggle('nav-open')
     } else {
-      navEl.style.removeProperty('--open-height')
-      navEl.classList.remove('open')
+      document.body.style.removeProperty('--open-height')
+      document.body.classList.remove('nav-open')
     }
   })
 
   window.addEventListener('resize', () => {
-    if (navEl.classList.contains('open')) {
-      navEl.style.setProperty(
+    if (document.body.classList.contains('nav-open')) {
+      document.body.style.setProperty(
         '--open-height',
         48 +
           document.querySelector('#theme-nav .nav-items').clientHeight +
           'px',
       )
     }
     if (window.innerWidth > 600) {
-      navEl.style.removeProperty('--open-height')
-      navEl.classList.remove('open')
+      document.body.style.removeProperty('--open-height')
+      document.body.classList.remove('nav-open')
     }
   })