tabler/shared/components/navbar/SidebarUser.astro

---
import { people, personById } from '@shared/lib/people'
import Icon from '@ui/Icon.astro'
import Avatar from '@ui/Avatar.astro'
import { requireIndex } from '@shared/lib/array'

interface Props {
  personId?: number
}

const { personId = 1 } = Astro.props

const person = requireIndex(people, personId - 1)
---

<!-- BEGIN SIDEBAR USER -->
<div class="navbar-footer">
  <ul class="navbar-nav">
    <li class="nav-item dropup">
      <a href="#" class="nav-link" data-bs-toggle="dropdown" aria-label="Open user menu">
        <Avatar person={personById(personId)} size="sm" />
        <div class="nav-link-title">
          {person.full_name}
          <div class="small text-secondary">{person.job_title}</div>
        </div>
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="./profile.html"><Icon name="user" class="dropdown-item-icon" /> Profile</a>
        <a class="dropdown-item" href="#"><Icon name="chart-pie" class="dropdown-item-icon" /> Analytics</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="./settings.html">Settings &amp; Privacy</a>
        <a class="dropdown-item" href="#">Help</a>
        <a class="dropdown-item" href="./sign-in.html">Sign out</a>
      </div>
    </li>
  </ul>
</div>
<!-- END SIDEBAR USER -->