feat: new navbar

packages/i18n/strings/en.json

@@ -44,7 +44,7 @@
   },
 
   "home": {
-    "search": "Search tanks, players, tools...",
+    "search": "Search tanks, players, avatars...",
     "credit": "by TrèsAbhi"
   },
 
@@ -60,5 +60,10 @@
     "2": "Rare",
     "3": "Epic",
     "4": "Legendary"
+  },
+
+  "navbar": {
+    "home": "Home",
+    "settings": "Settings"
   }
 }

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(--gray-3);
-    background-color: var(--accent-2);
     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 {
+        cursor: pointer;
-          padding: var(--space-4);
+        color: var(--color-regular);
+        text-decoration: none;
+        color: var(--gray-11);
 
-          cursor: pointer;
+        &[data-selected="true"] {
-          color: var(--color-regular);
+          color: var(--accent-12);
 
-          &:focus {
+          .selector {
-            outline: var(--outline-focus);
+            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} data-selected>
-      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+      <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">
+    <LinkI18n {locale} href="/settings" className="action" tabIndex={0}>
-        <HamburgerMenuIcon className="icon" />
+      <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>
     );
   }

packages/website-ue/src/layouts/BaseLayout.astro

@@ -3,7 +3,6 @@ import BaseMeta from "../components/BaseMeta.astro";
 import BaseStyles from "../components/BaseStyles.astro";
 import ColorAlias from "../components/ColorAlias.astro";
 import ColorScale from "../components/ColorScale.astro";
-import Footer from "../components/Footer.astro";
 import Navbar from "../components/Navbar.astro";
 import type { Color } from "../core/ui/color";
 
@@ -42,7 +41,7 @@ const { accent, noNavbar, locale } = Astro.props;
         flex-direction: column;
         min-height: 100dvh;
 
-        background-color: var(--gray-1);
+        background-color: var(--gray-3);
         color: var(--gray-12);
         font-family: var(--font-family-regular);
 
@@ -51,7 +50,8 @@ const { accent, noNavbar, locale } = Astro.props;
           flex: 1;
           flex-direction: column;
           gap: var(--space-5);
-          padding: var(--space-4) 0;
+
+          background-color: var(--gray-1);
         }
       }
     </style>
@@ -60,14 +60,12 @@ const { accent, noNavbar, locale } = Astro.props;
   </head>
 
   <body class="dark">
-    {!noNavbar && <Navbar {locale} />}
-
     <slot name="pre-app" />
 
     <div class="app">
       <slot />
     </div>
 
-    <Footer {locale} />
+    {!noNavbar && <Navbar {locale} />}
   </body>
 </html>

packages/website-ue/src/pages/[...locale]/_index.astro

@@ -0,0 +1,34 @@
+---
+import locales from "@blitzkit/i18n/locales.json";
+import "@radix-ui/colors/amber-dark.css";
+import type { GetStaticPaths } from "astro";
+import ColorScale from "../../components/ColorScale.astro";
+import HomeHero from "../../components/HomeHero.astro";
+import { Section } from "../../components/Section";
+import ToolCard from "../../components/ToolCard.astro";
+import { tools } from "../../core/tools/tools";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+export const getStaticPaths = (() => {
+  return [
+    ...locales.supported
+      .filter(({ locale }) => locale !== locales.default)
+      .map(({ locale }) => ({ params: { locale }, props: { locale } })),
+    { params: { locale: undefined }, props: { locale: locales.default } },
+  ];
+}) satisfies GetStaticPaths;
+
+const { locale } = Astro.props;
+---
+
+<BaseLayout {locale} accent="amber" noNavbar>
+  <ColorScale color="purple" slot="head" />
+  <ColorScale color="gold" slot="head" />
+  <ColorScale color="lime" slot="head" />
+
+  <HomeHero {locale} />
+
+  <Section>
+    {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}
+  </Section>
+</BaseLayout>

packages/website-ue/src/pages/[...locale]/index.astro

@@ -1,12 +1,7 @@
 ---
 import locales from "@blitzkit/i18n/locales.json";
-import "@radix-ui/colors/amber-dark.css";
 import type { GetStaticPaths } from "astro";
-import ColorScale from "../../components/ColorScale.astro";
 import HomeHero from "../../components/HomeHero.astro";
-import { Section } from "../../components/Section";
-import ToolCard from "../../components/ToolCard.astro";
-import { tools } from "../../core/tools/tools";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
 export const getStaticPaths = (() => {
@@ -21,14 +16,6 @@ export const getStaticPaths = (() => {
 const { locale } = Astro.props;
 ---
 
-<BaseLayout {locale} accent="amber" noNavbar>
+<BaseLayout {locale} accent="amber">
-  <ColorScale color="purple" slot="head" />
-  <ColorScale color="gold" slot="head" />
-  <ColorScale color="lime" slot="head" />
-
   <HomeHero {locale} />
-
-  <Section>
-    {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}
-  </Section>
 </BaseLayout>