continued working on sidebar

src/styles/main.scss

@@ -88,4 +88,8 @@ h3 {
         color: white;
         text-decoration: none;
     }
+}
+
+svg{
+    margin-bottom: -1.5%;
 }

src/styles/navbar.scss

@@ -1,3 +1,5 @@
+
+@import './_var.scss';
 header {
     padding-top: 2.5vh;
     padding-bottom: 2.5vh;
@@ -30,7 +32,7 @@ header {
 
             .active {
                 font-family: "Satoshi-Bold";
-                color: #7eca9c;
+                color: $accent;
             }
 
             .highlighter {

src/styles/sidebar.scss

@@ -0,0 +1,38 @@
+@import "./_var.scss";
+.sidebar {
+  display: flex;
+  justify-content: space-evenly;
+  .sidebar-entries {
+    opacity: 1;
+  }
+  a {
+    color: white;
+    text-decoration: none;
+  }
+  .active {
+    color: $accent;
+  }
+
+  rotate: 0deg;
+  svg {
+    transition: 0.3s ease-in-out;
+    rotate: 0deg;
+  }
+  &:checked ~ {
+    svg {
+      rotate: 180deg;
+    }
+    div {
+      //only works when the checkbox is on the correct line in the astro file
+      margin-left: -330%;
+    }
+  }
+
+  &[type="checkbox"] {
+    position: absolute;
+    transform: scale(2);
+    z-index: 2;
+    &:checked {
+    }
+  }
+}