Nav

// Pseudocode walkthrough of the Foldkit integration points. Each labeled
// block below is an excerpt. Fit them into your own Model, Message, update,
// and view definitions.
import { Match } from 'effect'
import type { HtmlBuilder } from 'foldkit/html'

import { Nav } from '@foldkit/ui'

// Nav is stateless: the current destination comes from the URL, so there is
// no Nav.Model to store and no Nav.update to delegate to. Your app already
// holds the active route in its Model:
const Model = Schema.Struct({
  route: AppRoute,
  // ...your other fields
})

// The nav items are the sections you navigate between. Use the route tags as
// the item values so toView can switch on them without casting:
type Section = 'Home' | 'Search' | 'Library' | 'Profile'

const sections: ReadonlyArray<Section> = [
  'Home',
  'Search',
  'Library',
  'Profile',
]

// Map each section to its URL with your routers, and decide which section is
// current from the active route. A section can own a whole family of routes,
// so this is a predicate rather than an equality check:
const sectionToHref = (section: Section): string =>
  Match.value(section).pipe(
    Match.when('Home', () => homeRouter()),
    Match.when('Search', () => searchRouter()),
    Match.when('Library', () => libraryRouter()),
    Match.when('Profile', () => profileRouter()),
    Match.exhaustive,
  )

const isSectionCurrent =
  (route: AppRoute) =>
  (section: Section): boolean =>
    sectionToRouteTag(section) === route._tag

// Inside your view function, render the nav. Spread the nav bundle onto an
// h.nav landmark and each item.link bundle onto an h.a. The current item
// carries aria-current="page" and a data-current attribute for styling.
// Browser-native Tab and Enter handle keyboard navigation; Foldkit's runtime
// turns the link clicks into route changes:
const view = (model: Model, h: HtmlBuilder<Message>) => {
  const navView = ({ nav, items }: Nav.RenderInfo<Section>) =>
    h.nav(
      [...nav, h.Class('flex gap-2')],
      items.map(item =>
        h.a(
          [
            ...item.link,
            h.Class(
              'px-4 py-2 rounded-lg text-gray-500 data-[current]:bg-gray-100 data-[current]:text-gray-900',
            ),
          ],
          [h.span([], [item.value])],
        ),
      ),
    )

  return Nav.view<Section>({
    items: sections,
    ariaLabel: 'Primary',
    toHref: sectionToHref,
    isItemCurrent: isSectionCurrent(model.route),
    toView: navView,
  })
}