Added category menu (#117)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: R11/release11-tools-web#117

Frontend/assets/css/frame.css

@@ -27,6 +27,9 @@ div#header {
     background-color: #FFFFFF;
     width: 100%;
     height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 #logo {
@@ -47,7 +50,7 @@ div#content {
     backdrop-filter: blur(10px);
 }
 
-div#toolList {
+div#leftBar {
     float: left;
     width: 200px;
     background-color: transparent;
@@ -71,7 +74,7 @@ div#copyright a, a:visited,  a:active {
     color: rgb(192, 192, 192);
 }
 
-ul#toolList {
+#toolList {
     list-style-type: none;
     margin: 0;
     padding: 10px 0 0 0;
@@ -99,14 +102,41 @@ ul#toolList {
     transition-duration: .3s;
 }
 
+#leftElements {
+    display: flex;
+    align-items: center;
+}
+
 #titlebar {
-    display: block;
-    padding: 10px 0;
+    /* padding: 10px 0; */
     color: black;
-
-    margin-top: -78px;
-
+    height: fit-content;
+    margin: 0px 20px;
     font-size: 36px;
     text-align: center;
     
+}
+#menu {
+    display: flex;
+    height: fit-content;
+    
+}
+
+#menu a {
+    display: block;
+    margin: 0px 10px;
+    padding: 0px 10px;
+    font-size: 28px;
+    text-decoration: none;
+    color: black;
+}
+
+#menu a.active {
+    border-bottom: 3px solid #2A93B0;
+    
+}
+
+#menu a:hover {
+    transform: scale(1.25, 1.25);
+    transition-duration: .3s;
 }

Frontend/assets/scripts/dyn_host.js

@@ -1,6 +1,4 @@
 $(document).ready( function() {
-    document.getElementsByName("iframe")[0].src =
-        window.location.protocol + "//" + window.location.hostname + ":8097";
     document.getElementById("rest-mock").href =
         window.location.protocol + "//" + window.location.hostname + ":8097";
     console.log("DONE")

Frontend/assets/scripts/frame.js

@@ -0,0 +1,23 @@
+function changeActiveTools(activeClass, activeCategoryButton) {
+    let tools = document.getElementById("toolList").children
+    
+    for (i = 0; i < tools.length; i++) {
+        if (tools[i].classList.contains(activeClass)) {
+            tools[i].style.display = "block";
+        }
+        else {
+            tools[i].style.display = "none";
+        }
+    }
+
+    let categories = document.getElementById("menu").children
+
+    for (i = 0; i < categories.length; i++) {
+        if (categories[i].innerText == activeCategoryButton) {
+            categories[i].classList.add("active")
+        }
+        else {
+            categories[i].classList.remove("active")
+        }
+    }
+}