Try to add responsive design?

css/sidebar.scss

@@ -19,6 +19,44 @@ $animate-time: 0.03s;
     }
 }
 
+#sidebarToggle {
+    display:none;
+    @media screen and (max-width: $mobile-width){
+        display: block;
+        position: fixed;
+ 
+
+        top: 0;
+        left: 0;
+        width: 30px;
+        height: 30px;
+        margin: 0;
+        z-index: 2;
+
+        cursor: pointer;
+        opacity: 0;
+    }
+}
+
+#sidebarToggleImage {
+    display:none;
+    @media screen and (max-width: $mobile-width){
+        display: block;
+        position: fixed;
+
+        text-align: center;
+        color: $title-text;
+
+        top: 7px;
+        left: 0;
+        width: 30px;
+        z-index: 1;
+
+        cursor: pointer;
+        //opacity: 0;
+    }
+}
+
 #navFlags {
     display: block;
     margin-block-start: 0;
@@ -32,6 +70,27 @@ $animate-time: 0.03s;
     }
 }
 
+@media screen and (max-width: $mobile-width){
+    #sidebar{
+        position: fixed;
+        left: -180px;
+        background-color: #FFE;
+        width: 145px;
+        height: 100%;
+
+        padding-top: 40px;
+
+    }
+
+    #sidebarToggle:checked ~ #sidebar{
+        left: 0px;
+    }
+
+    #navLinks a:hover {
+        color: $sidebar-text;
+    }
+}
+
 #navLinks {
     padding: {
         left: 10px;

css/style.scss

@@ -57,7 +57,6 @@
 }
 
 
-
 body {
     margin: 0;
     background-color: $margin;
@@ -72,40 +71,71 @@ body {
     margin-right: auto;
     margin-top: 0;
     height: 100%;
-            box-shadow: 0 0 4px 5px $shadow;
-       -moz-box-shadow: 0 0 4px 5px $shadow;
-    -webkit-box-shadow: 0 0 4px 5px $shadow;
+
+
+    @media screen and (min-width: $mobile-width){
+        box-shadow: 0 0 4px 5px $shadow;
+        -moz-box-shadow: 0 0 4px 5px $shadow;
+     -webkit-box-shadow: 0 0 4px 5px $shadow;
+    }
 }
 
 // HEADER
+header {
 
-#title {
-    margin:0;
-    padding: 10px;
-    font-family: $title-font;
-    color: $title-text;
-    font-weight: normal;
-    font-size: 28px;
+    @media screen and (max-width: $mobile-width){
+        top: 0;
+        right: 0;
+        z-index: 1;
+        background-color: darken($background, 5%);
 
-    a {
-        color: inherit;
-        text-decoration: none;
+        border-bottom: 1px solid $subtle;
+        padding: {
+            top: 0;
+            bottom: 0;
+            left: 30px;
+        }
+           
+        line-height: 10px;
     }
 
-    a:hover {
-        color: inherit;
-        text-decoration: underline;
+    #title {
+        margin:0;
+        padding: 10px;
+        font-family: $title-font;
+        color: $title-text;
+        font-weight: normal;
+        font-size: 28px;
+
+        @media screen and (max-width: $mobile-width){
+            font-size: 16px;
+        }
+
+        a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        a:hover {
+            color: inherit;
+            text-decoration: underline;
+        }
+
+
+        .slash {
+            display: inline-block;
+            vertical-align: -10%;
+            font: {
+                size: 36px;
+            }
+
+            @media screen and (max-width: $mobile-width){
+                font-size: 20px;
+            }
+        }
     }
+
 }
-
-.slash {
-    display: inline-block;
-    vertical-align: -10%;
-    font: {
-        size: 36px;
-    }
-}
-
 #main {
     display: flex;
 }