Преглед на файлове

:art: Add doc button to webUI

Ettore Di Giacinto преди 3 години
родител
ревизия
acc1a09f74
променени са 11 файла, в които са добавени 543 реда и са изтрити 190 реда
  1. 56 21
      api/public/blockchain.html
  2. 1 1
      api/public/css/style.css
  3. 56 21
      api/public/dns.html
  4. 56 21
      api/public/files.html
  5. 55 20
      api/public/index.html
  6. 39 1
      api/public/js/common.js
  7. 56 21
      api/public/machines.html
  8. 56 21
      api/public/nodes.html
  9. 56 21
      api/public/peerstore.html
  10. 56 21
      api/public/services.html
  11. 56 21
      api/public/users.html

+ 56 - 21
api/public/blockchain.html

@@ -18,7 +18,7 @@
 </head>
 
 <body>
-  <nav class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
+  <nav  class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         <img src="/images/logo.png" > &nbsp;
@@ -37,14 +37,7 @@
           <i class="fas fa-server"></i>&nbsp;
           Machines
         </a>
-        <a class="navbar-item" href="/services.html">
-          <i class="fas fa-project-diagram"></i>&nbsp;
-          Services
-        </a>
-        <a class="navbar-item" href="/files.html">
-          <i class="fas fa-file-upload"></i>&nbsp;
-          Files
-        </a>
+       
         <a class="navbar-item" href="/users.html">
           <i class="fas fa-user-clock"></i>&nbsp;
           Users
@@ -53,19 +46,58 @@
           <i class="fas fa-dice-d20"></i>&nbsp;
           Blockchain
         </a>
-        <a class="navbar-item" href="/peerstore.html">
-          <i class="fas fa-database"></i>&nbsp;
-          Peerstore
-        </a>
-        <a class="navbar-item" href="/nodes.html">
-          <i class="fas fa-ethernet"></i>&nbsp;
-          Nodes
-        </a>
-        <a class="navbar-item" href="/dns.html">
-          <i class="fas fa-globe"></i>&nbsp;
-          DNS
-        </a>
+
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="services-menu">
+              <span> <i class="fas fa-project-diagram"></i> Services
+              </span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="services-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/services.html">
+                <i class="fas fa-project-diagram"></i>&nbsp;
+                TCP tunnels
+              </a>
+              <a class="dropdown-item" href="/files.html">
+                <i class="fas fa-file-upload"></i>&nbsp;
+                Files
+              </a>
+              <a class="dropdown-item" href="/dns.html">
+                <i class="fas fa-globe"></i>&nbsp;
+                DNS
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="nodes-menu">
+              <span><i class="fas fa-ethernet"></i> Nodes</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="nodes-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/peerstore.html">
+                <i class="fas fa-database"></i>&nbsp;
+                Peerstore
+              </a>
+              <a class="dropdown-item" href="/nodes.html">
+                <i class="fas fa-ethernet"></i>&nbsp;
+                On chain nodes
+              </a>
+            </div>
+          </div>
+        </div> 
       </div>
+
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
@@ -75,6 +107,9 @@
             <a class="button is-light" href="https://github.com/mudler/edgevpn/issues/new" target=_blank>
              <i class="fas fa-bug"></i>&nbsp; Report issue
             </a>
+            <a class="button is-light" href="https://mudler.github.io/edgevpn/docs" target=_blank>
+              <i class="fas fa-book"></i>&nbsp; Documentation
+             </a>
           </div>
         </div>
       </div>

+ 1 - 1
api/public/css/style.css

