feat: new navbar

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

@@ -31,8 +31,6 @@ const strings = await api.strings(locale);
       width: 100%;
       height: calc(100% - var(--space-5) / 2);
 
-      z-index: -1;
-
       background-image: url(/assets/home-hero.webp);
       background-size: cover;
       background-position: top;
@@ -81,9 +79,10 @@ const strings = await api.strings(locale);
       }
     }
 
-    .text-field {
+    .search {
       width: 100%;
       max-width: 25rem;
+      z-index: 0;
     }
   }
 </style>
@@ -104,7 +103,7 @@ const strings = await api.strings(locale);
     </Text>
   </div>
 
-  <TextField placeholder={strings.home.search}>
+  <TextField className="search" placeholder={strings.home.search}>
     <MagnifyingGlassIcon />
   </TextField>
 </div>

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>

packages/website-ue/src/components/TextField/index.tsx

@@ -13,19 +13,20 @@ export interface TextFieldProps extends ComponentProps<"input"> {
 }
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  ({ children, className, disabled, ...props }, ref) => {
+  ({ children, className, placeholder, disabled, ...props }, ref) => {
     const input = useRef<HTMLInputElement>(null);
 
     useImperativeHandle(ref, () => input.current!, []);
 
     return (
       <div
+        {...props}
         className={classNames("text-field", className)}
         data-has-icon={children !== undefined}
         data-disabled={disabled}
       >
         {children}
-        <input disabled={disabled} ref={input} {...props} />
+        <input disabled={disabled} ref={input} placeholder={placeholder} />
       </div>
     );
   }