NavLink

import css from "./NavLink.module.css";

type Size = "sm" | "md";

interface ResponsiveSize {
  base: Size;
  mobile?: Size;
  tablet?: Size;
  desktop?: Size;
  wide?: Size;
}

interface NavLinkProps {
  href: string;
  size: Size | ResponsiveSize;
  active?: boolean;
  children: React.ReactNode;
}

function getSizeClasses(size: Size | ResponsiveSize): string {
  if (typeof size === "string") {
    return css[size];
  }

  const classes = [css[`${size.base}_base`]];

  if (size.mobile) classes.push(css[`${size.mobile}_mobile`]);
  if (size.tablet) classes.push(css[`${size.tablet}_tablet`]);
  if (size.desktop) classes.push(css[`${size.desktop}_desktop`]);
  if (size.wide) classes.push(css[`${size.wide}_wide`]);

  return classes.join(" ");
}

export default function NavLink({
  href,
  size,
  active,
  children,
}: NavLinkProps) {
  return (
    <a
      href={href}
      className={`
        ${css.navlink}
        ${getSizeClasses(size)}
        ${active ? css.active : ""}
      `}
      aria-current={active ? "page" : undefined}
    >
      <span>{children}</span>
      <span className={css.navlink_bar}></span>
    </a>
  );
}

.navlink {
  position: relative;
  /* Only the keyboard ring reads it: the box itself paints nothing. */
  border-radius: var(--radius-4);
  font-family: var(--font-body);
  padding: 0 var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--weight-500);
  transition: color 150ms ease;

  /* sm: 15px hardcoded, off-scale (no --text-15 token) */
  &.sm {
    font-size: 0.9375rem;
  }

  &.md {
    font-size: var(--text-16);
  }

  &.sm_base {
    font-size: 0.9375rem;
  }

  &.md_base {
    font-size: var(--text-16);
  }

  @media (min-width: 480px) {
    &.sm_mobile {
      font-size: 0.9375rem;
    }

    &.md_mobile {
      font-size: var(--text-16);
    }
  }

  @media (min-width: 768px) {
    &.sm_tablet {
      font-size: 0.9375rem;
    }

    &.md_tablet {
      font-size: var(--text-16);
    }
  }

  @media (min-width: 1024px) {
    &.sm_desktop {
      font-size: 0.9375rem;
    }

    &.md_desktop {
      font-size: var(--text-16);
    }
  }

  @media (min-width: 1440px) {
    &.sm_wide {
      font-size: 0.9375rem;
    }

    &.md_wide {
      font-size: var(--text-16);
    }
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .navlink_bar {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: var(--radius-4);
    background: transparent;
    transition: background 150ms ease;
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color-accent);
    }
  }

  &.active {
    .navlink_bar {
      background: var(--color-accent);
    }
  }
}

<script setup lang="ts">
import { computed } from "vue";

type Size = "sm" | "md";

interface ResponsiveSize {
  base: Size;
  mobile?: Size;
  tablet?: Size;
  desktop?: Size;
  wide?: Size;
}

interface NavLinkProps {
  href: string;
  size: Size | ResponsiveSize;
  active?: boolean;
}

const { size } = defineProps<NavLinkProps>();

const sizeClasses = computed(() => {
  if (typeof size === "string") {
    return size;
  }

  const classes = [`${size.base}_base`];

  if (size.mobile) classes.push(`${size.mobile}_mobile`);
  if (size.tablet) classes.push(`${size.tablet}_tablet`);
  if (size.desktop) classes.push(`${size.desktop}_desktop`);
  if (size.wide) classes.push(`${size.wide}_wide`);

  return classes.join(" ");
});
</script>

<template>
  <a
    :href="href"
    class="navlink"
    :class="[sizeClasses, { active }]"
    :aria-current="active ? 'page' : undefined"
  >
    <span><slot></slot></span>
    <span class="navlink_bar"></span>
  </a>
</template>

<style scoped>
.navlink {
  position: relative;
  /* Only the keyboard ring reads it: the box itself paints nothing. */
  border-radius: var(--radius-4);
  font-family: var(--font-body);
  padding: 0 var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--weight-500);
  transition: color 150ms ease;

  /* sm: 15px hardcoded, off-scale (no --text-15 token) */
  &.sm {
    font-size: 0.9375rem;
  }

  &.md {
    font-size: var(--text-16);
  }

  &.sm_base {
    font-size: 0.9375rem;
  }

  &.md_base {
    font-size: var(--text-16);
  }

  @media (min-width: 480px) {
    &.sm_mobile {
      font-size: 0.9375rem;
    }

    &.md_mobile {
      font-size: var(--text-16);
    }
  }

  @media (min-width: 768px) {
    &.sm_tablet {
      font-size: 0.9375rem;
    }

    &.md_tablet {
      font-size: var(--text-16);
    }
  }

  @media (min-width: 1024px) {
    &.sm_desktop {
      font-size: 0.9375rem;
    }

    &.md_desktop {
      font-size: var(--text-16);
    }
  }

  @media (min-width: 1440px) {
    &.sm_wide {
      font-size: 0.9375rem;
    }

    &.md_wide {
      font-size: var(--text-16);
    }
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .navlink_bar {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: var(--radius-4);
    background: transparent;
    transition: background 150ms ease;
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color-accent);
    }
  }

  &.active {
    .navlink_bar {
      background: var(--color-accent);
    }
  }
}
</style>