@@ -1,4 +1,4 @@
-body {
+body, .dropdown span {
     font-family: 'Duru Sans', sans-serif;
 }
    

+ 56 - 21
api/public/dns.html

@@ -18,7 +18,7 @@
 </head>
 
 <body>
-  <nav class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
+  <nav  class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         <img src="/images/logo.png" > &nbsp;
@@ -37,14 +37,7 @@
           <i class="fas fa-server"></i>&nbsp;
           Machines
         </a>
-        <a class="navbar-item" href="/services.html">
-          <i class="fas fa-project-diagram"></i>&nbsp;
-          Services
-        </a>
-        <a class="navbar-item" href="/files.html">
-          <i class="fas fa-file-upload"></i>&nbsp;
-          Files
-        </a>
+       
         <a class="navbar-item" href="/users.html">
           <i class="fas fa-user-clock"></i>&nbsp;
           Users
@@ -53,19 +46,58 @@
           <i class="fas fa-dice-d20"></i>&nbsp;
           Blockchain
         </a>
-        <a class="navbar-item" href="/peerstore.html">
-          <i class="fas fa-database"></i>&nbsp;
-          Peerstore
-        </a>
-        <a class="navbar-item" href="/nodes.html">
-          <i class="fas fa-ethernet"></i>&nbsp;
-          Nodes
-        </a>
-        <a class="navbar-item" href="/dns.html">
-          <i class="fas fa-globe"></i>&nbsp;
-          DNS
-        </a>
+
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="services-menu">
+              <span> <i class="fas fa-project-diagram"></i> Services
+              </span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="services-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/services.html">
+                <i class="fas fa-project-diagram"></i>&nbsp;
+                TCP tunnels
+              </a>
+              <a class="dropdown-item" href="/files.html">
+                <i class="fas fa-file-upload"></i>&nbsp;
+                Files
+              </a>
+              <a class="dropdown-item" href="/dns.html">
+                <i class="fas fa-globe"></i>&nbsp;
+                DNS
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="nodes-menu">
+              <span><i class="fas fa-ethernet"></i> Nodes</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="nodes-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/peerstore.html">
+                <i class="fas fa-database"></i>&nbsp;
+                Peerstore
+              </a>
+              <a class="dropdown-item" href="/nodes.html">
+                <i class="fas fa-ethernet"></i>&nbsp;
+                On chain nodes
+              </a>
+            </div>
+          </div>
+        </div> 
       </div>
+
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
@@ -75,6 +107,9 @@
             <a class="button is-light" href="https://github.com/mudler/edgevpn/issues/new" target=_blank>
              <i class="fas fa-bug"></i>&nbsp; Report issue
             </a>
+            <a class="button is-light" href="https://mudler.github.io/edgevpn/docs" target=_blank>
+              <i class="fas fa-book"></i>&nbsp; Documentation
+             </a>
           </div>
         </div>
       </div>

+ 56 - 21
api/public/files.html

@@ -19,7 +19,7 @@
 </head>
 
 <body>
-  <nav class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
+  <nav  class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         <img src="/images/logo.png" > &nbsp;
@@ -38,14 +38,7 @@
           <i class="fas fa-server"></i>&nbsp;
           Machines
         </a>
-        <a class="navbar-item" href="/services.html">
-          <i class="fas fa-project-diagram"></i>&nbsp;
-          Services
-        </a>
-        <a class="navbar-item" href="/files.html">
-          <i class="fas fa-file-upload"></i>&nbsp;
-          Files
-        </a>
+       
         <a class="navbar-item" href="/users.html">
           <i class="fas fa-user-clock"></i>&nbsp;
           Users
@@ -54,19 +47,58 @@
           <i class="fas fa-dice-d20"></i>&nbsp;
           Blockchain
         </a>
-        <a class="navbar-item" href="/peerstore.html">
-          <i class="fas fa-database"></i>&nbsp;
-          Peerstore
-        </a>
-        <a class="navbar-item" href="/nodes.html">
-          <i class="fas fa-ethernet"></i>&nbsp;
-          Nodes
-        </a>
-        <a class="navbar-item" href="/dns.html">
-          <i class="fas fa-globe"></i>&nbsp;
-          DNS
-        </a>
+
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="services-menu">
+              <span> <i class="fas fa-project-diagram"></i> Services
+              </span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="services-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/services.html">
+                <i class="fas fa-project-diagram"></i>&nbsp;
+                TCP tunnels
+              </a>
+              <a class="dropdown-item" href="/files.html">
+                <i class="fas fa-file-upload"></i>&nbsp;
+                Files
+              </a>
+              <a class="dropdown-item" href="/dns.html">
+                <i class="fas fa-globe"></i>&nbsp;
+                DNS
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="nodes-menu">
+              <span><i class="fas fa-ethernet"></i> Nodes</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="nodes-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/peerstore.html">
+                <i class="fas fa-database"></i>&nbsp;
+                Peerstore
+              </a>
+              <a class="dropdown-item" href="/nodes.html">
+                <i class="fas fa-ethernet"></i>&nbsp;
+                On chain nodes
+              </a>
+            </div>
+          </div>
+        </div> 
       </div>
+
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
@@ -76,6 +108,9 @@
             <a class="button is-light" href="https://github.com/mudler/edgevpn/issues/new" target=_blank>
              <i class="fas fa-bug"></i>&nbsp; Report issue
             </a>
+            <a class="button is-light" href="https://mudler.github.io/edgevpn/docs" target=_blank>
+              <i class="fas fa-book"></i>&nbsp; Documentation
+             </a>
           </div>
         </div>
       </div>

+ 55 - 20
api/public/index.html

@@ -38,14 +38,7 @@
           <i class="fas fa-server"></i>&nbsp;
           Machines
         </a>
-        <a class="navbar-item" href="/services.html">
-          <i class="fas fa-project-diagram"></i>&nbsp;
-          Services
-        </a>
-        <a class="navbar-item" href="/files.html">
-          <i class="fas fa-file-upload"></i>&nbsp;
-          Files
-        </a>
+       
         <a class="navbar-item" href="/users.html">
           <i class="fas fa-user-clock"></i>&nbsp;
           Users
@@ -54,19 +47,58 @@
           <i class="fas fa-dice-d20"></i>&nbsp;
           Blockchain
         </a>
-        <a class="navbar-item" href="/peerstore.html">
-          <i class="fas fa-database"></i>&nbsp;
-          Peerstore
-        </a>
-        <a class="navbar-item" href="/nodes.html">
-          <i class="fas fa-ethernet"></i>&nbsp;
-          Nodes
-        </a>
-        <a class="navbar-item" href="/dns.html">
-          <i class="fas fa-globe"></i>&nbsp;
-          DNS
-        </a>
+
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="services-menu">
+              <span> <i class="fas fa-project-diagram"></i> Services
+              </span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="services-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/services.html">
+                <i class="fas fa-project-diagram"></i>&nbsp;
+                TCP tunnels
+              </a>
+              <a class="dropdown-item" href="/files.html">
+                <i class="fas fa-file-upload"></i>&nbsp;
+                Files
+              </a>
+              <a class="dropdown-item" href="/dns.html">
+                <i class="fas fa-globe"></i>&nbsp;
+                DNS
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="nodes-menu">
+              <span><i class="fas fa-ethernet"></i> Nodes</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="nodes-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/peerstore.html">
+                <i class="fas fa-database"></i>&nbsp;
+                Peerstore
+              </a>
+              <a class="dropdown-item" href="/nodes.html">
+                <i class="fas fa-ethernet"></i>&nbsp;
+                On chain nodes
+              </a>
+            </div>
+          </div>
+        </div> 
       </div>
+
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
@@ -76,6 +108,9 @@
             <a class="button is-light" href="https://github.com/mudler/edgevpn/issues/new" target=_blank>
              <i class="fas fa-bug"></i>&nbsp; Report issue
             </a>
+            <a class="button is-light" href="https://mudler.github.io/edgevpn/docs" target=_blank>
+              <i class="fas fa-book"></i>&nbsp; Documentation
+             </a>
           </div>
         </div>
       </div>

+ 39 - 1
api/public/js/common.js

@@ -8,4 +8,42 @@ $(document).ready(function() {
         $(".navbar-menu").toggleClass("is-active");
   
     });
-  });
+
+// Get all dropdowns on the page that aren't hoverable.
+const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
+
+if (dropdowns.length > 0) {
+  // For each dropdown, add event handler to open on click.
+  dropdowns.forEach(function(el) {
+    el.addEventListener('click', function(e) {
+      e.stopPropagation();
+      el.classList.toggle('is-active');
+    });
+  });
+
+  // If user clicks outside dropdown, close it.
+  document.addEventListener('click', function(e) {
+    closeDropdowns();
+  });
+}
+
+/*
+ * Close dropdowns by removing `is-active` class.
+ */
+function closeDropdowns() {
+  dropdowns.forEach(function(el) {
+    el.classList.remove('is-active');
+  });
+}
+
+// Close dropdowns if ESC pressed
+document.addEventListener('keydown', function (event) {
+  let e = event || window.event;
+  if (e.key === 'Esc' || e.key === 'Escape') {
+    closeDropdowns();
+  }
+});
+
+  });
+
+  

