Refactor Header layout and responsive styles (#17)

* Refactor Header layout and responsive styles

* Fix mobile header height to prevent stacked layout clipping

Agent-Logs-Url: https://github.com/FOSSBilling/docs/sessions/24d8ecb7-d407-4b82-b2f4-e30bbb19d242

Co-authored-by: admdly <2807620+admdly@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: admdly <2807620+admdly@users.noreply.github.com>

Author: admdly

src/components/starlight/Header.astro

@@ -4,79 +4,72 @@ import Search from 'virtual:starlight/components/Search';
 import SiteTitle from 'virtual:starlight/components/SiteTitle';
 import SocialIcons from 'virtual:starlight/components/SocialIcons';
 import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
-
-const navLinks = [
-  { label: 'Documentation', href: '/' },
-  { label: 'Downloads', href: 'https://fossbilling.org/downloads' },
-  { label: 'Demo', href: 'https://fossbilling.org/demo' },
-  { label: 'Translate', href: 'https://translate.fossbilling.org/' },
-  {
-    label: 'Donate',
-    href: 'https://opencollective.com/fossbilling',
-    cta: true,
-  },
-];
-
-const currentPath = Astro.url.pathname.replace(/\/+$/, '') || '/';
 ---
 
 <div class="fb-header">
   <div class="fb-header__brand">
     <SiteTitle />
+    <span class="fb-header__title">Docs</span>
   </div>
 
-  <nav class="fb-header__nav" aria-label="Primary">
-    {
-      navLinks.map(({ label, href, cta }) => (
-        <a
-          href={href}
-          class:list={[
-            'fb-header__link',
-            {
-              'is-active': href === '/' && currentPath.startsWith('/'),
-              'is-cta': cta,
-            },
-          ]}
-        >
-          {label}
-        </a>
-      ))
-    }
-  </nav>
-
-  <div class="fb-header__search">
-    <Search />
-  </div>
+  <div class="fb-header__tools">
+    <div class="fb-header__search">
+      <Search />
+    </div>
 
-  <div class="fb-header__actions">
-    <div class="fb-header__social">
-      <SocialIcons />
+    <div class="fb-header__actions">
+      <div class="fb-header__social">
+        <SocialIcons />
+      </div>
+      <ThemeSelect />
+      <LanguageSelect />
     </div>
-    <ThemeSelect />
-    <LanguageSelect />
   </div>
 </div>
 
 <style>
   .fb-header {
-    display: grid;
-    grid-template-columns: minmax(0, auto) 1fr;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    gap: 0.75rem 1rem;
-    height: 100%;
+    gap: 0.75rem;
+    height: auto;
   }
 
   .fb-header__brand {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
     min-width: 0;
+    width: 100%;
+    overflow: clip;
+    padding: 0.25rem;
+    margin: -0.25rem;
   }
 
-  .fb-header__search {
-    grid-column: 1 / -1;
+  .fb-header__title {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    border-inline-start: 1px solid var(--sl-color-gray-5);
+    padding-inline-start: 0.875rem;
+    color: var(--sl-color-gray-2);
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
   }
 
-  .fb-header__nav,
-  .fb-header__actions {
-    display: none;
+  .fb-header__tools {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .fb-header__search {
+    min-width: 0;
   }
 
   .fb-header__social {
@@ -85,50 +78,36 @@ const currentPath = Astro.url.pathname.replace(/\/+$/, '') || '/';
     gap: 0.25rem;
   }
 
-  .fb-header__link {
-    color: var(--sl-color-gray-3);
-    font-size: 0.98rem;
-    font-weight: 500;
-    text-decoration: none;
-    transition: color 0.2s ease;
-  }
-
-  .fb-header__link:hover,
-  .fb-header__link.is-active {
-    color: var(--sl-color-white);
-  }
-
-  .fb-header__link.is-cta {
-    color: var(--sl-color-white);
+  .fb-header__actions {
+    display: none;
   }
 
   @media (min-width: 50rem) {
     .fb-header {
-      grid-template-columns: minmax(0, auto) minmax(14rem, 1fr) auto;
-      gap: 1rem;
+      display: grid;
+      grid-template-columns: minmax(0, auto) minmax(0, 1fr);
+      gap: 1rem 1.25rem;
+      height: 100%;
     }
 
-    .fb-header__search {
-      grid-column: auto;
+    .fb-header__tools {
+      grid-template-columns: minmax(14rem, 22rem) auto;
+      align-items: center;
+      justify-content: end;
+      justify-self: end;
+      width: auto;
+      max-width: 100%;
     }
 
     .fb-header__actions {
       display: flex;
       align-items: center;
       gap: 0.75rem;
     }
-  }
-
-  @media (min-width: 72rem) {
-    .fb-header {
-      grid-template-columns: minmax(12rem, auto) auto minmax(14rem, 1fr) auto;
-      gap: 1.25rem;
-    }
 
-    .fb-header__nav {
-      display: flex;
-      align-items: center;
-      gap: 1.5rem;
+    .fb-header__social {
+      padding-inline-end: 0.875rem;
+      border-inline-end: 1px solid var(--sl-color-gray-5);
     }
   }
 </style>