Merge branch '26-hide-sidebar-if-elements-in-content-get-clicked' into 'master'

Resolve "hide sidebar if elements in content get clicked"

Closes #26

See merge request troebs/pycs!16

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

@@ -6,24 +6,31 @@
          active: window.menu ,
          collapsed: collapsed
        }">
-    <!-- project settings -->
-    <div class="item"
-         :class="{active: window.content === 'settings', inactive: !projectPath}"
-         @click="ifProjectIsOpened(show, 'settings')">
-      Project Settings
-    </div>
+    <div class="items">
+      <!-- project settings -->
+      <div class="item"
+           :class="{active: window.content === 'settings', inactive: !projectPath}"
+           @click="ifProjectIsOpened(show, 'settings')">
+        Project Settings
+      </div>
 
-    <div class="item"
-         :class="{inactive: !projectPath}"
-         @click="close">
-      Close
-    </div>
+      <div class="item"
+           :class="{inactive: !projectPath}"
+           @click="close">
+        Close
+      </div>
 
-    <div v-if="window.wide"
-         class="item"
-         @click="collapse">
-      Collapse
+      <div v-if="window.wide"
+           class="item"
+           @click="collapse">
+        Collapse
+      </div>
     </div>
+
+    <!-- clickable overlay -->
+    <div class="overlay"
+         v-if="!window.wide"
+         @click="$emit('close', null);"/>
   </div>
 </template>
 
@@ -63,7 +70,6 @@ export default {
 
 <style scoped>
 .side-navigation {
-  background-color: #2f2f2f;
   color: whitesmoke;
 }
 
@@ -73,41 +79,54 @@ export default {
 }
 
 .side-navigation.narrow {
-  width: 85vw;
-  left: -85vw;
+  width: 100vw;
+  left: -100vw;
   position: absolute;
   top: 0;
   bottom: 0;
   transition: 0.2s ease-out;
+
+  display: flex;
 }
 
 .side-navigation.narrow.active {
   left: 0;
 }
 
-.side-navigation .item {
+.items {
+  flex-grow: 0;
+  height: 100%;
+  background-color: #2f2f2f;
+  min-width: 66%;
+}
+
+.item {
   padding: 1rem 4rem 1rem 1rem;
   cursor: pointer;
   white-space: nowrap;
 }
 
-.side-navigation.wide.collapsed .item {
-  width: 10px;
-}
-
-.side-navigation .item:hover:not(.inactive) {
+.item:hover:not(.inactive) {
   background-color: #292929;
 }
 
-.side-navigation .item.active {
+.item.active {
   background-color: #1f1f1f;
 }
 
-.side-navigation .item.inactive {
+.item.inactive {
   color: #7f7f7f;
 }
 
-.side-navigation .item:not(:last-child) {
+.item:not(:last-child) {
   border-bottom: 1px solid rgba(255, 255, 255, 0.25);
 }
+
+.side-navigation.wide.collapsed .item {
+  width: 10px;
+}
+
+.overlay {
+  flex-grow: 1;
+}
 </style>