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

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

const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
const tools = [homeTool, ...toolsFiltered];
const { locale } = Astro.params;
const branchName = resolveBranchName(locale);
const isBranchNamed = branchName !== undefined;
const strings = getStrings(locale);
---

<style>
  .navbar[data-expanded='false'] *[data-expanded] {
    display: none;
  }

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

<Box height={{ initial: '3.5rem', sm: '3rem' }} />

<Flex
  direction="column"
  align="center"
  data-expanded="false"
  className="navbar"
  width="100%"
  top="0"
  position="fixed"
  height="100%"
  style={{
    zIndex: 1,
  }}
>
  <Flex
    width="100%"
    p={{ initial: '4', sm: '3' }}
    direction="column"
    align="center"
    style={{ backgroundColor: 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, index) => {
              const unavailableOnBranch = tool.branches?.every(
                (branch) =>
                  branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
              );
              const selected = Astro.url.pathname.includes(`/tools/${tool.id}`);
              const toolStrings =
                strings.website.tools[
                  (tool.stringsId ??
                    tool.id) as keyof typeof strings.website.tools
                ];

              if (unavailableOnBranch) return null;

              return (
                <LinkI18n
                  {locale}
                  weight={selected ? 'medium' : 'regular'}
                  color="gray"
                  highContrast={selected}
                  size="2"
                  href={`/tools/${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 unavailableOnBranch = tool.branches?.every(
              (branch) =>
                branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
            );

            if (unavailableOnBranch) return null;

            const toolStrings =
              strings.website.tools[
                (tool.stringsId ??
                  tool.id) as keyof typeof strings.website.tools
              ];

            return (
              <Link
                color="gray"
                highContrast
                style={{ display: 'contents' }}
                href={`/tools/${tool.id}`}
              >
                <Box
                  style={{
                    borderRadius: Var('radius-2'),
                    backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.LargeThumbnail })})`,
                    backgroundSize: '200%',
                    backgroundPosition: 'right center',
                    overflow: 'hidden',
                  }}
                >
                  <Flex
                    py="4"
                    justify="end"
                    flexGrow="1"
                    style={{
                      background: `linear-gradient(90deg, transparent, ${Var('gray-1')})`,
                    }}
                  >
                    {toolStrings.name}
                  </Flex>
                </Box>
              </Link>
            );
          })
        }
      </Flex>
    </Flex>
  </Flex>

  <Box
    data-expanded
    flexGrow="1"
    width="100%"
    style={{
      backgroundColor: Var('black-a7'),
      backdropFilter: 'blur(0.5rem)',
      WebkitBackdropFilter: 'blur(0.5rem)',
    }}
  />
</Flex>