Adding links to the menu

display/display.css

@@ -293,10 +293,18 @@
     background-color: #ccc;
 }
 
-.content {
+.content-tabs {
     padding: 0 18px;
     display: none;
     overflow: hidden;
     background-color: #f1f1f1;
     flex-direction: column;
+}
+
+.content-links {
+    padding: 0 18px;
+    display: none;
+    overflow: hidden;
+    background-color: #f1f1f1;
+    flex-direction: row;
 }
\ No newline at end of file

display/overlays/neighbors.js

@@ -38,9 +38,10 @@ class NodeNeighborOverlay {
         coll.className = "collapsible";
         coll.innerText = "Nachbarn";
         var contentTabs = Helpers.createDiv(
-            "content",
+            "content-tabs",
             bottomContainerDiv
         );
+        this.contentTab = contentTabs;
         coll.addEventListener("click", function() {
             if(contentTabs.style.display === "flex") {
                 contentTabs.style.display = "none";
@@ -61,11 +62,12 @@ class NodeNeighborOverlay {
             collTab.innerText = cls;
             collTab.style.backgroundColor = color;
             collTab.type = cls;
+            this.tabNavHandles[cls] = collTab;
             const collTabContent = Helpers.createDiv(
-                "content",
+                "content-links",
                 contentTabs
             );
-            collTabContent.innerText = "Example Text";
+            this.tabContentPages[cls] = collTabContent;
             collTab.addEventListener("click", function() {
                 if(collTabContent.style.display === "flex") {
                     collTabContent.style.display = "none";
@@ -81,9 +83,12 @@ class NodeNeighborOverlay {
      */
     clearTabContentPages() {
         //TODO: Clear all content of content containers
-        /*for (const page of Object.values(this.tabContentPages)) {
+        for (const page of Object.values(this.tabContentPages)) {
             jQuery(page).empty();
-        }*/
+            if(page.style.display === "flex") {
+                page.style.display = "none";
+            }
+        }
     }
 
     /**
@@ -121,8 +126,10 @@ class NodeNeighborOverlay {
      * @param node
      */
     updateTabs(node) {
-        //TODO: Write update function to update content container
-        /*this.clearTabContentPages();
+        this.clearTabContentPages();
+        if(this.contentTab.style.display === "flex") {
+            this.contentTab.style.display = "none";
+        }
 
         for (const link of node.links) {
             const target = link.source == node ? link.target : link.source;
@@ -132,6 +139,8 @@ class NodeNeighborOverlay {
             } else {
                 this.tabContentPages[target.type].appendChild(reference);
             }
-        }*/
+        }
     }
 }
+
+