plenty o changes

client/assets/scss/Sidebar.scss

@@ -0,0 +1,64 @@
+$transitionDuration: .4s;
+
+.Sidebar{
+  background: #fff;
+  width: 300px;
+  padding-right: 1em;
+  padding-left: 1em;
+  
+  img{
+      width: 100%;
+      height: auto;
+  }
+  
+  a.toggler{
+    display: none;
+  }
+  
+  @media (max-width: 768px) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-height: 100%;
+    
+    transform: translateX(300px);
+    -webkit-transform: translateX(300px);
+    transition: transform $transitionDuration ease-out;
+    -webkit-transition: transform $transitionDuration ease-out;
+    
+    &.open {
+      transform: translateX(0px);
+      -webkit-transform: translateX(0px);
+      border-left: 1px solid #EAEAEA;
+      
+        &:before {
+            content:    " ";
+            display:    block;
+            background: rgba(0,0,0,0.4);
+            position:   absolute;
+            height:     100%;
+            width:      100vw;
+            top:        0;
+            right:      100%;
+        }
+        
+        a.toggler{
+            transform: rotate(450deg);
+        }
+    }
+    
+    a.toggler{
+        display: block;
+        width: 2em;
+        height: 2em;
+        position: absolute;
+        left: -3em;
+        top: .5em;
+        cursor: pointer;
+        color: white;
+        transform: rotate(0deg);
+        transition: transform $transitionDuration ease-out;
+        -webkit-transition: transform $transitionDuration ease-out;
+    }
+  }
+}

client/assets/scss/main.scss

@@ -1,5 +1,26 @@
+@import './utils.scss';
+
 body{
   position: relative;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+a{
+  background-color: transparent;
+  color: #3598db;
+  text-decoration: none;
+ 
+ &:hover{
+   color: #3598db;
+ }
 }
 
 .Layout {
@@ -46,22 +67,4 @@ body{
 .Previews{
   flex: 1;
   -webkit-flex: 1;
-}
-
-.Sidebar{
-  background: #fff;
-  width: 300px;
-  
-  img{
-      width: 100%;
-      height: auto;
-  }
-  
-  @media (max-width: 768px) {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-  }
-}
-
+}

client/assets/scss/utils.scss

@@ -0,0 +1,25 @@
+/* Effect 1: Brackets */
+.link{
+    position: relative;
+    
+    &:before{
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        bottom: 0;
+        left: 0;
+        background-color: #3598db;
+        visibility: hidden;
+        -webkit-transform: scaleX(0);
+        transform: scaleX(0);
+        -webkit-transition: all 0.2s ease-in-out 0s;
+        transition: all 0.2s ease-in-out 0s;
+    }
+    
+    &:hover:before{
+        visibility: visible;
+        -webkit-transform: scaleX(1);
+        transform: scaleX(1);
+    }
+}