Replace collection select with horizontal category dropdown navigation

apps/docs/src/components/Shell.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { CategoryNavigation } from "./CategoryNavigation";
 import { Icon } from "@/components/Icon";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { DocLink } from "@/lib/docs";
@@ -69,7 +69,6 @@ export function Shell({
   current?: string;
   children: ReactNode;
 }) {
-  const router = useRouter();
   const dialog = useRef<HTMLDialogElement>(null);
   const input = useRef<HTMLInputElement>(null);
   const trigger = useRef<HTMLButtonElement>(null);
@@ -80,7 +79,6 @@ export function Shell({
   const [selected, setSelected] = useState(0);
   const [menu, setMenu] = useState(false);
   const collection = docs.find((d) => d.slug === current)?.collection;
-  const collections = collectionEntries(docs);
   const results = searchDocs.filter((d) =>
     (!collection || d.collection === collection) &&
     `${d.title} ${d.description} ${d.searchText ?? ""}`
@@ -125,22 +123,7 @@ export function Shell({
       </a>
       <header className="site-header">
         <Brand />
-        <nav className="top-nav" aria-label="文档选择">
-          <label className="collection-picker">
-            <span className="picker-category">{docs.find((d) => d.slug === current)?.category ?? "全部分类"}</span>
-            <span className="sr-only">选择分类与文档合集</span>
-            <select value={collection ?? ""} onChange={(event) => {
-              const entry = collections.find((c) => c.name === event.target.value)?.entry;
-              void router.push(entry ? `/docs/${entry.slug}` : "/");
-            }}>
-              <option value="">文档中心</option>
-              {[...new Set(docs.map((d) => d.category))].map((category) => <optgroup label={category} key={category}>
-                {collections.filter((c) => c.entry.category === category).map(({name}) => <option value={name} key={name}>{collectionLabel(name)}</option>)}
-              </optgroup>)}
-            </select>
-            <Icon name="chevron" size={13} />
-          </label>
-        </nav>
+        <CategoryNavigation docs={docs} current={current} />
         <button
           ref={trigger}
           className="search-trigger"