Navbar: transparent at top, opaque on scroll with transition

Add navbarScroll client module toggling data-navbar-scrolled and
data-navbar-home-top attributes. CSS transitions background/shadow
on scroll. White links on home page over dark hero banner.

Author: MMesch

docusaurus.config.ts

@@ -20,6 +20,8 @@ const config: Config = {
   organizationName: "/HaudinFlorence/", // Usually your GitHub org/user name.
   projectName: "quantstack.github.io", // Usually your repo name.
 
+  clientModules: [require.resolve("./src/clientModules/navbarScroll.ts")],
+
   onBrokenLinks: "warn",
   onBrokenMarkdownLinks: "warn",
   staticDirectories: ["static"],

src/clientModules/navbarScroll.ts

@@ -0,0 +1,20 @@
+const THRESHOLD = 20;
+
+function update(): void {
+  const scrolled = window.scrollY > THRESHOLD;
+  const isHome = window.location.pathname === "/";
+  document.documentElement.toggleAttribute("data-navbar-scrolled", scrolled);
+  document.documentElement.toggleAttribute(
+    "data-navbar-home-top",
+    isHome && !scrolled
+  );
+}
+
+export function onRouteDidUpdate(): void {
+  update();
+}
+
+if (typeof window !== "undefined") {
+  window.addEventListener("scroll", update, { passive: true });
+  update();
+}

src/css/custom.css

@@ -344,6 +344,36 @@ a.menu__link:active {
   transform: scale(1);
 }
 
+/* Scroll-adaptive navbar */
+.navbar {
+  transition: background-color 0.25s ease, box-shadow 0.25s ease;
+}
+
+html:not([data-navbar-scrolled]) .navbar {
+  background: transparent;
+  box-shadow: none;
+}
+
+html[data-navbar-scrolled] .navbar {
+  background: var(--ifm-bg-neutral);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
+}
+
+/* Home page at top: white links over dark hero */
+html[data-navbar-home-top] .navbar__link,
+html[data-navbar-home-top] .custom_navbar_item {
+  color: white;
+}
+
+html[data-navbar-home-top] .custom_navbar_item:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  color: white;
+}
+
+html[data-navbar-home-top] .navbar__link:hover {
+  color: var(--ifm-color-primary-p1);
+}
+
 .navbar__inner {
   position: relative;
 }
@@ -387,7 +417,8 @@ a.menu__link:active {
   border-radius: 4px;
 }
 
-.navbar__link:hover {
+html[data-navbar-scrolled] .navbar__link:hover,
+html:not([data-navbar-home-top]) .navbar__link:hover {
   color: black;
 }