Added quick nav to progress page

public/assets/css/progress.css

@@ -1,3 +1,13 @@
 /*
 MOVE PROGRESS CSS HERE
 */
+#quick-nav a {
+	color: var(--text-shade-1);
+	text-decoration: none;
+	width: fit-content;
+}
+
+#quick-nav a:hover {
+	color: var(--text-shade-3);
+	text-decoration: underline;
+}

src/server.js

@@ -187,6 +187,9 @@ app.engine('handlebars', handlebars({
 
 			return value;
 		},
+		slug(string) {
+			return string.toLowerCase().replaceAll(/ /g, '-');
+		}
 	}
 }));
 app.set('view engine', 'handlebars');

views/progress.handlebars

@@ -1,3 +1,5 @@
+<link rel="stylesheet" href="/assets/css/progress.css">
+
 <div class="wrapper">
 
 	{{> header}}
@@ -19,8 +21,19 @@
 			<p class="localeReplace">{{{ localeHelper locale "donation.progress" }}} {{{ localeHelper locale "donation.upgradePush" }}}</p>
 		</div>
 
+		<div id="quick-nav">
+			<h1 class="title dot">Quick Nav</h1>
+			<ul>
+				{{#each progressLists.sections}}
+				<li>
+					<a href="#{{slug this.title}}">{{this.title}}</a>
+				</li>
+				{{/each}}
+			</ul>
+		</div>
+		<br>
 		{{#each progressLists.sections}}
-		<div class="purple-card">
+		<div class="purple-card" id="{{slug this.title}}">
 			{{> progress-list data=this }}
 		</div>
 		{{/each}}