From ccfe8bb649772caa8f61eed1f48ee08b2cd228f4 Mon Sep 17 00:00:00 2001
From: Josh <jknapp85@gmail.com>
Date: Sun, 17 May 2026 17:17:57 -0700
Subject: [PATCH] feat(nav): top-bar Hosting + Client Portal links

Adds external links to anhonesthost.com (Hosting) and
secure.anhonesthost.com (Client Portal) in both the Starlight header
(via the SiteTitle override) and the custom hub page header. Hidden
on narrow viewports so the search box, hamburger, and theme toggle
keep room.
---
 src/components/SiteTitle.astro | 71 +++++++++++++++++++++++++---------
 src/pages/index.astro          | 31 +++++++++++++++
 2 files changed, 84 insertions(+), 18 deletions(-)

diff --git a/src/components/SiteTitle.astro b/src/components/SiteTitle.astro
index 07dee1e..8dd9857 100644
--- a/src/components/SiteTitle.astro
+++ b/src/components/SiteTitle.astro
@@ -2,25 +2,37 @@
 const { siteTitleHref } = Astro.locals.starlightRoute;
 ---
 
-<a href={siteTitleHref} class="site-title sl-flex" translate="no" aria-label="AnHonestHost Knowledge Base">
-  <svg
-    class="brand-logo"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 240 32"
-    fill="none"
-    height="28"
-    role="img"
-    aria-hidden="true"
-  >
-    <path d="M12 4L3 16L12 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M24 4L33 16L24 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <line x1="12" y1="16" x2="24" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.35"/>
-    <text x="44" y="21" font-family="Inter, system-ui, -apple-system, sans-serif" font-size="18" font-weight="800" fill="currentColor" letter-spacing="-0.5">AnHonest<tspan fill="#00d4aa">Host</tspan></text>
-  </svg>
-  <span class="kb-label">Knowledge Base</span>
-</a>
+<div class="site-title-row sl-flex">
+  <a href={siteTitleHref} class="site-title sl-flex" translate="no" aria-label="AnHonestHost Knowledge Base">
+    <svg
+      class="brand-logo"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 240 32"
+      fill="none"
+      height="28"
+      role="img"
+      aria-hidden="true"
+    >
+      <path d="M12 4L3 16L12 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M24 4L33 16L24 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <line x1="12" y1="16" x2="24" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.35"/>
+      <text x="44" y="21" font-family="Inter, system-ui, -apple-system, sans-serif" font-size="18" font-weight="800" fill="currentColor" letter-spacing="-0.5">AnHonest<tspan fill="#00d4aa">Host</tspan></text>
+    </svg>
+    <span class="kb-label">Knowledge Base</span>
+  </a>
+
+  <nav class="ext-nav" aria-label="AnHonestHost links">
+    <a href="https://anhonesthost.com/" class="ext-link">Hosting</a>
+    <a href="https://secure.anhonesthost.com/clientarea.php" class="ext-link">Client Portal</a>
+  </nav>
+</div>
 
 <style>
+  .site-title-row {
+    align-items: center;
+    gap: 1.5rem;
+    min-width: 0;
+  }
   .site-title {
     align-items: center;
     gap: 0.75rem;
@@ -41,9 +53,32 @@ const { siteTitleHref } = Astro.locals.starlightRoute;
     border-left: 1px solid var(--anhh-border-color, #334155);
     line-height: 1;
   }
-  @media (max-width: 50em) {
+  .ext-nav {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+  }
+  .ext-link {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--anhh-text-secondary, #94a3b8);
+    text-decoration: none;
+    white-space: nowrap;
+    transition: color 120ms ease;
+  }
+  .ext-link:hover,
+  .ext-link:focus {
+    color: var(--anhh-accent, #00d4aa);
+    outline: none;
+  }
+  /* Hide kb-label and external nav on narrow viewports — search + hamburger
+     get tight on mobile. */
+  @media (max-width: 60em) {
     .kb-label {
       display: none;
     }
+    .ext-nav {
+      display: none;
+    }
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9a6b0e0..61ce16c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -79,6 +79,11 @@ const visibleProducts: Product[] = Array.from(byProduct.entries())
       }
       header {
         border-bottom: 1px solid var(--anhh-border-color, #334155);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1.5rem;
+        flex-wrap: wrap;
       }
       a.brand {
         display: inline-flex;
@@ -87,6 +92,28 @@ const visibleProducts: Product[] = Array.from(byProduct.entries())
         color: inherit;
         text-decoration: none;
       }
+      .ext-nav {
+        display: flex;
+        align-items: center;
+        gap: 1.25rem;
+      }
+      .ext-link {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--anhh-text-secondary, #94a3b8);
+        text-decoration: none;
+        white-space: nowrap;
+      }
+      .ext-link:hover,
+      .ext-link:focus {
+        color: var(--anhh-accent, #00d4aa);
+        outline: none;
+      }
+      @media (max-width: 40em) {
+        .ext-nav {
+          display: none;
+        }
+      }
       .kb-label {
         font-size: 0.875rem;
         font-weight: 500;
@@ -177,6 +204,10 @@ const visibleProducts: Product[] = Array.from(byProduct.entries())
         </svg>
         <span class="kb-label">Knowledge Base</span>
       </a>
+      <nav class="ext-nav" aria-label="AnHonestHost links">
+        <a href="https://anhonesthost.com/" class="ext-link">Hosting</a>
+        <a href="https://secure.anhonesthost.com/clientarea.php" class="ext-link">Client Portal</a>
+      </nav>
     </header>
     <main>
       <h1>Knowledge Base</h1>