basic routing, <Nav> component

style/_nav.scss

@@ -0,0 +1,17 @@
+@use 'mixins';
+
+nav.main-nav {
+    display: flex;
+    justify-content: flex-end;
+    a {
+        text-transform: uppercase;
+        margin: 30px;
+        color: white;
+        transition: border-bottom-width .1s ease;
+        &[aria-current="page"], &:hover {
+            border-bottom: 3px solid crimson;
+            text-decoration: none;
+            transition: border-bottom-width .1s ease;
+        }
+    }
+}

style/main.scss

@@ -1,9 +1,10 @@
 @use 'sass:list';
 
-@use 'mixins';
 @use 'reset';
+@use 'mixins';
 @use 'header';
 @use 'sidebar';
+@use 'nav';
 @use 'vars';
 
 html {
@@ -53,6 +54,8 @@ main {
     z-index: 8;
     grid-row: 2/3;
     grid-column: 2/3;
+    display: flex;
+    flex-direction: column;
 }
 
 input {