+ 56 - 21
api/public/machines.html

@@ -18,7 +18,7 @@
 </head>
 
 <body>
-  <nav class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
+  <nav  class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         <img src="/images/logo.png" > &nbsp;
@@ -37,14 +37,7 @@
           <i class="fas fa-server"></i>&nbsp;
           Machines
         </a>
-        <a class="navbar-item" href="/services.html">
-          <i class="fas fa-project-diagram"></i>&nbsp;
-          Services
-        </a>
-        <a class="navbar-item" href="/files.html">
-          <i class="fas fa-file-upload"></i>&nbsp;
-          Files
-        </a>
+       
         <a class="navbar-item" href="/users.html">
           <i class="fas fa-user-clock"></i>&nbsp;
           Users
@@ -53,19 +46,58 @@
           <i class="fas fa-dice-d20"></i>&nbsp;
           Blockchain
         </a>
-        <a class="navbar-item" href="/peerstore.html">
-          <i class="fas fa-database"></i>&nbsp;
-          Peerstore
-        </a>
-        <a class="navbar-item" href="/nodes.html">
-          <i class="fas fa-ethernet"></i>&nbsp;
-          Nodes
-        </a>
-        <a class="navbar-item" href="/dns.html">
-          <i class="fas fa-globe"></i>&nbsp;
-          DNS
-        </a>
+
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="services-menu">
+              <span> <i class="fas fa-project-diagram"></i> Services
+              </span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="services-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/services.html">
+                <i class="fas fa-project-diagram"></i>&nbsp;
+                TCP tunnels
+              </a>
+              <a class="dropdown-item" href="/files.html">
+                <i class="fas fa-file-upload"></i>&nbsp;
+                Files
+              </a>
+              <a class="dropdown-item" href="/dns.html">
+                <i class="fas fa-globe"></i>&nbsp;
+                DNS
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="nodes-menu">
+              <span><i class="fas fa-ethernet"></i> Nodes</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="nodes-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/peerstore.html">
+                <i class="fas fa-database"></i>&nbsp;
+                Peerstore
+              </a>
+              <a class="dropdown-item" href="/nodes.html">
+                <i class="fas fa-ethernet"></i>&nbsp;
+                On chain nodes
+              </a>
+            </div>
+          </div>
+        </div> 
       </div>
