src/app/toolbar/toolbar.component.css

@@ -1,4 +1,4 @@
-span {
+a {
   margin-left: 1em;
   margin-right: 1em;
   -webkit-transition: color 300ms;
@@ -8,13 +8,20 @@ span {
   transition: color 300ms;
 }
 
-span:hover {
+a:hover {
-  color: var(--nord7);
+  color: var(--nord13);
-  cursor: pointer;
 }
 
 @media (max-width: 425px) {
-  span {
+  a {
-    font-size: 14px;
+    font-size: 15px;
+    margin-left: .8em;
+    margin-right: .8em;
   }
 }
+
+a {
+  color: var(--nord4);
+  text-decoration: none;
+}
+

src/app/toolbar/toolbar.component.html

@@ -1,8 +1,8 @@
-<mat-sidenav-container>
+<mat-toolbar>
-  <mat-toolbar>
+  <mat-toolbar-row>
-    <span routerLink="/home" routerLinkActive="active">Home</span>
+  <a routerLink="/home" routerLinkActive="active">Home</a>
-    <span routerLink="/resume" routerLinkActive="active">Resume</span>
+  <a routerLink="/resume" routerLinkActive="active">Resume</a>
-    <span routerLink="/projects" routerLinkActive="active">Projects</span>
+  <a routerLink="/projects" routerLinkActive="active">Projects</a>
-    <span routerLink="/contact" routerLinkActive="active">Contact</span>
+  <a routerLink="/contact" routerLinkActive="active">Contact</a>
-  </mat-toolbar>
+  </mat-toolbar-row>
-</mat-sidenav-container>
+</mat-toolbar>

src/styles.css

@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
 
-h1, h2, h3, p, span {
+h1, h2, h3, p, span, a {
   font-family: Roboto, "Helvetica Neue", sans-serif;
   font-weight: 300;
 }
@@ -114,5 +114,5 @@ html, body {
 }
 
 .active {
-  color: var(--nord7);
+  color: var(--nord7) !important;
 }