Added mobile friendly version

src/app/header/header.component.scss

@@ -1,3 +1,5 @@
+@import "../../vars.scss";
+
 ul {
   list-style: none;
 
@@ -17,3 +19,50 @@ a {
   text-decoration: none;
   color: var(--text-color);
 }
+
+svg {
+  display: none;
+}
+
+@media only screen and (max-width: $small-screen) {
+  .nav {
+    flex-direction: column;
+    align-items: flex-start;
+    position: absolute;
+    width: fit-content;
+    height: fit-content;
+    top: 5rem;
+    z-index: 200;
+    max-height: 0;
+    transition: max-height 0.5s ease;
+    overflow: hidden;
+    gap: 0;
+
+    &.collapsed {
+      max-height: 10rem;
+      transition: max-height 0.5s ease;
+      overflow: hidden;
+    }
+
+    li {
+      background-color: var(--background-color);
+      z-index: 200;
+      height: 3rem;
+    }
+
+    a {
+      padding: 1rem;
+    }
+  }
+
+  svg {
+    display: inline;
+    height: 4rem;
+    width: 100%;
+    margin: 1rem;
+  }
+
+  path {
+    fill: var(--accent-color);
+  }
+}