tabler/shared/components/navbar/NavbarMenuItem.astro

---
// Dropdown menu item, optionally with a nested dropend.
import { isExternal } from '@shared/lib/url'
import Icon from '@ui/Icon.astro'

export interface Level3 {
  title: string
  url?: string
  badge?: string
}

export interface Level2 extends Level3 {
  icon?: string
  color?: string
  children?: Record<string, Level3>
}

interface Props {
  level1Key: string
  itemKey: string
  item: Level2
  currentPage: string[]
  keepOpen?: boolean
}

const { level1Key, itemKey, item, currentPage, keepOpen = false } = Astro.props

const hasChildren = !!item.children
const relative = (url?: string) => (isExternal(url) ? url : `./${url}`)

const active = level1Key === currentPage[0] && itemKey === currentPage[1]
// A group is an ancestor of the current page, not the page itself; only the
// link that really points at it may claim aria-current.
const isCurrentPage = active && !hasChildren

const itemClasses = ['dropdown-item', hasChildren && 'dropdown-toggle', active && 'active', item.color && `text-${item.color}`]
---

<!-- BEGIN NAVBAR ITEM -->{
  hasChildren ? (
    <div class="dropend">
      <a class:list={itemClasses} href="#" data-bs-toggle="dropdown" data-bs-auto-close={keepOpen ? 'false' : 'outside'} role="button" aria-haspopup="true" aria-expanded="false">
        {item.icon && <Icon name={item.icon} class="icon-inline me-1" />}

        {item.title}

        {item.badge && <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">{item.badge}</span>}
      </a>

      <div class="dropdown-menu">
        {Object.entries(item.children!).map(([childKey, child]) => {
          const childActive = level1Key === currentPage[0] && itemKey === currentPage[1] && childKey === currentPage[2]
          return (
            <a href={relative(child.url)} class:list={['dropdown-item', childActive && 'active']} aria-current={childActive ? 'page' : undefined}>
              {child.title}

              {child.badge && <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">{child.badge}</span>}
            </a>
          )
        })}
      </div>
    </div>
  ) : (
    <a class:list={itemClasses} href={relative(item.url)} target={isExternal(item.url) ? '_blank' : undefined} rel={isExternal(item.url) ? 'noopener' : undefined} aria-current={isCurrentPage ? 'page' : undefined}>
      {item.icon && <Icon name={item.icon} class="icon-inline me-1" />}

      {item.title}

      {item.badge && <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">{item.badge}</span>}
    </a>
  )
}
<!-- END NAVBAR ITEM -->