Simplify Settings menu icon

static/sfu.css

@@ -568,7 +568,7 @@ textarea.form-reply {
 .nav-link {
     padding: 0;
     color: #dbd9d9;
-    min-width: 32px;
+    min-width: 30px;
     display: block;
     text-align: center;
     margin: 0 10px;
@@ -607,6 +607,11 @@ textarea.form-reply {
     font-size: 25px;
 }
 
+.nav-more {
+    padding-top: 5px;
+    margin-left: 0;
+}
+
 .header-title {
     float: left;
     margin: 0;
@@ -927,7 +932,6 @@ legend {
 
 .nav-menu li {
     float: left;
-    margin: 0 1px;
     max-height: 70px;
     list-style: none;
 }
@@ -1126,7 +1130,7 @@ header .collapse {
 
 @media only screen and (max-device-width: 1024px) {
     .nav-link {
-        margin: 0;
+        margin: 0 4px;
         line-height: 1.5;
     }
 
@@ -1138,6 +1142,11 @@ header .collapse {
         display: none;
     }
 
+    .nav-more {
+        padding-top: 0;
+        margin-left: inherit;
+    }
+
     .full-width {
         height: calc(var(--vh, 1vh) * 100 - 56px);
     }
@@ -1216,7 +1225,7 @@ header .collapse {
         display: block;
     }
 
-    .sidenav a {padding: 10px 5px;}
+    .sidenav a {padding: 10px 10px;}
 
     .sidenav-header h2 {
         line-height: 36px;

static/sfu.html

@@ -78,9 +78,8 @@
                   </div>
                 </li>
                 <li>
-                  <div class="nav-button nav-link" id="openside">
-                    <span><i class="fas fa-cog" aria-hidden="true"></i></span>
-                    <label>Settings</label>
+                  <div class="nav-button nav-link nav-more" id="openside">
+                    <span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
                   </div>
                 </li>
               </ul>

static/sfu.js

@@ -2244,6 +2244,22 @@ document.getElementById('close-chat').onclick = function(e) {
   document.getElementById('collapse-video').style.display = "block";
 };
 
+window.onclick = function(event) {
+  let sidebar = document.getElementById('sidebarnav');
+  if(sidebar.offsetWidth > 0 && event.target.id != "openside") {
+      // check if click ouside nav
+      let parent = event.target;
+      while (parent.id !== "main" && parent.tagName.toLowerCase() !== "body" &&
+              parent.id !== "sidebarnav" &&
+              parent.id !== "openside") {
+          parent = parent.parentNode;
+      }
+      if (parent.id !="openside" && parent.id !== "sidebarnav") {
+          closeNav();
+      }
+  }
+};
+
 async function serverConnect() {
     if(serverConnection && serverConnection.socket)
         serverConnection.close();