From e9684ce0338c57b6bb44fe70e8fc46234fa48cb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 13 Jan 2026 20:33:14 -0600
Subject: [PATCH] feat: navbar rewrite

---
 .../src/components/BaseStyles.astro           |  2 +
 .../website-ue/src/components/Footer.astro    |  2 +-
 .../website-ue/src/components/Navbar.astro    | 70 ++++++++++++-------
 .../website-ue/src/components/Section.astro   |  2 +-
 .../website-ue/src/layouts/BaseLayout.astro   |  2 +-
 5 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro
index 8bac9c140..b3747f468 100644
--- a/packages/website-ue/src/components/BaseStyles.astro
+++ b/packages/website-ue/src/components/BaseStyles.astro
@@ -16,6 +16,8 @@ import "@fontsource-variable/roboto-flex";
     --space-8: 16rem;
     --space-9: 32rem;
 
+    --page-width: 52rem;
+
     --max-size: max(100vw, 100vh);
 
     --font-size-regular: 1rem;
diff --git a/packages/website-ue/src/components/Footer.astro b/packages/website-ue/src/components/Footer.astro
index dccf64ec1..3f2e02fe5 100644
--- a/packages/website-ue/src/components/Footer.astro
+++ b/packages/website-ue/src/components/Footer.astro
@@ -27,7 +27,7 @@ const strings = await api.strings(locale);
 
     .content {
       flex: 1;
-      max-width: 52rem;
+      max-width: var(--page-width);
 
       .logo {
         display: flex;
diff --git a/packages/website-ue/src/components/Navbar.astro b/packages/website-ue/src/components/Navbar.astro
index 5127b29ba..10baaa8e3 100644
--- a/packages/website-ue/src/components/Navbar.astro
+++ b/packages/website-ue/src/components/Navbar.astro
@@ -1,36 +1,54 @@
 ---
 import { HamburgerMenuIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { BlitzKitIcon } from "../icons/BlitzKit";
+import { LinkI18n } from "./LinkI18n";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
 ---
 
 <style>
   .navbar {
     position: sticky;
     top: 0;
-    width: 100%;
-    margin-bottom: calc(var(--space-4) * -1);
+    left: 0;
 
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
 
     z-index: 1;
     backdrop-filter: var(--blur-glass);
-    background-color: var(--black-a11);
+    background-color: var(--black-a5);
+
+    .content {
+      flex: 1;
+      max-width: calc(var(--page-width) + 2 * var(--space-4));
 
-    .side {
       display: flex;
+      align-items: center;
+      justify-content: space-between;
 
-      .action {
-        width: calc(var(--space-5) + var(--space-4));
-        height: calc(var(--space-5) + var(--space-4));
-
+      .side {
         display: flex;
-        align-items: center;
-        justify-content: center;
 
-        .icon {
-          width: 1.25em;
-          height: 1.25em;
+        .action {
+          padding: var(--space-4);
+
+          cursor: pointer;
+          color: var(--color-regular);
+
+          &:focus {
+            outline: var(--outline-focus);
+          }
+
+          .icon {
+            width: 1.25em;
+            height: 1.25em;
+            vertical-align: top;
+          }
         }
       }
     }
@@ -38,19 +56,21 @@ import { BlitzKitIcon } from "../icons/BlitzKit";
 </style>
 
 <div class="navbar">
-  <div class="side">
-    <div class="action">
-      <BlitzKitIcon className="icon" />
-    </div>
-  </div>
-
-  <div class="side">
-    <div class="action">
-      <MagnifyingGlassIcon className="icon" />
+  <div class="content">
+    <div class="side">
+      <LinkI18n {locale} className="action" tabIndex={0}>
+        <BlitzKitIcon className="icon" />
+      </LinkI18n>
     </div>
 
-    <div class="action">
-      <HamburgerMenuIcon className="icon" />
+    <div class="side">
+      <div class="action" tabindex="0">
+        <MagnifyingGlassIcon className="icon" />
+      </div>
+
+      <div class="action" tabindex="0">
+        <HamburgerMenuIcon className="icon" />
+      </div>
     </div>
   </div>
 </div>
diff --git a/packages/website-ue/src/components/Section.astro b/packages/website-ue/src/components/Section.astro
index 5839af491..7d30a525d 100644
--- a/packages/website-ue/src/components/Section.astro
+++ b/packages/website-ue/src/components/Section.astro
@@ -6,7 +6,7 @@
 
     .content {
       flex: 1;
-      max-width: 52rem;
+      max-width: var(--page-width);
 
       display: flex;
       flex-direction: column;
diff --git a/packages/website-ue/src/layouts/BaseLayout.astro b/packages/website-ue/src/layouts/BaseLayout.astro
index ef9f70c3f..9bfb69d4a 100644
--- a/packages/website-ue/src/layouts/BaseLayout.astro
+++ b/packages/website-ue/src/layouts/BaseLayout.astro
@@ -48,7 +48,7 @@ const { accent, noNavbar, locale } = Astro.props;
   </head>
 
   <body class="dark">
-    {!noNavbar && <Navbar />}
+    {!noNavbar && <Navbar {locale} />}
 
     <slot />