right dashboard

css/dashboard.css

@@ -0,0 +1,42 @@
+.dashboard {
+	background: var(--panel-bg);
+	height: 100%;
+	z-index: 7;
+	/*border-radius: var(--rounded-radius);*/
+	backdrop-filter: blur(var(--blur-strength));
+
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.rightDashboardBody {
+	margin: 10px;
+	height: auto;
+    width: 330px;
+}
+
+#rightDashboard {
+	width: 0;
+	right: 0;
+	position: absolute;
+	overflow-x: hidden;
+	overflow-y: auto;
+	box-sizing: border-box;
+	scrollbar-width: none;
+	transition: width var(--transition-speed); 
+}
+
+/*Hide scrollbar*/
+#rightDashboard::-webkit-scrollbar {
+    display: none;
+}
+
+.showRightDashboard {
+	width: 350px !important;
+	z-index: 7 !important;
+	scrollbar-width: none !important;
+}

css/style.css

@@ -9,6 +9,7 @@
 @import url('centered-box-overlay.css');
 @import url('profile-image.css');
 @import url('search-box.css');
+@import url('dashboard.css');
 
 :root {
 	/* Colors */

index.html

@@ -55,11 +55,19 @@
 	</div>
 
 
+	<div class="dashboard" id="rightDashboard">
+		<div class="rightDashboardBody">
+			<h2>gagoka</h2>
+		</div>
+	</div>
+
+
 	<script src="js/body-background-set.js"></script>
 	<script src="js/clock.js"></script>
 	<script src="js/sites-list.js"></script>
 	<script src="js/dock-buttons.js"></script>
 	<script src="js/animate-profile-image.js"></script>
 	<script src="js/show-search-box.js"></script>
+	<script src="js/animate-dashboard.js"></script>
 </body>
 </html>

js/animate-dashboard.js

@@ -0,0 +1,41 @@
+var dashboard = document.getElementById("rightDashboard");
+
+let rightDashboardVisibility = false;
+
+
+const showDashboard = () => {
+	dashboard.classList.add('showRightDashboard');
+
+    rightDashboardVisibility = !rightDashboardVisibility;
+}
+
+const hideDashboard = () => {
+	dashboard.classList.remove('showRightDashboard');
+	dashboard.scrollTop = 0;
+
+    rightDashboardVisibility = !rightDashboardVisibility;
+}
+
+const toggleDashboard = () => {
+
+    // If profile anim is still running,
+    // Return to avoid spam
+	if (profileAnimRunning) return;
+
+	// Rotate profile
+    rotateProfile();
+
+    if (rightDashboardVisibility) {
+    	// Hide search box
+    	hideDashboard();  	
+
+    } else {
+    	// Show search box
+    	showDashboard();
+    }
+
+    // Show overlay
+    // centeredBoxOverlay.classList.toggle('showOverlay');
+
+	console.log('toggle dashboard');
+}

js/dock-buttons.js

@@ -89,7 +89,7 @@ const populateDock = () => {
         'dashboard', 
         () => {
             // Toggle dashboard
-            alert('toggle dashboard');
+            toggleDashboard();
         }
     );