navbar-side.html

{% assign person-id = include.person-id | default: 1 %}
{% assign person = site.data.people[person-id] %}
<div class="navbar-nav flex-row{% if include.class %} {{ include.class }}{% endif %}">

	{% unless include.condensed %}
	<div class="nav-item d-none d-{{ include.breakpoint }}-flex me-3">
		<div class="btn-list">
			{% if include.dark %}
				{% include ui/button.html color="dark" icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
				{% include ui/button.html color="dark" icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
			{% else %}
				{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
				{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
			{% endif %}
		</div>
	</div>
	{% endunless %}

	<div class="d-none d-{{ include.breakpoint }}-flex">
		<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
			{% include ui/icon.html icon="moon" %}
		</a>

		<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
			{% include ui/icon.html icon="sun" %}
		</a>

		<div class="nav-item dropdown d-none d-md-flex me-3">
			<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
				{% include ui/icon.html icon="bell" %}
				<span class="badge bg-red"></span>
			</a>
			<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
				{% include cards/navbar-notifications.html %}
			</div>
		</div>
	</div>

	<div class="nav-item dropdown">
		<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
			{% include ui/avatar.html person-id=person-id size="sm" %}

			{% unless include.hide-username %}
			<div class="d-none d-xl-block ps-2">
				<div>{{ person.full_name }}</div>
				<div class="mt-1 small text-muted">{{ person.job_title }}</div>
			</div>
			{% endunless %}
		</a>
		{% include ui/dropdown-menu.html arrow=true right=true separated=true menu="Set status,Profile & account,Feedback,|,Settings,Logout" %}
	</div>
</div>