add items to menu nav (#108)

* add items to menu nav

* fix code style

* remove class

* Update astro/components/SiteTitle.astro

Co-authored-by: Yagiz Nizipli <[email protected]>

* rename vars

---------

Co-authored-by: Yagiz Nizipli <[email protected]>

Author: bjohansebas

astro.config.mts

@@ -63,6 +63,9 @@ export default defineConfig({
           ],
         },
       ],
+      components: {
+        SiteTitle: './astro/components/SiteTitle.astro',
+      },
       favicon: './public/favicon-32x32.png',
       logo: {
         light: './astro/assets/logo-light.svg',

astro/components/SiteTitle.astro

@@ -0,0 +1,76 @@
+---
+import AstrolightSiteTitle from '@astrojs/starlight/components/SiteTitle.astro'
+import type { Props } from '@astrojs/starlight/props'
+
+const menuItems = [
+  { name: 'Docs', href: '/introduction' },
+  { name: 'Performance', href: '/performance' },
+  { name: 'Playground', href: '/playground' },
+]
+
+function pathsMatch(lhs: string, rhs: string): boolean {
+  return rhs.includes(lhs)
+}
+---
+
+<div>
+  <AstrolightSiteTitle {...Astro.props} />
+
+  <div class="separator"></div>
+
+  <div class="menu-items">
+    {
+      menuItems.map((menuItem) => (
+        <a
+          href={menuItem.href}
+          aria-current={
+            pathsMatch(encodeURI(menuItem.href), Astro.url.pathname) && "page"
+          }
+        >
+          <span>{menuItem.name}</span>
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  div {
+    display: flex;
+    gap: var(--sl-content-pad-x);
+    align-items: center;
+  }
+
+  .separator {
+    content: "";
+    height: 1.5rem;
+    border-inline-end: 1px solid var(--sl-color-gray-4);
+  }
+
+  div a {
+    text-decoration: none;
+    color: var(--sl-color-white);
+    font-size: var(--sl-text-base);
+    font-weight: 500;
+  }
+
+  div a:hover {
+    text-decoration: underline;
+    color: var(--sl-color-text-accent);
+  }
+
+  [aria-current="page"],
+  [aria-current="page"]:hover,
+  [aria-current="page"]:focus {
+    color: var(--sl-color-text-accent);
+  }
+
+  @media (min-width: 50rem) {
+    .menu-items {
+      display: flex;
+    }
+    .separator {
+      display: block;
+    }
+  }
+</style>