docs-site: prevent scrolling when global bar menu is displayed

pkgs/docs-site/src/routes/+layout.svelte

@@ -35,6 +35,12 @@
       }
     })();
   });
+
+  function toggleMenu() {
+    menuOpen = !menuOpen;
+    window.scrollTo({ top: 0 });
+    document.documentElement.classList.toggle("no-scroll", menuOpen);
+  }
 </script>
 
 <svelte:head>
@@ -64,7 +70,7 @@
       {/if}
     </div>
     <div class={["menu", menuOpen && "open"]}>
-      <button onclick={() => (menuOpen = !menuOpen)}>Menu</button>
+      <button onclick={toggleMenu}>Menu</button>
       <ul>
         {@render navItems(docs.navItems)}
       </ul>
@@ -130,6 +136,7 @@
     color: #666;
   }
   .menu {
+    color: var(--fgColor);
     & > ul {
       visibility: hidden;
       position: fixed;

pkgs/docs-site/src/routes/global.css

@@ -3,12 +3,18 @@
 :root {
   --pagePadding: 15px;
   --globalBarHeight: 60px;
+  --fgColor: #000;
   --fgInvertedColor: #fff;
   --bgInvertedColor: #203637;
 }
 
 html {
   box-sizing: border-box;
+
+  &.no-scroll {
+    overflow: hidden;
+    height: 100vh;
+  }
 }
 *,
 *:before,