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

---
import { BlitzKitIcon } from "../icons/BlitzKit";
import { LinkI18n } from "./LinkI18n";
import { Text } from "./Text";
import { api } from "../core/api/dynamic";
import { tools } from "../core/tools/tools";
import type { Tool } from "../core/tools/tools";

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)];
---

<style>
  #navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 1;
    background-color: var(--gray-a5);
    box-shadow: var(--shadow-none);
    backdrop-filter: var(--blur-glass) brightness(5%);
    border-radius: var(--space-4) var(--space-4) 0 0;

    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);
    }

    .content {
      width: 100%;
      max-width: calc(var(--page-width) + 2 * var(--space-4));

      display: grid;
      grid-template-columns: repeat(4, 1fr);

      .action {
        flex: 1;

        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);

        &[data-selected="true"] {
          color: var(--accent-12);

          .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 {
            height: 1.25em;
            width: 100%;
            vertical-align: top;
          }
        }

        .label {
          font-size: var(--font-size-minor);
        }
      }
    }
  }
</style>

<script>
  const navbar = document.getElementById("navbar")!;
  let lastScrollY = window.scrollY;

  function handleScroll() {
    const dy = window.scrollY - lastScrollY;
    lastScrollY = window.scrollY;
    navbar.dataset.sticky = `${dy > 0}`;
  }

  handleScroll();
  window.addEventListener("scroll", handleScroll);
</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>

    {
      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>

          <Text lowContrast className="label">
            {strings.tools[id as keyof typeof strings.tools].name}
          </Text>
        </LinkI18n>
      ))
    }
  </div>
</div>