Animated mobile sidebar reveal

src/scss/components/_header.scss

@@ -57,7 +57,7 @@ main {
 			top: 0;
 			left: 0;
 			width: 100%;
-			z-index: 95;
+			z-index: 99;
 		}
 
 		@include responsive( $bp_medium ){

src/scss/components/_sidebar-toggle-button.scss

@@ -16,11 +16,12 @@
 	}
 
 	&.open {
+		@include animate(0.15s);
 		position: fixed;
 		top: 0;
 		right: 0;
 		bottom: 0;
-		left: 220px;
+		left: 0;
 		background: $overlay_dark;
 		color: $white;
 		z-index: 99;
@@ -28,6 +29,13 @@
 		.open {
 			display: none;
 		}
+
+		.open,
+		.close {
+			position: absolute;
+			top: 20px;
+			left: 235px;
+		}
 	}
 
 	&:not(.open) {

src/scss/components/_sidebar.scss

@@ -87,6 +87,7 @@ aside{
 	}
 
 	@include responsive( $bp_medium ){
+		@include animate(0.15s);
 		width: 220px;
 		left: -220px;
 		padding-bottom: 0;
@@ -94,7 +95,9 @@ aside{
 		z-index: 100;
 
 		.sidebar-open & {
-			left: 0px;
+			-ms-transform: translate(220px, 0);
+			-webkit-transform: translate(220px, 0);
+			transform: translate(220px, 0);
 		}
 
 		.liner {