feat: some navbar

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

@@ -43,5 +43,7 @@ import "@fontsource-variable/roboto-flex";
         var(--space-1) var(--white-a3),
       inset calc(var(--space-1) * sin(45deg) * -1)
         calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--black-a3);
+
+    --blur-glass: blur(4rem);
   }
 </style>

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

@@ -1,12 +1,13 @@
 ---
-import type { Color } from "../pages/styles/colors/[accent].css";
+import type { Color } from "../core/ui/color";
 
 interface Props {
   color: Color;
   alias: string;
+  alpha?: boolean;
 }
 
-const { color, alias } = Astro.props;
+const { color, alias, alpha } = Astro.props;
 
 let styles = "";
 
@@ -14,7 +15,7 @@ styles += ":root{";
 
 for (let i = 0; i < 12; i++) {
   const n = i + 1;
-  styles += `--${alias}-${n}:var(--${color}-${n});`;
+  styles += `--${alias}-${alpha ? "a" : ""}${n}:var(--${color}-${alpha ? "a" : ""}${n});`;
 }
 
 styles += "}";

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

@@ -0,0 +1,56 @@
+---
+import { HamburgerMenuIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { BlitzKitIcon } from "../icons/BlitzKit";
+---
+
+<style>
+  .navbar {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    margin-bottom: calc(var(--space-5) * -1);
+
+    display: flex;
+    justify-content: space-between;
+
+    z-index: 1;
+    backdrop-filter: var(--blur-glass);
+    background-color: var(--black-a11);
+
+    .side {
+      display: flex;
+
+      .action {
+        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 {
+          width: 1.25em;
+          height: 1.25em;
+        }
+      }
+    }
+  }
+</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>
+
+    <div class="action">
+      <HamburgerMenuIcon className="icon" />
+    </div>
+  </div>
+</div>

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

@@ -20,8 +20,12 @@ const { accent, noNavbar } = Astro.props;
     <BaseMeta />
 
     <ColorScale color="mauve" />
-    <ColorScale color={accent} />
     <ColorAlias color="mauve" alias="gray" />
+
+    <ColorScale color="black" alpha />
+    <ColorScale color="white" alpha />
+
+    <ColorScale color={accent} />
     <ColorAlias color={accent} alias="accent" />
     <BaseStyles />
 
@@ -46,6 +50,6 @@ const { accent, noNavbar } = Astro.props;
 
     <slot />
 
-    {(<Footer />)}
+    <Footer />
   </body>
 </html>

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

@@ -21,12 +21,10 @@ export const getStaticPaths = (() => {
 const { locale } = Astro.props;
 ---
 
-<BaseLayout accent="amber">
+<BaseLayout accent="amber" noNavbar>
   <ColorScale color="purple" slot="head" />
   <ColorScale color="gold" slot="head" />
   <ColorScale color="lime" slot="head" />
-  <ColorScale color="black" alpha slot="head" />
-  <ColorScale color="white" alpha slot="head" />
 
   <HomeHero {locale} />
 

packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx

@@ -5,12 +5,9 @@ import { TankopediaToy } from "../../../../components/TankopediaToy";
 import { api } from "../../../../core/api/dynamic";
 import { characteristicsOrder } from "../../../../core/tankopedia/characteristicsOrder";
 import { computeCharacteristics } from "../../../../core/tankopedia/computeCharacteristics";
-import type { TerrainHardness } from "../../../../core/tankopedia/tankState";
+import { TerrainHardness } from "../../../../core/tankopedia/tankState";
 import { useAwait } from "../../../../hooks/useAwait";
-import {
-  Tankopedia,
-  type TankopediaCompare,
-} from "../../../../stores/tankopedia";
+import { Tankopedia, TankopediaCompare } from "../../../../stores/tankopedia";
 
 export function Page({ id }: { id: string }) {
   return (