+
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
@@ -75,6 +107,9 @@
             <a class="button is-light" href="https://github.com/mudler/edgevpn/issues/new" target=_blank>
              <i class="fas fa-bug"></i>&nbsp; Report issue
             </a>
+            <a class="button is-light" href="https://mudler.github.io/edgevpn/docs" target=_blank>
+              <i class="fas fa-book"></i>&nbsp; Documentation
+             </a>
           </div>
         </div>
       </div>

+ 56 - 21
api/public/nodes.html

@@ -18,7 +18,7 @@
 </head>
 
 <body>
-  <nav class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
+  <nav  class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         <img src="/images/logo.png" > &nbsp;
@@ -37,14 +37,7 @@
           <i class="fas fa-server"></i>&nbsp;
           Machines
         </a>
-        <a class="navbar-item" href="/services.html">
-          <i class="fas fa-project-diagram"></i>&nbsp;
-          Services
-        </a>
-        <a class="navbar-item" href="/files.html">
-          <i class="fas fa-file-upload"></i>&nbsp;
-          Files
-        </a>
+       
         <a class="navbar-item" href="/users.html">
           <i class="fas fa-user-clock"></i>&nbsp;
           Users
@@ -53,19 +46,58 @@
           <i class="fas fa-dice-d20"></i>&nbsp;
           Blockchain
         </a>
-        <a class="navbar-item" href="/peerstore.html">
-          <i class="fas fa-database"></i>&nbsp;
-          Peerstore
-        </a>
-        <a class="navbar-item" href="/nodes.html">
-          <i class="fas fa-ethernet"></i>&nbsp;
-          Nodes
-        </a>
-        <a class="navbar-item" href="/dns.html">
-          <i class="fas fa-globe"></i>&nbsp;
-          DNS
-        </a>
+
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="services-menu">
+              <span> <i class="fas fa-project-diagram"></i> Services
+              </span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="services-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/services.html">
+                <i class="fas fa-project-diagram"></i>&nbsp;
+                TCP tunnels
+              </a>
+              <a class="dropdown-item" href="/files.html">
+                <i class="fas fa-file-upload"></i>&nbsp;
+                Files
+              </a>
+              <a class="dropdown-item" href="/dns.html">
+                <i class="fas fa-globe"></i>&nbsp;
+                DNS
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="nodes-menu">
+              <span><i class="fas fa-ethernet"></i> Nodes</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="nodes-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/peerstore.html">
+                <i class="fas fa-database"></i>&nbsp;
+                Peerstore
+              </a>
+              <a class="dropdown-item" href="/nodes.html">
+                <i class="fas fa-ethernet"></i>&nbsp;
+                On chain nodes
+              </a>
+            </div>
+          </div>
+        </div> 
       </div>
