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

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

export interface Props {
  integrated?: boolean;
}

const { integrated = false } = Astro.props;
const toolsFiltered = TOOLS.filter((tool) => !tool.href && !tool.disabled);
const { locale } = Astro.params;
const branchName = resolveBranchName(locale);
const isBranchNamed = branchName !== undefined;
const strings = getStrings(locale);
---

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

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

  body.no-navbar .padder {
    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);
  }

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

{
  !integrated && (
    <Box className="padder" height={{ initial: "3.5rem", sm: "3rem" }} />
  )
}

<Flex
  direction="column"
  align="center"
  data-expanded="false"
  data-integrated={`${integrated}`}
  className="navbar"
  width="100%"
  top="0"
  position="fixed"
  style={{
    zIndex: 1,
    backdropFilter: "blur(4rem)",
  }}
>
  <Flex
    className="content"
    width="100%"
    p={{ initial: "4", sm: "3" }}
    direction="column"
    align="center"
    style={{ backgroundColor: integrated ? undefined : Var("gray-1") }}
  >
    <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: "4", md: "6" }}
          display={{ initial: "none", sm: "flex" }}
          justify="center"
          className="tools"
        >
          {
            toolsFiltered.map((tool) => {
              const selected = Astro.url.pathname.includes(`/${tool.id}`);
              const toolStrings =
                strings.website.tools[
                  (tool.strings ??
                    tool.id) as keyof typeof strings.website.tools
                ];

              if (toolStrings === undefined) console.log(tool.id);

              return (
                <LinkI18n
                  {locale}
                  weight={selected ? "medium" : "regular"}
                  color="gray"
                  highContrast={selected}
                  size="2"
                  href={`/${tool.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 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((tool) => {
            const toolStrings =
              strings.website.tools[
                (tool.strings ?? tool.id) as keyof typeof strings.website.tools
              ];

            return (
              <Link
                color="gray"
                highContrast
                style={{ display: "contents" }}
                href={`/${tool.id}`}
              >
                <Box
                  style={{
                    borderRadius: Var("radius-2"),
                    backgroundImage: `url(/assets/images/tools/${tool.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
    data-expanded
    flexGrow="1"
    width="100%"
    display={{ initial: "block", sm: "none" }}
    style={{
      backgroundColor: Var("black-a7"),
      backdropFilter: "blur(0.5rem)",
      WebkitBackdropFilter: "blur(0.5rem)",
    }}
  />
</Flex>