feat: new navbar

packages/website-ue/src/components/Navbar.astro

@@ -1,13 +1,20 @@
 ---
-import { HamburgerMenuIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import {
+  GearIcon,
+  HamburgerMenuIcon,
+  MagnifyingGlassIcon,
+} from "@radix-ui/react-icons";
 import { BlitzKitIcon } from "../icons/BlitzKit";
 import { LinkI18n } from "./LinkI18n";
+import { Text } from "./Text";
+import { api } from "../core/api/dynamic";
 
 interface Props {
   locale: string;
 }
 
 const { locale } = Astro.props;
+const strings = await api.strings(locale);
 ---
 
 <style>
@@ -20,8 +27,7 @@ const { locale } = Astro.props;
     justify-content: center;
 
     z-index: 1;
-    backdrop-filter: var(--blur-glass) brightness(25%);
-    background-color: var(--accent-2);
+    background-color: var(--gray-3);
     box-shadow: var(--shadow-none);
 
     transition-duration: var(--duration-brief);
@@ -37,27 +43,53 @@ const { locale } = Astro.props;
 
       display: flex;
       align-items: center;
-      justify-content: space-between;
 
-      .side {
+      .action {
+        flex: 1;
+
         display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: var(--space-3);
+        gap: var(--space-2);
 
-        .action {
-          padding: var(--space-4);
+        cursor: pointer;
+        color: var(--color-regular);
+        text-decoration: none;
+        color: var(--gray-11);
 
-          cursor: pointer;
-          color: var(--color-regular);
+        &[data-selected="true"] {
+          color: var(--accent-12);
 
-          &:focus {
-            outline: var(--outline-focus);
+          .selector {
+            background-color: var(--accent-5);
           }
 
+          .label {
+            color: var(--gray-12) !important;
+          }
+        }
+
+        .selector {
+          padding: var(--space-2);
+          border-radius: var(--max-size);
+
+          display: flex;
+          justify-content: center;
+
+          width: 100%;
+          max-width: var(--space-6);
+
           .icon {
             width: 1.25em;
             height: 1.25em;
             vertical-align: top;
           }
         }
+
+        .label {
+          font-size: var(--font-size-minor);
+        }
       }
     }
   }
@@ -76,20 +108,18 @@ const { locale } = Astro.props;
 
 <div id="navbar">
   <div class="content">
-    <div class="side">
-      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+    <LinkI18n {locale} href="/" className="action" tabIndex={0} data-selected>
+      <div class="selector">
         <BlitzKitIcon className="icon" />
-      </LinkI18n>
-    </div>
-
-    <div class="side">
-      <div class="action" tabindex="0">
-        <MagnifyingGlassIcon className="icon" />
       </div>
+      <Text lowContrast className="label">{strings.navbar.home}</Text>
+    </LinkI18n>
 
-      <div class="action" tabindex="0">
-        <HamburgerMenuIcon className="icon" />
+    <LinkI18n {locale} href="/settings" className="action" tabIndex={0}>
+      <div class="selector">
+        <GearIcon className="icon" />
       </div>
-    </div>
+      <Text lowContrast className="label">{strings.navbar.settings}</Text>
+    </LinkI18n>
   </div>
 </div>