nav

public/app.css

@@ -7,6 +7,9 @@ body {
 		background-color: black;
 		color: grey;
 	}
+	a {
+		color:grey;
+	}
 }
 
 td,th {
@@ -39,3 +42,13 @@ tbody tr:nth-child(even) td{
 	#songs { grid-area: 2 / 3 / 3 / 4; }
 
 }
+
+nav {
+	text-align:right;
+	position:fixed;
+	width:100%;
+}
+nav ul {
+	list-style:none;
+	/*background-color:rgba(100,100,100, 0.5);*/
+}

src/App.vue

@@ -35,6 +35,22 @@
 </script>
 
 <template>
+	<nav>
+		<ul>
+			<li>
+				<a href="#timer">Timer</a>
+			</li>
+			<li>
+				<a href="#summary">Summary</a>
+			</li>
+			<li>
+				<a href="#category">Category</a>
+			</li>
+			<li>
+				<a href="#songs">Songs</a>
+			</li>
+		</ul>
+	</nav>
 	<main>
 		<section id="timer" :class="{timerRunning:timerRunning, micThresholdExceeded:micThresholdExceeded}">
 			<Status ref="statusRef"/>