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

---
import {
  Cross1Icon,
  DiscordLogoIcon,
  GearIcon,
  HamburgerMenuIcon,
} from "@radix-ui/react-icons";
import { Box, Code, Flex, IconButton, Link } from "@radix-ui/themes";
import { resolveBranchName } from "../core/blitzkit/branches";
import { getStrings } from "../core/i18n/getStrings";
import { Var } from "../core/radix/var";
import { LinkI18n } from "./LinkI18n";
import { tools } from "../constants/tools";
import { NavbarAccount } from "./NavbarAccount";

export interface Props {
  integrated?: boolean;
  locale: string;
}

const { integrated = false } = Astro.props;
const toolsFiltered = Object.entries(tools).filter(([, tool]) => !tool.href);
const { locale } = Astro.props;
const branchName = resolveBranchName(locale);
const isBranchNamed = branchName !== undefined;
const strings = getStrings(locale);
---

<style>
  .navbar {
    transition-duration: 1s;
  }

  body.no-navbar .navbar {
    transform: translateY(-100%);
  }

  body.no-navbar {
    height: 0;
  }

  .navbar[data-expanded="false"] *[data-expanded] {
    display: none;
  }

  .navbar[data-expanded="true"] {
    height: 100%;
  }

  .navbar[data-expanded="false"][data-integrated="false"] .content {
    background-color: var(--black-a8);
    backdrop-filter: blur(4rem);
    box-shadow: var(--shadow-3);
  }

  body.halloween .navbar[data-expanded="false"] .content {
    background-color: var(--red-a8);
  }

  .halloween-blood {
    display: none;
  }

  body.halloween .halloween-blood {
    display: block;
  }

  .navbar[data-expanded="true"] .content {
    background-color: var(--gray-1);
  }

  .navbar[data-expanded="true"] *[data-closed] {
    display: none;
  }
</style>

<script>
  const navbar = document.querySelector<HTMLDivElement>(".navbar");
  const hamburger = document.querySelector<HTMLButtonElement>(".hamburger");

  navbar?.addEventListener("click", () => {
    navbar.dataset.expanded = "false";
  });
  hamburger?.addEventListener("click", (event) => {
    if (!navbar) return;

    event.stopPropagation();
    navbar.dataset.expanded = `${navbar.dataset.expanded === "false"}`;
  });
</script>

<Flex
  direction="column"
  align="center"
  data-expanded="false"
  data-integrated={`${integrated}`}
  className="navbar"
  width="100%"
  top="0"
  position="sticky"
  style={{ zIndex: 1, backdropFilter: "blur(4rem)" }}
>
  <Flex
    className="content"
    width="100%"
    p={{ initial: "4", sm: "3" }}
    direction="column"
    align="center"
  >
    <Flex gap="4" direction="column" maxWidth="80rem" width="100%">
      <Flex align="center">
        <LinkI18n
          {locale}
          color="gray"
          highContrast
          href="/"
          underline="hover"
          weight="medium"
        >
          <Flex align="center" gap="1">
            BlitzKit
            {
              isBranchNamed && (
                <Code color="gray" size="1" variant="outline">
                  {branchName}
                </Code>
              )
            }
          </Flex>
        </LinkI18n>

        <Box flexGrow="1" />

        <Flex
          align="center"
          gap={{ initial: "3", md: "6" }}
          display={{ initial: "none", sm: "flex" }}
          justify="center"
          className="tools"
        >
          {
            toolsFiltered.map(([id, tool]) => {
              const selected = Astro.url.pathname.includes(
                `/${tool.path ?? id}`,
              );
              const toolStrings =
                strings.website.tools[
                  (tool.strings ?? id) as keyof typeof strings.website.tools
                ];

              return (
                <LinkI18n
                  {locale}
                  weight={selected ? "medium" : "regular"}
                  color="gray"
                  highContrast={selected}
                  size={{ initial: "1", md: "2" }}
                  href={`/${tool.path ?? id}`}
                  underline="hover"
                >
                  {toolStrings.name}
                </LinkI18n>
              );
            })
          }
        </Flex>

        <Box flexGrow="1" />

        <Flex align="center" gap="4">
          <Link
            style={{ display: "flex", alignContent: "center" }}
            color="gray"
            href="https://discord.gg/nDt7AjGJQH"
            underline="none"
            target="_blank"
          >
            <DiscordLogoIcon width="1em" height="1em" />
          </Link>

          <LinkI18n
            {locale}
            style={{ display: "flex", alignContent: "center" }}
            color="gray"
            href="/settings"
            underline="none"
          >
            <GearIcon width="1em" height="1em" />
          </LinkI18n>

          <NavbarAccount {locale} client:idle />

          <Flex align="center" display={{ initial: "flex", sm: "none" }}>
            <IconButton variant="ghost" color="gray" className="hamburger">
              <Cross1Icon data-expanded />
              <HamburgerMenuIcon data-closed />
            </IconButton>
          </Flex>
        </Flex>
      </Flex>

      <Flex
        direction="column"
        data-expanded
        gap="3"
        display={{ initial: "flex", sm: "none" }}
      >
        {
          toolsFiltered.map(([id, tool]) => {
            const toolStrings =
              strings.website.tools[
                (tool.strings ?? id) as keyof typeof strings.website.tools
              ];

            return (
              <Link
                color="gray"
                highContrast
                style={{ display: "contents" }}
                href={`/${tool.path ?? id}`}
              >
                <Box
                  style={{
                    borderRadius: Var("radius-2"),
                    backgroundImage: `url(/assets/images/tools/${id}.webp)`,
                    backgroundSize: "200%",
                    backgroundPosition: "right center",
                  }}
                >
                  <Flex
                    py="4"
                    justify="end"
                    flexGrow="1"
                    style={{
                      background: `linear-gradient(90deg, transparent, ${Var("gray-1")} 90%)`,
                    }}
                  >
                    {toolStrings.name}
                  </Flex>
                </Box>
              </Link>
            );
          })
        }
      </Flex>
    </Flex>
  </Flex>

  <Box
    className="halloween-blood"
    position="absolute"
    left="0"
    top="100%"
    width="100%"
    height="4rem"
    style={{
      backgroundImage: "url(/assets/images/halloween-blood.svg)",
      backgroundRepeat: "repeat-x",
      backgroundSize: "8rem",
      pointerEvents: "none",
    }}
  />
</Flex>