Sidemenu fixes + First JS components :D

Author: nt1m

css/material.css

@@ -795,13 +795,20 @@ code {
 
 /* Dialogs */
 .dialog-overlay {
+	display: block;
 	position: fixed;
 	top: 0;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	background-color: rgba(0, 0, 0, 0.5); /* FIXME : Magic color */
 	z-index: 1;
+	transition: background 0.2s;
+}
+.dialog-overlay[hidden] {
+	z-index: -1;
+	opacity: 0;
+	visibility: hidden;
 }
 .dialog {
 	padding: 1.5em 1.5em 0.5em 1.5em;
@@ -830,7 +837,7 @@ code {
 	z-index: 999;
 	background: #fff;
 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26),
-							0 2px 10px 0 rgba(0, 0, 0, 0.16);
+	            0 2px 10px 0 rgba(0, 0, 0, 0.16);
 	transition: 0.75s left;
 }
 .dark-theme .sidemenu {
@@ -848,47 +855,48 @@ code {
 	line-height: 3em;
 	height: auto;
 }
-.sidemenu .hero {
+.sidemenu .sidemenu-hero {
 	width: 100%;
 	position: relative;
 	padding: 1em 0;
 }
-.sidemenu .hero .background {
+.sidemenu .sidemenu-hero .sidemenu-hero-image {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
-	z-index: -2;
+	z-index: -1;
 }
-.sidemenu .hero .thumbnail {
+.sidemenu .sidemenu-hero .avatar {
 	width: 6em;
 	height: 6em;
 	border-radius: 50%;
 	margin: 2em 1em 0.5em;
 	z-index: 1;
 }
-.sidemenu .hero .title {
+.sidemenu .sidemenu-hero .title {
 	display: block;
 	font-size: 0.875em;
 	font-weight: 500;
 	color: #fff;
 	z-index: 1;
 	padding: 0.375em 1em;
 }
-.sidemenu .hero .text {
+.sidemenu .sidemenu-hero .text {
 	width: 100%;
 	color: #FFF;
 	z-index: 1;
 	display: block;
 	padding: 0 1em;
 }
-.hero .fade {
+.sidemenu-hero.fade::before {
+	content: "";
 	height: 100%;
 	width: 100%;
 	position: absolute;
 	top: 0;
 	background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.25) 90%, rgba(0, 0, 0, 0.4));
-	z-index: -1;
+	z-index: 0;
 }
 .sidemenu .menu i {
 	padding: 0 2em 0 1em;