Files
tabler/shared/components/navbar/NavbarSideUser.astro
T

42 lines
1.4 KiB
Plaintext

---
// person-id=1 → people[0] (1-based index).
import Icon from '@ui/Icon.astro'
import Avatar from '@ui/Avatar.astro'
import people from '@data/people.json'
import { requireIndex } from '@shared/lib/array'
interface Props {
personId?: number
hideUsername?: boolean
dark?: boolean
}
const { personId = 1, hideUsername = false, dark = false } = Astro.props
const person = requireIndex(people, personId - 1)
---
<!-- BEGIN USER MENU -->
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 p-0 px-2" data-bs-toggle="dropdown" aria-label="Open user menu">
<Avatar personId={personId} size="sm" />
{
!hideUsername && (
<div class="d-none d-xl-block ps-2">
<div>{person.full_name}</div>
<div class="mt-1 small text-secondary">{person.job_title}</div>
</div>
)
}
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" data-bs-theme={dark ? 'light' : undefined}>
<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>
</div>
<!-- END USER MENU -->