Move flow shield to the top of the list, add new tag, improve menu

Author: krispya

apps/website/components/Nav.tsx

@@ -57,6 +57,21 @@ export default function Nav({
     firstRef.current = false;
   }, [demoname, demos]);
 
+  const navRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!collapsed) {
+      navRef.current?.removeAttribute("data-near");
+      return;
+    }
+    const onMove = (e: MouseEvent) => {
+      if (e.clientX < 120) navRef.current?.setAttribute("data-near", "");
+      else navRef.current?.removeAttribute("data-near");
+    };
+    window.addEventListener("mousemove", onMove);
+    return () => window.removeEventListener("mousemove", onMove);
+  }, [collapsed]);
+
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.key === "[" && e.metaKey) toggle();
@@ -66,7 +81,11 @@ export default function Nav({
   }, [toggle]);
 
   return (
-    <div className="Nav" data-collapsed={collapsed || undefined}>
+    <div
+      ref={navRef}
+      className="Nav"
+      data-collapsed={collapsed || undefined}
+    >
       <Style
         css={`
           @scope {
@@ -150,18 +169,11 @@ export default function Nav({
             }
 
             :scope[data-collapsed] .toggle {
-              translate: 15% -50%;
-            }
-
-            :scope[data-collapsed] .toggle::before {
-              content: "";
-              position: absolute;
-              inset: -1rem;
-              inset-inline-end: -3rem;
+              translate: 25% -50%;
             }
 
-            :scope[data-collapsed] .toggle:hover {
-              translate: 65% -50%;
+            :scope[data-collapsed][data-near] .toggle {
+              translate: 75% -50%;
             }
 
             :scope[data-collapsed] .toggle svg {
@@ -213,6 +225,22 @@ export default function Nav({
               overflow: hidden;
             }
 
+            .pill {
+              position: absolute;
+              top: 6px;
+              right: 6px;
+              padding: 2px 7px;
+              font-size: 0.55rem;
+              font-weight: 700;
+              letter-spacing: 0.06em;
+              text-transform: uppercase;
+              line-height: 1.5;
+              color: white;
+              background: #e8756a;
+              border-radius: 999px;
+              z-index: 1;
+            }
+
             a img {
               object-fit: cover;
               width: 100%;
@@ -249,13 +277,14 @@ export default function Nav({
 
       <nav {...props}>
         <ul ref={ulRef}>
-          {demos.map(({ name, thumb }, i) => (
+          {demos.map(({ name, thumb, isNew }, i) => (
             <li key={thumb} ref={lisRef.current[i]}>
               <Link
                 href={`/demos/${name}`}
                 className={clsx({ active: demoname === name })}
               >
                 <div className="thumb">
+                  {isNew && <span className="pill">New</span>}
                   <Image src={thumb} fill sizes="227px" alt={name} />
                 </div>
               </Link>

apps/website/const/new.ts

@@ -0,0 +1,2 @@
+
+export const NEW_DEMOS = new Set(["flow-shield"]);

apps/website/lib/helper.ts

@@ -1,4 +1,5 @@
 // Importing JSON directly
+import { NEW_DEMOS } from "@/const/new";
 import pkg from "@/package.json";
 
 import { generatePort } from "@examples/e2e";
@@ -11,6 +12,7 @@ const host =
     ? (port: number) => `http://localhost:${port}`
     : () => (BASE_URL ? new URL(BASE_URL).origin : "");
 
+
 export function getDemos() {
   return Object.keys(pkg.dependencies)
     .filter((dep) => dep.startsWith("@demo/"))
@@ -27,6 +29,7 @@ export function getDemos() {
         thumb: `${embed_url}/thumbnail.webp`,
         embed_url,
         website_url,
+        isNew: NEW_DEMOS.has(demoname),
       };
     });
 }

apps/website/package.json

@@ -11,6 +11,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@demo/flow-shield": "workspace:*",
     "@demo/aquarium": "workspace:*",
     "@demo/arkanoid": "workspace:*",
     "@demo/arkanoid-under-60-loc": "workspace:*",
@@ -55,7 +56,6 @@
     "@demo/flexbox-yoga-in-webgl": "workspace:*",
     "@demo/floating-diamonds": "workspace:*",
     "@demo/floating-instanced-shoes": "workspace:*",
-    "@demo/flow-shield": "workspace:*",
     "@demo/floating-laptop": "workspace:*",
     "@demo/flying-bananas": "workspace:*",
     "@demo/frosted-glass": "workspace:*",