Merge branch 'topnav-tweaks-v2' of https://github.com/schlawg/lila in…

…to topnav-tweaks-v2

* 'topnav-tweaks-v2' of https://github.com/schlawg/lila:
  commit stuff i thought i had committed

ui/common/css/header/_buttons.scss

@@ -6,6 +6,7 @@
 
 .site-buttons {
   @extend %flex-center-nowrap;
+  position: relative;
 
   .link {
     @extend %top-icon;
@@ -62,8 +63,6 @@
   }
 
   .shown {
-    position: relative;
-
     .toggle {
       background: $c-bg-header-dropdown;
       color: $c-header-dropdown;

ui/site/src/topBar.ts

@@ -16,7 +16,12 @@ export default function () {
     $('#topnav > section > a').removeAttr('href');
 
   $('#tn-tg').on('change', e => {
-    document.body.classList.toggle('masked', (e.target as HTMLInputElement).checked);
+    const menuOpen = (e.target as HTMLInputElement).checked;
+    document.body.classList.toggle('masked', menuOpen);
+    const header = $as<HTMLElement>('#top');
+    // transp #top's blur filter creates a stacking context. turn it off so 'bottom: 0' matches screen height
+    if (menuOpen) header.style.backdropFilter = 'unset';
+    else setTimeout(() => (header.style.backdropFilter = ''), 200); // 200ms is slide transition duration
   });
 
   $('#top').on('click', '.toggle', function (this: HTMLElement) {