---
import logo from "../../pic/启优学LOGO-透明.png";
import { site } from "../data/site";
import { categoryToSlug, getCategoryNames } from "../lib/articles";
const path = Astro.url.pathname;
const isActive = (href: string) => href === "/" ? path === "/" : path.startsWith(href);
const categoryChildren = (await getCategoryNames()).map((label) => ({ href: `/articles/topic/${categoryToSlug(label)}/`, label }));
const nav = site.nav.map((item) => item.href === "/articles/" ? { ...item, children: [{ href: "/articles/", label: "全部资讯" }, ...categoryChildren] } : item);
---
<header class="site-header" data-header>
  <div class="container site-header__inner">
    <a class="brand" href="/" aria-label="启优学首页"><img src={logo.src} width="1214" height="910" alt="启优学一对一" /></a>
    <nav class="desktop-nav" aria-label="主导航"><ul>{nav.map((item) => <li class="nav-item"><a class="nav-link" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a><div class="nav-dropdown"><ul>{item.children.map((child) => <li><a href={child.href}>{child.label}</a></li>)}</ul></div></li>)}</ul></nav>
    <a class="button button--small header-cta" href="/contact/" data-open-contact>免费领取学情分析</a>
    <details class="mobile-nav"><summary aria-label="打开导航菜单"><span></span><span></span><span></span></summary><nav data-mobile-nav aria-label="移动端导航">{nav.map((item) => <div class="mobile-nav__group"><a class="mobile-nav__primary" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a><div class="mobile-subnav">{item.children.map((child) => <a href={child.href}>{child.label}</a>)}</div></div>)}<a class="button" href="/contact/" data-open-contact>免费领取学情分析</a></nav></details>
  </div>
</header>
