feat: gh badge, fixed navbar animation on mobile

src/components/example.css

@@ -56,15 +56,15 @@
   padding: 4px;
 }
 
-#link-light,
-#link-dark {
+.link-light,
+.link-dark {
   display: none;
 }
 
-.light-theme .header-anchor #link-light {
+.light-theme .header-anchor .link-light {
   display: block;
 }
 
-.dark-theme .header-anchor #link-dark {
+.dark-theme .header-anchor .link-dark {
   display: block;
 }

src/components/example.tsx

@@ -45,12 +45,12 @@ export function ExampleSection(
             `}
           >
             <img
-              id="link-dark"
+              class="link-dark"
               src={url("assets/link-dark.svg")}
               alt={`Copy link to "${label}"`}
             />
             <img
-              id="link-light"
+              class="link-light"
               src={url("assets/link-light.svg")}
               alt={`Copy link to "${label}"`}
             />

src/components/gh-badge.css

@@ -0,0 +1,41 @@
+.github-badge {
+  position: fixed;
+  width: 16em;
+  height: 8em;
+  bottom: -4em;
+  right: -8em;
+  transform: rotate(-45deg);
+  display: flex;
+  justify-content: center;
+
+  & .ghb-dark,
+  & .ghb-light {
+    margin-top: 0.4em;
+    margin-right: 0.2em;
+    display: none;
+    width: 2.5em;
+    height: 2.5em;
+  }
+}
+
+.dark-theme .github-badge {
+  background: #f5f5f5;
+
+  & .ghb-dark {
+    display: block;
+  }
+}
+
+.light-theme .github-badge {
+  background: #141414;
+
+  & .ghb-light {
+    display: block;
+  }
+}
+
+@media (max-width: 830px) {
+  .github-badge {
+    display: none;
+  }
+}

src/components/gh-badge.tsx

@@ -0,0 +1,16 @@
+import GhLight from "../assets/github-mark-white.svg";
+import GhDark from "../assets/github-mark.svg";
+
+export function GithubBadge() {
+  return (
+    <a
+      class="github-badge"
+      href="https://github.com/ncpa0/ADWaveCSS"
+      target="_blank"
+      title="View source on GitHub"
+    >
+      <GhDark class="ghb-dark" />
+      <GhLight class="ghb-light" />
+    </a>
+  );
+}

src/components/navbar.client.tsx

@@ -4,20 +4,40 @@ declare global {
   const htmx: typeof HTMX;
 }
 
-let MobileNavbarModal: HTMLDialogElement | null = null;
+class MobileMenu {
+  dialog;
+  btnContainer;
+  btn;
+  backdropArea;
+  closingAnimation: Animation | null = null;
 
-const initMobileMenu = () => {
-  const dialog = document.querySelector("dialog")!;
-  const btnContainer = dialog.querySelector(".left-navbar-mobile-overlay")!;
+  constructor() {
+    this.dialog = document.querySelector("dialog")!;
+    this.btnContainer = this.dialog.querySelector(
+      ".left-navbar-mobile-overlay",
+    )!;
+    this.btn = document.querySelector(".navbar-mobile-btn")!;
+    this.backdropArea = document.querySelector(".navbar-overlay-backdrop")!;
+
+    this.btn.addEventListener("click", () => {
+      this.dialog.showModal();
+    });
+
+    this.backdropArea.addEventListener("click", () => {
+      this.close();
+    });
 
-  const btn = document.querySelector(".navbar-mobile-btn")!;
-  btn.addEventListener("click", () => {
-    dialog.showModal();
-  });
+    htmx.on("htmx:pushedIntoHistory", () => {
+      this.close();
+    });
+  }
+
+  close() {
+    if (this.closingAnimation || !this.dialog.open) {
+      return;
+    }
 
-  const backdropArea = document.querySelector(".navbar-overlay-backdrop")!;
-  backdropArea.addEventListener("click", () => {
-    backdropArea.animate(
+    this.backdropArea.animate(
       [
         {
           opacity: 1,
@@ -30,7 +50,7 @@ const initMobileMenu = () => {
         duration: 300,
       },
     );
-    const animation = btnContainer.animate(
+    this.closingAnimation = this.btnContainer.animate(
       [
         {
           left: "0%",
@@ -43,10 +63,17 @@ const initMobileMenu = () => {
         duration: 250,
       },
     );
-    animation.onfinish = () => dialog.close();
-  });
 
-  MobileNavbarModal = dialog;
+    this.closingAnimation.onfinish = () => {
+      this.closingAnimation = null;
+      this.dialog.close();
+    };
+  }
+}
+
+let mobileMenu: MobileMenu | null = null;
+const initMobileMenu = () => {
+  mobileMenu = new MobileMenu();
 };
 
 class NavbarButton extends HTMLAnchorElement {
@@ -60,12 +87,13 @@ class NavbarButton extends HTMLAnchorElement {
     } else {
       innerBtn.classList.remove("active");
     }
-
-    MobileNavbarModal?.close();
   };
 
   connectedCallback() {
     htmx.on("htmx:pushedIntoHistory", this.onHistoryPush);
+    this.addEventListener("mousedown", () => {
+      mobileMenu?.close();
+    });
   }
 
   disconnectedCallback() {

src/index.client.ts

@@ -4,3 +4,35 @@ import "./components/navbar.client.js";
 import "./components/theme-switcher.client.js";
 import "./hljs-theme-loader.client.ts";
 import "./service-workers/register.client.ts";
+
+declare global {
+  interface ViewTransition {
+    finished: Promise<boolean>;
+    ready: Promise<boolean>;
+    updateCallbackDone: Promise<any>;
+    skipTransition(): void;
+  }
+
+  interface Document {
+    startViewTransition(
+      updateCallback: () => void | Promise<void>,
+    ): ViewTransition;
+  }
+}
+
+// don't use view transition api on mobile
+if (typeof document.startViewTransition === "function") {
+  const original = document.startViewTransition.bind(document);
+  document.startViewTransition = (updateCallback) => {
+    if (window.innerWidth > 830) {
+      return original(updateCallback);
+    }
+
+    return {
+      finished: Promise.resolve(true),
+      ready: Promise.resolve(true),
+      updateCallbackDone: updateCallback() ?? Promise.resolve(),
+      skipTransition() {},
+    };
+  };
+}

src/index.css

@@ -3,6 +3,7 @@
 @import "components/font-size-selector.css";
 @import "components/navbar.css";
 @import "components/theme-switcher.css";
+@import "components/gh-badge.css";
 @import "../node_modules/adwavecss/dist/styles.css";
 
 *:not(body, h1, h2, h3, h4, h5, h6) {
@@ -52,6 +53,7 @@ body {
 
 .navbar-container {
   view-transition-name: none;
+  z-index: 100;
 }
 
 @keyframes fade-in {

src/layout.tsx

@@ -1,4 +1,5 @@
 import { Box, Theme } from "adwavecss";
+import { GithubBadge } from "./components/gh-badge";
 import { Navbar } from "./components/navbar";
 import { Script } from "./script";
 import { Style } from "./style";
@@ -65,6 +66,7 @@ export function Layout(
           <div id="example-view" class="flexbox">
             {props.children}
           </div>
+          <GithubBadge />
         </div>
         {__DEV__ && (
           <script defer>