feat: revert navbar

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

@@ -1,5 +1,5 @@
 import { literals } from "@blitzkit/i18n";
-import { Grade } from "@protos/auto_items";
+import { Grade } from "@protos/blitz_static_standard_grades_enum";
 import { DownloadIcon, StarFilledIcon } from "@radix-ui/react-icons";
 import type { Color } from "../../core/ui/color";
 import { useGameStrings } from "../../hooks/useGameStrings";
@@ -55,11 +55,11 @@ interface DetailsProps {
 }
 
 const gradeColors: Record<Grade, Color> = {
-  [Grade.GRADE_GRADE_UNSPECIFIED]: "gray",
-  [Grade.GRADE_GRADE_COMMON]: "gray",
-  [Grade.GRADE_GRADE_RARE]: "blue",
-  [Grade.GRADE_GRADE_EPIC]: "purple",
-  [Grade.GRADE_GRADE_LEGENDARY]: "amber",
+  [Grade.GRADE_UNSPECIFIED]: "gray",
+  [Grade.GRADE_COMMON]: "gray",
+  [Grade.GRADE_RARE]: "blue",
+  [Grade.GRADE_EPIC]: "purple",
+  [Grade.GRADE_LEGENDARY]: "amber",
 };
 
 function Details({ avatars }: DetailsProps) {

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

@@ -5,108 +5,77 @@ import { Text } from "./Text";
 import { api } from "../core/api/dynamic";
 import { tools } from "../core/tools/tools";
 import type { Tool } from "../core/tools/tools";
+import { HamburgerMenuIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 
 interface Props {
   locale: string;
-  selectedTool?: Tool;
 }
 
-const { locale, selectedTool } = Astro.props;
-const strings = await api.strings(locale);
-const toolsArray = Object.values(tools);
-
-const toolsSorted =
-  selectedTool === undefined
-    ? toolsArray
-    : [selectedTool, ...toolsArray.filter((tool) => tool !== selectedTool)];
+const { locale } = Astro.props;
 ---
 
 <style>
   #navbar {
-    position: fixed;
-    bottom: 0;
+    position: sticky;
+    top: 0;
     left: 0;
     width: 100%;
 
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    justify-content: center;
 
     z-index: 1;
-    background-color: var(--gray-a5);
+    background-color: var(--gray-a2);
     box-shadow: var(--shadow-none);
-    backdrop-filter: var(--blur-glass) brightness(5%);
-    border-radius: var(--space-4) var(--space-4) 0 0;
+    backdrop-filter: var(--blur-glass) brightness(10%);
+    box-shadow: var(--shadow-subtle);
 
     transition-duration: var(--duration-brief);
 
     &[data-sticky="true"] {
-      transform: translateY(100%);
-    }
-
-    .bar {
-      width: 100%;
-      max-width: var(--space-6);
-      height: var(--space-2);
-      margin-top: var(--space-3);
-
-      background-color: var(--white-a2);
-
-      border-radius: var(--max-size);
+      transform: translateY(-100%);
+      box-shadow: var(--shadow-none);
     }
 
     .content {
+      display: flex;
+      justify-content: space-between;
+
       width: 100%;
       max-width: calc(var(--page-width) + 2 * var(--space-4));
 
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-
-      .action {
-        flex: 1;
-
+      .group {
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: var(--space-3);
         gap: var(--space-2);
 
-        cursor: pointer;
-        color: var(--color-regular);
-        text-decoration: none;
-        color: var(--gray-11);
+        .action {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: var(--space-3);
+          gap: var(--space-2);
 
-        &[data-selected="true"] {
-          color: var(--accent-12);
+          cursor: pointer;
+          color: var(--color-regular);
+          text-decoration: none;
+          color: var(--gray-11);
 
           .selector {
-            background-color: var(--accent-5);
-          }
+            padding: var(--space-2);
+            border-radius: var(--max-size);
 
-          .label {
-            color: var(--gray-12) !important;
-          }
-        }
+            display: flex;
+            justify-content: center;
 
-        .selector {
-          padding: var(--space-2);
-          border-radius: var(--max-size);
-
-          display: flex;
-          justify-content: center;
-
-          width: 100%;
-          max-width: var(--space-6);
-
-          .icon {
-            height: 1.25em;
             width: 100%;
-            vertical-align: top;
-          }
-        }
+            max-width: var(--space-6);
 
-        .label {
-          font-size: var(--font-size-minor);
+            .icon {
+              height: 1.25em;
+              width: 100%;
+              vertical-align: top;
+            }
+          }
         }
       }
     }
@@ -120,7 +89,10 @@ const toolsSorted =
   function handleScroll() {
     const dy = window.scrollY - lastScrollY;
     lastScrollY = window.scrollY;
-    navbar.dataset.sticky = `${dy > 0}`;
+
+    const hide = window.scrollY > navbar.clientHeight && dy > 0;
+
+    navbar.dataset.sticky = `${hide}`;
   }
 
   handleScroll();
@@ -128,41 +100,27 @@ const toolsSorted =
 </script>
 
 <div id="navbar">
-  <div class="bar"></div>
-
   <div class="content">
-    <LinkI18n
-      {locale}
-      href="/"
-      className="action"
-      tabIndex={0}
-      data-selected={selectedTool === undefined}
-    >
-      <div class="selector">
-        <BlitzKitIcon className="icon" />
-      </div>
-      <Text lowContrast className="label">{strings.navbar.home}</Text>
-    </LinkI18n>
+    <div class="group">
+      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+        <div class="selector">
+          <BlitzKitIcon className="icon" />
+        </div>
+      </LinkI18n>
+    </div>
 
-    {
-      toolsSorted.map(({ id, Icon }) => (
-        <LinkI18n
-          key={id}
-          {locale}
-          href={`/${id}`}
-          className="action"
-          tabIndex={0}
-          data-selected={selectedTool?.id === id}
-        >
-          <div class="selector">
-            <Icon className="icon" />
-          </div>
+    <div class="group">
+      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+        <div class="selector">
+          <MagnifyingGlassIcon className="icon" />
+        </div>
+      </LinkI18n>
 
-          <Text lowContrast className="label">
-            {strings.tools[id as keyof typeof strings.tools].name}
-          </Text>
-        </LinkI18n>
-      ))
-    }
+      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+        <div class="selector">
+          <HamburgerMenuIcon className="icon" />
+        </div>
+      </LinkI18n>
+    </div>
   </div>
 </div>

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

@@ -1,9 +1,7 @@
 ---
-import { ArrowLeftIcon } from "@radix-ui/react-icons";
 import { api } from "../core/api/dynamic";
 import type { Tool } from "../core/tools/tools";
 import { Heading } from "./Heading";
-import { LinkI18n } from "./LinkI18n";
 import { Text } from "./Text";
 
 interface Props {
@@ -26,7 +24,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
       position: relative;
 
       display: flex;
-      flex-direction: column;
+      justify-content: center;
       gap: var(--space-4);
       padding: var(--space-5) var(--space-4);
       box-sizing: border-box;
@@ -37,10 +35,6 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
         padding: var(--space-6) var(--space-4);
       }
 
-      .back {
-        z-index: 1;
-      }
-
       .centered {
         flex: 1;
         max-width: var(--page-width);
@@ -77,10 +71,6 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
   }}
 >
   <div class="content">
-    <LinkI18n highContrast className="back" {locale} href="/">
-      <ArrowLeftIcon />
-    </LinkI18n>
-
     <div
       class="pattern"
       style={{ backgroundImage: `url(/assets/patterns/${tool.id}.svg)` }}