149 lines
4.2 KiB
HTML
149 lines
4.2 KiB
HTML
{{ define "sync/component/header.html" }}
|
|
<header class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
|
<div class="container">
|
|
<!-- Logo -->
|
|
<a class="navbar-brand" href="/">
|
|
<img
|
|
src="/static/img/nidus-logo-no-lettering-64.png"
|
|
style="height: 48px; display: flex; align-items: center; justify-content: center; "
|
|
/>
|
|
</a>
|
|
|
|
<!-- Toggle Button for Mobile -->
|
|
<button
|
|
class="navbar-toggler"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#navbarNav"
|
|
aria-controls="navbarNav"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<!-- Nav Items -->
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">Dashboard</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- User Info, Notifications & Logout -->
|
|
<div class="d-flex align-items-center">
|
|
<!-- Notification Bell with Badge -->
|
|
<div class="dropdown me-3">
|
|
<a
|
|
class="position-relative text-decoration-none"
|
|
href="#"
|
|
role="button"
|
|
id="notificationsDropdown"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="bi bi-bell-fill fs-5"></i>
|
|
{{ if gt (len .Notifications) 0 }}
|
|
<span
|
|
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
|
|
>
|
|
{{ if gt (len .Notifications) 99 }}
|
|
99+
|
|
{{ else }}
|
|
{{ len .Notifications }}
|
|
{{ end }}
|
|
<span class="visually-hidden">unread notifications</span>
|
|
</span>
|
|
{{ end }}
|
|
</a>
|
|
<ul
|
|
class="dropdown-menu dropdown-menu-end"
|
|
aria-labelledby="notificationsDropdown"
|
|
style="width: 300px; max-height: 400px; overflow-y: auto;"
|
|
>
|
|
<li><h6 class="dropdown-header">Notifications</h6></li>
|
|
{{ if gt (len .Notifications) 0 }}
|
|
{{ range .Notifications }}
|
|
<li>
|
|
<a class="dropdown-item py-2" href="{{ .Link }}">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div
|
|
class="{{ if eq .Type "alert" }}
|
|
bg-danger
|
|
{{ else }}
|
|
bg-primary
|
|
{{ end }} rounded-circle p-1"
|
|
>
|
|
<i
|
|
class="bi bi-{{ if eq .Type "alert" }}
|
|
exclamation
|
|
{{ else }}
|
|
info
|
|
{{ end }}-circle text-white small"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="mb-0 small">{{ .Message }}</p>
|
|
<span class="text-muted x-small"
|
|
>{{ .Time | timeRelativePtr }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-center small"
|
|
href="notifications.html"
|
|
>View all</a
|
|
>
|
|
</li>
|
|
{{ else }}
|
|
<li>
|
|
<p class="dropdown-item text-center py-3 text-muted">
|
|
No new notifications
|
|
</p>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="dropdown">
|
|
<a
|
|
class="text-decoration-none dropdown-toggle d-flex align-items-center"
|
|
href="#"
|
|
role="button"
|
|
id="userDropdown"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<div
|
|
class="avatar me-2 bg-primary rounded-circle d-flex align-items-center justify-content-center"
|
|
style="width: 36px; height: 36px;"
|
|
>
|
|
<span class="text-white">{{ .Initials }}</span>
|
|
</div>
|
|
<span class="me-2">{{ .DisplayName }}</span>
|
|
</a>
|
|
<ul
|
|
class="dropdown-menu dropdown-menu-end"
|
|
aria-labelledby="userDropdown"
|
|
>
|
|
<li><a class="dropdown-item" href="/settings">Settings</a></li>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<a class="dropdown-item text-danger" href="/signout"
|
|
>Sign out</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{{ end }}
|