feat: override Header with PokeHeader & PokeNav components

https://starlight.astro.build/guides/overriding-components/

Default Header component
https://github.com/withastro/starlight/blob/main/packages/starlight/components/Header.astro

Author: Indyandie

astro.config.mjs

@@ -11,6 +11,7 @@ export default defineConfig({
       title: 'PokéAPI',
       components: {
         Footer: './src/components/PokeFooter.astro',
+        Header: './src/components/PokeHeader.astro',
       },
       customCss: [
         './src/styles/global.css',

src/components/PokeHeader.astro

@@ -0,0 +1,92 @@
+---
+import starlight from '@astrojs/starlight'
+import type { Props } from '@astrojs/starlight/props'
+
+import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro'
+import Search from '@astrojs/starlight/components/Search.astro'
+import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro'
+import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro'
+import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro'
+
+import PokeNav from './PokeNav.astro'
+
+/**
+ * Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
+ */
+// const shouldRenderSearch = config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro'
+---
+
+<div class="header sl-flex">
+  <div class="title-wrapper sl-flex">
+    <SiteTitle {...Astro.props} />
+  </div>
+  <div class="sl-flex print:hidden">
+    <!-- {shouldRenderSearch && <Search {...Astro.props} />} -->
+    <Search {...Astro.props} />
+  </div>
+  <div class="sl-hidden md:sl-flex print:hidden right-group">
+    <div class="sl-flex social-icons">
+      <PokeNav/>
+      <SocialIcons {...Astro.props} />
+    </div>
+    <ThemeSelect {...Astro.props} />
+    <LanguageSelect {...Astro.props} />
+  </div>
+</div>
+
+<style>
+  .header {
+    gap: var(--sl-nav-gap);
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+  }
+
+  .title-wrapper {
+    /* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
+    overflow: clip;
+    /* Avoid clipping focus ring around link inside title wrapper. */
+    padding: 0.25rem;
+    margin: -0.25rem;
+    min-width: 0;
+  }
+
+  .right-group,
+  .social-icons {
+    gap: 1rem;
+    align-items: center;
+  }
+  .social-icons::after {
+    content: '';
+    height: 2rem;
+    border-inline-end: 1px solid var(--sl-color-gray-5);
+  }
+
+  @media (min-width: 50rem) {
+    :global(:root[data-has-sidebar]) {
+      --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+    }
+    :global(:root:not([data-has-toc])) {
+      --__toc-width: 0rem;
+    }
+    .header {
+      --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
+      --__main-column-fr: calc(
+        (
+          100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width))
+            - 2 * var(--__toc-width, var(--sl-nav-pad-x))
+            - var(--sl-content-inline-start, 0rem)
+            - var(--sl-content-width)
+        )
+          / 2
+      );
+      display: grid;
+      grid-template-columns: /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest  */
+        minmax(
+        calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
+        auto
+      ) /* 2 (search box): all free space that is available. */ 1fr /* 3 (right items): use the space that these need. */ auto;
+      align-content: center;
+    }
+  }
+</style>

src/components/PokeNav.astro

@@ -0,0 +1,24 @@
+<nav>
+  <ul
+    class="
+      flex gap-6
+      text-(--sl-color-white) pr-4
+      [&_li]:hover:text-(--sl-color-accent-high)
+      [&_li]:hover:font-bold
+      [&_li]:hover:underline
+    "
+  >
+    <li>
+      <a href="/">Home</a>
+    </li>
+    <li>
+      <a href="/about">About</a>
+    </li>
+    <li>
+      <a href="/v2">API v2</a>
+    </li>
+    <li>
+      <a href="/graphql">GraphQL v1Beta</a>
+    </li>
+  </ul>
+</nav>