right dashboard overlay hider

css/dashboard.css

@@ -39,4 +39,28 @@
 	width: 350px !important;
 	z-index: 7 !important;
 	scrollbar-width: none !important;
+}
+
+/*Overlay*/
+.dashboardOverlay {
+	position: absolute;
+	visibility: none;
+	
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	
+	margin: 0;
+	padding: 0;
+	
+	z-index: -2;
+	filter: blur(var(--blur-strength)) brightness(70%);
+	transition: visibility var(--transition-speed),
+				z-index var(--transition-speed);
+}
+
+.showDashboardOverlay {
+	visibility: visible !important;
+	z-index: 6 !important;
 }

index.html

@@ -60,6 +60,7 @@
 			<h2>gagoka</h2>
 		</div>
 	</div>
+	<div class="dashboardOverlay" id="dashboardOverlay"></div>
 
 
 	<script src="js/body-background-set.js"></script>

js/animate-dashboard.js

@@ -1,11 +1,14 @@
 var dashboard = document.getElementById("rightDashboard");
+var dashboardOverlay = document.getElementById("dashboardOverlay");
 
 let rightDashboardVisibility = false;
 
-
 const showDashboard = () => {
 	dashboard.classList.add('showRightDashboard');
 
+	// Show overlay
+    dashboardOverlay.classList.add('showDashboardOverlay');
+
     rightDashboardVisibility = !rightDashboardVisibility;
 }
 
@@ -13,6 +16,9 @@ const hideDashboard = () => {
 	dashboard.classList.remove('showRightDashboard');
 	dashboard.scrollTop = 0;
 
+	// Hide overlay
+    dashboardOverlay.classList.remove('showDashboardOverlay');
+
     rightDashboardVisibility = !rightDashboardVisibility;
 }
 
@@ -34,8 +40,14 @@ const toggleDashboard = () => {
     	showDashboard();
     }
 
-    // Show overlay
-    // centeredBoxOverlay.classList.toggle('showOverlay');
+    console.log('toggle dashboard');
+}
 
-	console.log('toggle dashboard');
-}
+dashboardOverlay.addEventListener(
+	"mouseup",
+	() => {
+		if (rightDashboardVisibility) {
+			toggleDashboard();
+		}
+	}
+);