header no fluent

microsoft · Oct 19, 2024 · 662b89a · 662b89a
1 parent f47a252
commit 662b89a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 47 deletions.
diff --git a/packages/website-astro/src/components/header/header.astro b/packages/website-astro/src/components/header/header.astro
@@ -82,28 +82,42 @@ import Search from "./search.astro";
     background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 71 55' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M60.105 4.898A58.55 58.55 0 0 0 45.653.415a.22.22 0 0 0-.233.11 40.784 40.784 0 0 0-1.8 3.697c-5.456-.817-10.886-.817-16.23 0-.485-1.164-1.201-2.587-1.828-3.697a.228.228 0 0 0-.233-.11 58.386 58.386 0 0 0-14.451 4.483.207.207 0 0 0-.095.082C1.578 18.73-.944 32.144.293 45.39a.244.244 0 0 0 .093.167c6.073 4.46 11.955 7.167 17.729 8.962a.23.23 0 0 0 .249-.082 42.08 42.08 0 0 0 3.627-5.9.225.225 0 0 0-.123-.312 38.772 38.772 0 0 1-5.539-2.64.228.228 0 0 1-.022-.378c.372-.279.744-.569 1.1-.862a.22.22 0 0 1 .23-.03c11.619 5.304 24.198 5.304 35.68 0a.219.219 0 0 1 .233.027c.356.293.728.586 1.103.865a.228.228 0 0 1-.02.378 36.384 36.384 0 0 1-5.54 2.637.227.227 0 0 0-.121.315 47.249 47.249 0 0 0 3.624 5.897.225.225 0 0 0 .249.084c5.801-1.794 11.684-4.502 17.757-8.961a.228.228 0 0 0 .092-.164c1.48-15.315-2.48-28.618-10.497-40.412a.18.18 0 0 0-.093-.084Zm-36.38 32.427c-3.497 0-6.38-3.211-6.38-7.156 0-3.944 2.827-7.156 6.38-7.156 3.583 0 6.438 3.24 6.382 7.156 0 3.945-2.827 7.156-6.381 7.156Zm23.593 0c-3.498 0-6.38-3.211-6.38-7.156 0-3.944 2.826-7.156 6.38-7.156 3.582 0 6.437 3.24 6.38 7.156 0 3.945-2.798 7.156-6.38 7.156Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h71v55H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
       no-repeat;
   }
+
+  .group > summary {
+    display: flex;
+    cursor: pointer;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .group-content {
+    position: absolute;
+    background: var(--colorNeutralBackground1);
+    padding: 0;
+    box-shadow: var(--shadow4);
+  }
+
+  .group-content li {
+    list-style: none;
+  }
+  .group-content a {
+    display: flex;
+  }
+  .group-content a:hover {
+    background-color: var(--colorNeutralBackground2)
+  }
 </style>
 <nav aria-label="Main" class="navbar">
   <div class="items">
     <Link href="/" class="brand"><b>TypeSpec</b></Link>
-    <HeaderMenu
-      client:only="react"
-      className="item link"
-      links={[
-        {
-          label: "OpenAPI",
-          to: "/openapi",
-        },
-        {
-          label: "Data validation and type consistency",
-          to: "/data-validation",
-        },
-        {
-          label: "Tooling support",
-          to: "/tooling",
-        },
-      ]}><span class="use-case-menu-btn">Use cases <Icon name="down-caret" /></span></HeaderMenu
-    >
+    <details class="group">
+      <summary>Use cases <Icon name="down-caret" /></summary>
+      <ul class="group-content">
+        <li><Link class="item link" href="/openapi">OpenAPI</Link></li>
+        <li><Link class="item link" href="/data-validation">Data Validation</Link></li>
+        <li><Link class="item link" href="/tooling">Tooling support</Link></li>
+      </ul>
+    </details>
     <Link class="item link" href="/docs">Docs</Link>
     <Link class="item link" href="/playground">Playground</Link>
     <!-- TODO: add blog -->

diff --git a/packages/website-astro/src/components/header/menu.tsx b/packages/website-astro/src/components/header/menu.tsx