Side bar layout

src/components/Explorer.vue

@@ -59,7 +59,7 @@ export default {
     },
     deleteItem() {
       const selectedNode = this.$store.getters['explorer/selectedNode'];
-      if (selectedNode.item.id) {
+      if (!selectedNode.isNil) {
         this.$store.dispatch(selectedNode.isFolder
           ? 'modal/folderDeletion'
           : 'modal/fileDeletion',
@@ -111,30 +111,4 @@ export default {
     cursor: auto;
   }
 }
-
-.side-title {
-  height: 44px;
-  line-height: 44px;
-  padding: 4px 5px 0;
-  background-color: rgba(0, 0, 0, 0.1);
-  -webkit-flex: none;
-  flex: none;
-}
-
-.side-title__button {
-  width: 38px;
-  padding: 6px;
-  display: inline-block;
-  background-color: transparent;
-  opacity: 0.75;
-
-  /* prevent from seeing wrapped buttons */
-  margin-bottom: 20px;
-
-  &:active,
-  &:focus,
-  &:hover {
-    opacity: 1;
-  }
-}
 </style>

src/components/Layout.vue

@@ -152,7 +152,8 @@ export default {
   background-color: #fff;
 }
 
-.layout__panel--explorer {
+.layout__panel--explorer,
+.layout__panel--side-bar {
   background-color: #dadada;
 }
 

src/components/NavigationBar.vue

@@ -180,7 +180,7 @@ export default {
 
 .navigation-bar__button {
   width: 34px;
-  padding: 6px;
+  padding: 7px;
 
   /* prevent from seeing wrapped buttons */
   margin-bottom: 20px;

src/components/SideBar.vue

@@ -1,17 +1,55 @@
 <template>
-  <div class="side-bar">
-    <toc>
-    </toc>
+  <div class="side-bar flex flex--column">
+    <div class="side-title flex flex--row flex--space-between">
+      <div class="flex flex--row">
+        <!-- <button class="side-title__button button" @click="newItem()">
+          <icon-file-plus></icon-file-plus>
+        </button> -->
+        <div class="side-title__title">
+          Menu
+        </div>
+      </div>
+      <button class="side-title__button button" @click="toggleSideBar(false)">
+        <icon-close></icon-close>
+      </button>
+    </div>
+    <div class="side-bar__panel side-bar__panel--toc">
+      <toc>
+      </toc>
+    </div>
   </div>
 </template>
 
-
 <script>
+import { mapActions } from 'vuex';
 import Toc from './Toc';
 
 export default {
   components: {
     Toc,
   },
+  methods: {
+    ...mapActions('data', [
+      'toggleSideBar',
+    ]),
+  },
 };
 </script>
+
+<style lang="scss">
+@import 'common/variables.scss';
+
+.side-bar {
+  overflow: hidden;
+}
+
+.side-bar__panel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.side-bar__panel--toc {
+  left: 1000px;
+}
+</style>

src/components/common/app.scss

@@ -110,3 +110,33 @@ textarea {
   justify-content: space-between;
 }
 
+.side-title {
+  height: 44px;
+  line-height: 36px;
+  padding: 4px 6px 0;
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-flex: none;
+  flex: none;
+}
+
+.side-title__button {
+  width: 38px;
+  padding: 6px;
+  display: inline-block;
+  background-color: transparent;
+  opacity: 0.75;
+
+  /* prevent from seeing wrapped buttons */
+  margin-bottom: 20px;
+
+  &:active,
+  &:focus,
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.side-title__title {
+  text-transform: uppercase;
+  padding: 0 5px;
+}