feat: navbar rewrite

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;

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;

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%;
+    left: 0;
-    margin-bottom: calc(var(--space-4) * -1);
 
     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 {
+      .side {
-        width: calc(var(--space-5) + var(--space-4));
-        height: calc(var(--space-5) + var(--space-4));
-
         display: flex;
-        align-items: center;
-        justify-content: center;
 
-        .icon {
+        .action {
-          width: 1.25em;
+          padding: var(--space-4);
-          height: 1.25em;
+
+          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="content">
-    <div class="action">
+    <div class="side">
-      <BlitzKitIcon className="icon" />
+      <LinkI18n {locale} className="action" tabIndex={0}>
-    </div>
+        <BlitzKitIcon className="icon" />
-  </div>
+      </LinkI18n>
-
-  <div class="side">
-    <div class="action">
-      <MagnifyingGlassIcon className="icon" />
     </div>
 
-    <div class="action">
+    <div class="side">
-      <HamburgerMenuIcon className="icon" />
+      <div class="action" tabindex="0">
+        <MagnifyingGlassIcon className="icon" />
+      </div>
+
+      <div class="action" tabindex="0">
+        <HamburgerMenuIcon className="icon" />
+      </div>
     </div>
   </div>
 </div>

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;

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 />