Eli Ribble
20186f65bf
This adds a pattern for creating pages that require authentication. The settings page is currently empty, but it's helpful to figure out how to do this pattern.
88 lines
3.7 KiB
HTML
88 lines
3.7 KiB
HTML
{{define "header"}}
|
|
<header class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
|
<div class="container">
|
|
<!-- Logo -->
|
|
<a class="navbar-brand" href="dashboard.html">
|
|
<div class="logo-placeholder" style="width: 100px; height: 40px; background-color: #e9ecef; display: flex; align-items: center; justify-content: center; border-radius: 4px;">
|
|
<span class="text-muted small">Your Logo</span>
|
|
</div>
|
|
</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.html">Dashboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="projects.html">Projects</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="maps.html">Maps</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 | timeSince}}</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="login.html">Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{{end}}
|