+
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
@@ -75,6 +107,9 @@
             <a class="button is-light" href="https://github.com/mudler/edgevpn/issues/new" target=_blank>
              <i class="fas fa-bug"></i>&nbsp; Report issue
             </a>
+            <a class="button is-light" href="https://mudler.github.io/edgevpn/docs" target=_blank>
+              <i class="fas fa-book"></i>&nbsp; Documentation
+             </a>
           </div>
         </div>
       </div>

+ 56 - 21
api/public/peerstore.html

@@ -18,7 +18,7 @@
 </head>
 
 <body>
-  <nav class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
+  <nav  class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         <img src="/images/logo.png" > &nbsp;
@@ -37,14 +37,7 @@
           <i class="fas fa-server"></i>&nbsp;
           Machines
         </a>
-        <a class="navbar-item" href="/services.html">
-          <i class="fas fa-project-diagram"></i>&nbsp;
-          Services
-        </a>
-        <a class="navbar-item" href="/files.html">
-          <i class="fas fa-file-upload"></i>&nbsp;
-          Files
-        </a>
+       
         <a class="navbar-item" href="/users.html">
           <i class="fas fa-user-clock"></i>&nbsp;
           Users
@@ -53,19 +46,58 @@
           <i class="fas fa-dice-d20"></i>&nbsp;
           Blockchain
         </a>
-        <a class="navbar-item" href="/peerstore.html">
-          <i class="fas fa-database"></i>&nbsp;
-          Peerstore
-        </a>
-        <a class="navbar-item" href="/nodes.html">
-          <i class="fas fa-ethernet"></i>&nbsp;
-          Nodes
-        </a>
-        <a class="navbar-item" href="/dns.html">
-          <i class="fas fa-globe"></i>&nbsp;
-          DNS
-        </a>
+
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="services-menu">
+              <span> <i class="fas fa-project-diagram"></i> Services
+              </span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="services-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/services.html">
+                <i class="fas fa-project-diagram"></i>&nbsp;
+                TCP tunnels
+              </a>
+              <a class="dropdown-item" href="/files.html">
+                <i class="fas fa-file-upload"></i>&nbsp;
+                Files
+              </a>
+              <a class="dropdown-item" href="/dns.html">
+                <i class="fas fa-globe"></i>&nbsp;
+                DNS
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="nodes-menu">
+              <span><i class="fas fa-ethernet"></i> Nodes</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="nodes-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/peerstore.html">
+                <i class="fas fa-database"></i>&nbsp;
+                Peerstore
+              </a>
+              <a class="dropdown-item" href="/nodes.html">
+                <i class="fas fa-ethernet"></i>&nbsp;
+                On chain nodes
+              </a>
+            </div>
+          </div>
+        </div> 
       </div>
+
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
@@ -75,6 +107,9 @@
             <a class="button is-light" href="https://github.com/mudler/edgevpn/issues/new" target=_blank>
              <i class="fas fa-bug"></i>&nbsp; Report issue
             </a>
+            <a class="button is-light" href="https://mudler.github.io/edgevpn/docs" target=_blank>
+              <i class="fas fa-book"></i>&nbsp; Documentation
+             </a>
           </div>
         </div>
       </div>

+ 56 - 21
api/public/services.html

@@ -19,7 +19,7 @@
 </head>
 
 <body>
-  <nav class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
+  <nav  class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         <img src="/images/logo.png" > &nbsp;
@@ -38,14 +38,7 @@
           <i class="fas fa-server"></i>&nbsp;
           Machines
         </a>
-        <a class="navbar-item" href="/services.html">
-          <i class="fas fa-project-diagram"></i>&nbsp;
-          Services
-        </a>
-        <a class="navbar-item" href="/files.html">
-          <i class="fas fa-file-upload"></i>&nbsp;
-          Files
-        </a>
+       
         <a class="navbar-item" href="/users.html">
           <i class="fas fa-user-clock"></i>&nbsp;
           Users
@@ -54,19 +47,58 @@
           <i class="fas fa-dice-d20"></i>&nbsp;
           Blockchain
         </a>
