header.ejs
1<header class="p-3 mb-3 border-bottom">
2 <div class="container">
3 <div
4 class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
5 >
6 <ul
7 class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
8 >
9 <li><a href="/" class="nav-link px-2 link-body-emphasis">Home</a></li>
10 <li>
11 <a href="/stats" class="nav-link px-2 link-body-emphasis">Stats</a>
12 </li>
13 <li>
14 <a href="/upload" class="nav-link px-2 link-body-emphasis">Upload</a>
15 </li>
16 </ul>
17
18 <% if (userData) { %>
19 <div class="dropdown text-end">
20 <a
21 href="/admins/<%= userData.Username %>"
22 class="d-block link-body-emphasis text-decoration-none dropdown-toggle"
23 data-bs-toggle="dropdown"
24 aria-expanded="false"
25 >
26 <img
27 src="/avatars/<%= userData.ProfilePicture %>"
28 alt="<%= userData.Username %>'s Avatar"
29 width="32"
30 height="32"
31 class="rounded-circle"
32 />
33 </a>
34 <ul class="dropdown-menu text-small">
35 <li><a class="dropdown-item" href="/upload">Upload</a></li>
36 <li>
37 <a class="dropdown-item" href="/admins/<%= userData.Username %>"
38 >Profile</a
39 >
40 </li>
41 <li><a class="dropdown-item" href="/settings">Settings</a></li>
42 <li><hr class="dropdown-divider" /></li>
43 <li><a class="dropdown-item" href="/logout">Sign out</a></li>
44 </ul>
45 </div>
46 <% } else { %>
47 <a href="/login" class="btn btn-outline-primary me-2" id="login">Login</a>
48 <a href="/register" class="btn btn-primary" id="register">Register</a>
49 <% } %>
50 </div>
51 </div>
52</header>
53
54<% if (reminders.length > 0) { %>
55<div class="container">
56 <% reminders.forEach(reminder => { %>
57 <div
58 class="alert alert-<%= reminder.type %> alert-dismissible fade show"
59 role="alert"
60 >
61 <strong><%= reminder.title %>!</strong>
62 <%= reminder.message %>
63 <button
64 type="button"
65 class="btn-close"
66 data-bs-dismiss="alert"
67 aria-label="Close"
68 ></button>
69 </div>
70 <% }) %>
71</div>
72<% } %>
73
74<script>
75 const headerLinks = document.querySelectorAll('.nav-link');
76
77 headerLinks.forEach((link) => {
78 const linkUrl = new URL(link.href);
79 const currentUrl = new URL(window.location.href);
80
81 if (currentUrl.pathname === linkUrl.pathname) {
82 link.classList.add('link-secondary');
83 link.classList.remove('link-body-emphasis');
84 }
85 });
86
87 const loginButton = document.getElementById('login');
88 const registerButton = document.getElementById('register');
89
90 if (loginButton) {
91 if (
92 window.location.pathname != '/' ||
93 window.location.pathname != '/login' ||
94 window.location.pathname != '/register'
95 ) {
96 loginButton.href = '/login?returnTo=' + window.location.pathname;
97 }
98 }
99
100 if (registerButton) {
101 if (
102 window.location.pathname != '/' ||
103 window.location.pathname != '/login' ||
104 window.location.pathname != '/register'
105 ) {
106 registerButton.href = '/register?returnTo=' + window.location.pathname;
107 }
108 }
109</script>
110