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

---
import { HamburgerMenuIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
import { BlitzKitIcon } from "../icons/BlitzKit";
import { LinkI18n } from "./LinkI18n";

interface Props {
  locale: string;
}

const { locale } = Astro.props;
---

<style>
  .navbar {
    position: sticky;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;

    z-index: 1;
    backdrop-filter: var(--blur-glass) brightness(25%);
    box-shadow: var(--shadow-subtle);

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

      display: flex;
      align-items: center;
      justify-content: space-between;

      .side {
        display: flex;

        .action {
          padding: var(--space-4);

          cursor: pointer;
          color: var(--color-regular);

          &:focus {
            outline: var(--outline-focus);
          }

          .icon {
            width: 1.25em;
            height: 1.25em;
            vertical-align: top;
          }
        }
      }
    }
  }
</style>

<div class="navbar">
  <div class="content">
    <div class="side">
      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
        <BlitzKitIcon className="icon" />
      </LinkI18n>
    </div>

    <div class="side">
      <div class="action" tabindex="0">
        <MagnifyingGlassIcon className="icon" />
      </div>

      <div class="action" tabindex="0">
        <HamburgerMenuIcon className="icon" />
      </div>
    </div>
  </div>
</div>