-        <a class="navbar-item" href="/peerstore.html">
-          <i class="fas fa-database"></i>&nbsp;
-          Peerstore
-        </a>
-        <a class="navbar-item" href="/nodes.html">
-          <i class="fas fa-ethernet"></i>&nbsp;
-          Nodes
-        </a>
-        <a class="navbar-item" href="/dns.html">
-          <i class="fas fa-globe"></i>&nbsp;
-          DNS
-        </a>
+
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="services-menu">
+              <span> <i class="fas fa-project-diagram"></i> Services
+              </span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="services-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/services.html">
+                <i class="fas fa-project-diagram"></i>&nbsp;
+                TCP tunnels
+              </a>
+              <a class="dropdown-item" href="/files.html">
+                <i class="fas fa-file-upload"></i>&nbsp;
+                Files
+              </a>
+              <a class="dropdown-item" href="/dns.html">
+                <i class="fas fa-globe"></i>&nbsp;
+                DNS
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="nodes-menu">
+              <span><i class="fas fa-ethernet"></i> Nodes</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="nodes-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/peerstore.html">
+                <i class="fas fa-database"></i>&nbsp;
+                Peerstore
+              </a>
+              <a class="dropdown-item" href="/nodes.html">
+                <i class="fas fa-ethernet"></i>&nbsp;
+                On chain nodes
+              </a>
+            </div>
+          </div>
+        </div> 
       </div>
+
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
@@ -76,6 +108,9 @@
             <a class="button is-light" href="https://github.com/mudler/edgevpn/issues/new" target=_blank>
              <i class="fas fa-bug"></i>&nbsp; Report issue
             </a>
+            <a class="button is-light" href="https://mudler.github.io/edgevpn/docs" target=_blank>
+              <i class="fas fa-book"></i>&nbsp; Documentation
+             </a>
           </div>
         </div>
       </div>

+ 56 - 21
api/public/users.html

@@ -18,7 +18,7 @@
 </head>
 
 <body>
-  <nav class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
+  <nav  class="navbar is-light is-spaced has-shadow" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         <img src="/images/logo.png" > &nbsp;
@@ -37,14 +37,7 @@
           <i class="fas fa-server"></i>&nbsp;
           Machines
         </a>
-        <a class="navbar-item" href="/services.html">
-          <i class="fas fa-project-diagram"></i>&nbsp;
-          Services
-        </a>
-        <a class="navbar-item" href="/files.html">
-          <i class="fas fa-file-upload"></i>&nbsp;
-          Files
-        </a>
+       
         <a class="navbar-item" href="/users.html">
           <i class="fas fa-user-clock"></i>&nbsp;
           Users
@@ -53,19 +46,58 @@
           <i class="fas fa-dice-d20"></i>&nbsp;
           Blockchain
         </a>
-        <a class="navbar-item" href="/peerstore.html">
-          <i class="fas fa-database"></i>&nbsp;
-          Peerstore
-        </a>
-        <a class="navbar-item" href="/nodes.html">
-          <i class="fas fa-ethernet"></i>&nbsp;
-          Nodes
-        </a>
-        <a class="navbar-item" href="/dns.html">
-          <i class="fas fa-globe"></i>&nbsp;
-          DNS
-        </a>
+
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="services-menu">
+              <span> <i class="fas fa-project-diagram"></i> Services
+              </span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="services-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/services.html">
+                <i class="fas fa-project-diagram"></i>&nbsp;
+                TCP tunnels
+              </a>
+              <a class="dropdown-item" href="/files.html">
+                <i class="fas fa-file-upload"></i>&nbsp;
+                Files
+              </a>
+              <a class="dropdown-item" href="/dns.html">
+                <i class="fas fa-globe"></i>&nbsp;
+                DNS
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="dropdown">
+          <div class="dropdown-trigger">
+            <button class="button" aria-haspopup="true" aria-controls="nodes-menu">
+              <span><i class="fas fa-ethernet"></i> Nodes</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="nodes-menu" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="/peerstore.html">
+                <i class="fas fa-database"></i>&nbsp;
+                Peerstore
+              </a>
+              <a class="dropdown-item" href="/nodes.html">
+                <i class="fas fa-ethernet"></i>&nbsp;
+                On chain nodes
+              </a>
+            </div>
+          </div>
+        </div> 
       </div>
+
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
@@ -75,6 +107,9 @@
             <a class="button is-light" href="https://github.com/mudler/edgevpn/issues/new" target=_blank>
              <i class="fas fa-bug"></i>&nbsp; Report issue
             </a>
+            <a class="button is-light" href="https://mudler.github.io/edgevpn/docs" target=_blank>
+              <i class="fas fa-book"></i>&nbsp; Documentation
+             </a>
           </div>
         </div>
       </div>