props
  nav: { id: string, label: string, href: string, active?: boolean, detail: string }[]
  albums: { id: string, name: string, cover: string, tracks: { title: string, duration: string }[] }[]
nav.navbar()
  div.navbar__row@navbar()
    a.navbar__brand(href="/") reactor
    span.navbar__pill(aria-hidden="true")
    ul.navbar__items(role="list")
      each entry in nav
        li
          a.navbar__item@navitem(entry.id)(href=entry.href aria-current=entry.active ? 'page' : '')
            = entry.label
      each album in albums
        li
          a.navbar__item@navitem(album.id)(href="/" title=album.name)
            = album.name
    div.navbar__ribbon(aria-live="polite")
      each entry in nav
        p.navbar__pane@pane(entry.id)()
          = entry.detail
      each album in albums
        div.navbar__pane.navbar__pane--album@pane(album.id)()
          div.navbar__album-header
            figure.navbar__pane-cover
              img(src=album.cover alt=album.name loading="lazy" width="56" height="56")
            div
              p.navbar__pane-head= album.name
              time.navbar__album-date(datetime=album.date)= album.date
          ol.navbar__tracks
            each track in album.tracks
              li
                span= track.title
                span.navbar__track-duration= track.duration