From 9ccd24e10f7f2387a5a8f841f7f496bbb8389e81 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Tue, 20 Aug 2024 11:46:17 -0500
Subject: [PATCH 1/5] add items to menu nav

---
 astro.config.mts                 |  3 ++
 astro/components/SiteTitle.astro | 76 ++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 astro/components/SiteTitle.astro

diff --git a/astro.config.mts b/astro.config.mts
index cb3c755..058cbb4 100644
--- a/astro.config.mts
+++ b/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',
diff --git a/astro/components/SiteTitle.astro b/astro/components/SiteTitle.astro
new file mode 100644
index 0000000..de66a8c
--- /dev/null
+++ b/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(pathA: string, pathB: string): boolean {
+  return pathB.includes(pathA);
+}
+---
+
+<div>
+  <AstrolightSiteTitle {...Astro.props} />
+
+  <div class="sl-hidden separator"></div>
+
+  <div class="sl-hidden 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>
\ No newline at end of file

From b70804bbabb52fc98f8981b1cb2849aa7b654997 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Tue, 20 Aug 2024 11:51:04 -0500
Subject: [PATCH 2/5] fix code style

---
 astro/components/SiteTitle.astro | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/astro/components/SiteTitle.astro b/astro/components/SiteTitle.astro
index de66a8c..48e56c1 100644
--- a/astro/components/SiteTitle.astro
+++ b/astro/components/SiteTitle.astro
@@ -1,15 +1,15 @@
 ---
-import AstrolightSiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
-import type { Props } from "@astrojs/starlight/props";
+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" },
-];
+  { name: 'Docs', href: '/introduction' },
+  { name: 'Performance', href: '/performance' },
+  { name: 'Playground', href: '/playground' },
+]
 
 function pathsMatch(pathA: string, pathB: string): boolean {
-  return pathB.includes(pathA);
+  return pathB.includes(pathA)
 }
 ---
 

From f5cdb49993c095517f1dfcd63250824937f684fc Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Tue, 20 Aug 2024 11:55:34 -0500
Subject: [PATCH 3/5] remove class

---
 astro/components/SiteTitle.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/astro/components/SiteTitle.astro b/astro/components/SiteTitle.astro
index 48e56c1..4719b48 100644
--- a/astro/components/SiteTitle.astro
+++ b/astro/components/SiteTitle.astro
@@ -16,9 +16,9 @@ function pathsMatch(pathA: string, pathB: string): boolean {
 <div>
   <AstrolightSiteTitle {...Astro.props} />
 
-  <div class="sl-hidden separator"></div>
+  <div class="separator"></div>
 
-  <div class="sl-hidden menu-items">
+  <div class="menu-items">
     {
       menuItems.map((menuItem) => (
         <a

From a50a645892a7a037b7e88199a5f26b3dc1328abc Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Tue, 20 Aug 2024 12:28:23 -0500
Subject: [PATCH 4/5] Update astro/components/SiteTitle.astro

Co-authored-by: Yagiz Nizipli <yagiz@nizipli.com>
---
 astro/components/SiteTitle.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/astro/components/SiteTitle.astro b/astro/components/SiteTitle.astro
index 4719b48..e69bde1 100644
--- a/astro/components/SiteTitle.astro
+++ b/astro/components/SiteTitle.astro
@@ -73,4 +73,4 @@ function pathsMatch(pathA: string, pathB: string): boolean {
       display: block;
     }
   }
-</style>
\ No newline at end of file
+</style>

From 46a8c71f5732d2afd67f49648fe22316e6237c7b Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Tue, 20 Aug 2024 12:30:27 -0500
Subject: [PATCH 5/5] rename vars

---
 astro/components/SiteTitle.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/astro/components/SiteTitle.astro b/astro/components/SiteTitle.astro
index e69bde1..a5f135a 100644
--- a/astro/components/SiteTitle.astro
+++ b/astro/components/SiteTitle.astro
@@ -8,8 +8,8 @@ const menuItems = [
   { name: 'Playground', href: '/playground' },
 ]
 
-function pathsMatch(pathA: string, pathB: string): boolean {
-  return pathB.includes(pathA)
+function pathsMatch(lhs: string, rhs: string): boolean {
+  return rhs.includes(lhs)
 }
 ---