Resolve "add settings option to inflate sidebar in wide mode"

settings.json

@@ -1,6 +1,7 @@
 {
   "frontend": {
     "host": "",
-    "port": 5000
+    "port": 5000,
+    "collapse": false
   }
 }

webui/src/App.vue

@@ -10,7 +10,9 @@
       <!-- side navigation bar -->
       <side-navigation-bar :window="window"
                            :socket="socket"
-                           :project-path="currentProjectPath"></side-navigation-bar>
+                           :status="status"
+                           :project-path="currentProjectPath"
+                           v-on:close="window.menu = false"></side-navigation-bar>
 
       <!-- actual content -->
       <div class="content">
@@ -23,6 +25,7 @@
           <project-settings-window v-if="window.content === 'settings'"
                                    :current-project="currentProject"
                                    :current-project-path="currentProjectPath"
+                                   :status="status"
                                    :socket="socket"/>
         </template>
       </div>
@@ -118,6 +121,7 @@ export default {
   flex-grow: 1;
   flex-direction: row;
   width: 100%;
+  position: relative;
 }
 
 .content {

webui/src/assets/style/main.css

@@ -2,13 +2,15 @@
     box-sizing: border-box;
 }
 
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
 body {
     margin: 0;
     padding: 0;
     font-family: "Roboto";
 
-    width: 100vw;
-    height: 100vh;
-
     overflow: hidden;
 }

webui/src/components/window/side-navigation-bar.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="side-navigation"
-       :class="{ wide: window.wide, narrow: !window.wide, active: window.menu }">
+       :class="{
+         wide: window.wide,
+         narrow: !window.wide,
+         active: window.menu ,
+         collapsed: collapsed
+       }">
     <!-- project settings -->
     <div class="item"
          :class="{active: window.content === 'settings', inactive: !projectPath}"
@@ -13,13 +18,27 @@
          @click="close">
       Close
     </div>
+
+    <div v-if="window.wide"
+         class="item"
+         @click="collapse">
+      Collapse
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: "side-navigation-bar",
-  props: ['window', 'socket', 'projectPath'],
+  props: ['window', 'socket', 'status', 'projectPath'],
+  computed: {
+    collapsed: function() {
+      if (!this.status)
+        return false;
+
+      return this.status.settings.frontend.collapse;
+    }
+  },
   methods: {
     ifProjectIsOpened: function(fun, ...args) {
       if (this.projectPath)
@@ -27,10 +46,16 @@ export default {
     },
     show: function(value) {
       this.window.content = value;
+      this.$emit('close', null);
     },
     close: function() {
-      if (this.projectPath)
+      if (this.projectPath) {
         this.socket.set(this.projectPath + '/status', 'save');
+        this.$emit('close', null);
+      }
+    },
+    collapse: function() {
+      this.socket.set('settings/frontend/collapse', !this.collapsed);
     }
   }
 }
@@ -61,11 +86,15 @@ export default {
 }
 
 .side-navigation .item {
-  padding: 1rem 3rem 1rem 1rem;
+  padding: 1rem 4rem 1rem 1rem;
   cursor: pointer;
   white-space: nowrap;
 }
 
+.side-navigation.wide.collapsed .item {
+  width: 10px;
+}
+
 .side-navigation .item:hover:not(.inactive) {
   background-color: #292929;
 }