toggle searchbox

css/search-box.css

@@ -23,14 +23,13 @@
 	
 	-ms-transform: translate(-50%, -50%);
 	transform: translate(-50%, -50%);
-	transition: opacity var(--transition-speed), 
-				top var(--transition-speed), 
-				visibility var(--transition-speed), 
-				pointer-events var(--transition-speed) ; 
+	transition: opacity var(--transition-speed),
+				top var(--transition-speed),
+				pointer-events var(--transition-speed);
 }
 
-#searchBox.show {
-	opacity: 1;
-	top: 100%;
-	pointer-events: initial;
+.showSearchBox {
+	opacity: 1 !important;
+	top: 100% !important;
+	pointer-events: initial !important;
 }

index.html

@@ -59,5 +59,6 @@
 	<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>
 </body>
 </html>

js/animate-profile-image.js

@@ -33,5 +33,11 @@ profileContainer.addEventListener(
 
 // Animate/Show searchbox if profile container was clicked
 profileContainer.onclick = () => {
-	rotateProfile();
+    if (profileAnimRunning) return;
+
+    // Rotate profile
+	// rotateProfile();
+
+    // Toggle search box
+    toggleSearchBox();
 };

js/show-search-box.js

@@ -0,0 +1,39 @@
+var searchBox = document.getElementById('searchBox');
+
+let searchBoxVisility = false;
+
+const showSearchBox = () => {
+	searchBox.classList.add('showSearchBox');
+
+	// Focus
+    searchBox.focus();
+
+    searchBoxVisility = !searchBoxVisility;
+}
+
+const hideSearchBox = () => {
+	searchBox.classList.remove('showSearchBox');
+
+    searchBoxVisility = !searchBoxVisility;
+}
+
+const toggleSearchBox = () => {
+
+    // If profile anim is still running,
+    // Return to avoid spam
+	if (profileAnimRunning) return;
+
+	// Rotate profile
+    rotateProfile();
+
+    if (searchBoxVisility) {
+    	// Hide search box
+    	hideSearchBox();
+
+    } else {
+    	// Show search box
+    	showSearchBox();  	
+    }
+
+	console.log('toggle searchbox');
+}