Navigation

./astro.config.ts

import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import tailwind from '@astrojs/tailwind'

const siteUrl = process.env.CI
  ? import.meta.env.VITE_SITE_URL_PRODUCTION // Используется при запуске в среде CI
  : import.meta.env.VITE_SITE_URL_DEVELOPMENT // Используется при локальной разработке

// https://astro.build/config
export default defineConfig({
  site: siteUrl,
  integrations: [
    react(),
    tailwind({
      applyBaseStyles: false,
    }),
  ],
})

.env

VITE_SITE_URL_PRODUCTION=https://production.example.com
VITE_SITE_URL_DEVELOPMENT=http://localhost:4321

./src/components/NavigationLink.astro

---
import type { HTMLAttributes } from 'astro/types'

type Props = HTMLAttributes<'a'>

const { href, class: className, ...props } = Astro.props
const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '')
const subpath = pathname.match(/[^\/]+/g)
const isActive = href === pathname || href === '/' + (subpath?.[0] || '')

const baseClasses = 'font-medium'
const activeClasses = isActive ? 'text-blue-500' : 'test-foreground'
const finalClasses = `${baseClasses} ${activeClasses} ${className || ''}`
---

<a
  href={href}
  class={finalClasses}
  {...props}
  ><slot /></a
>

./src/components/Navigation.astro

---
import HeaderLink from './NavigationLink.astro'

const links = [
  { href: '/', text: 'Home' },
  { href: '/about', text: 'About' },
  { href: '/contact', text: 'Contact' },
]
---

<nav class="flex items-center space-x-4">
  {links.map((link) => <HeaderLink href={link.href}>{link.text}</HeaderLink>)}
</nav>

./src/components/Header.astro

---
import NavMenu from './Navigation.astro'
---

<header>
  <Navigation />
</header>