From 8b3e3a898bd861c4299d3006a059b0ffe1da23f6 Mon Sep 17 00:00:00 2001
From: Benoit Schweblin <benoit@lex-persona.com>
Date: Fri, 4 Aug 2017 21:46:06 +0100
Subject: [PATCH] Menu items

---
 src/components/ExplorerNode.vue    |   2 +-
 src/components/MenuItem.vue        |  35 +++++++++
 src/components/NavigationBar.vue   |   1 +
 src/components/SideBar.vue         |  60 +++++++++++++---
 src/components/common/app.scss     |  15 +++-
 src/data/markdownSample.md         | 112 +++++++++++++++++++++++++++++
 src/icons/ArrowLeft.vue            |   5 ++
 src/icons/Close.vue                |   2 +-
 src/icons/CodeBraces.vue           |   2 +-
 src/icons/Delete.vue               |   2 +-
 src/icons/Eye.vue                  |   2 +-
 src/icons/FileImage.vue            |   2 +-
 src/icons/FilePlus.vue             |   2 +-
 src/icons/FolderMultiple.vue       |   2 +-
 src/icons/FolderPlus.vue           |   2 +-
 src/icons/FormatBold.vue           |   2 +-
 src/icons/FormatHorizontalRule.vue |   2 +-
 src/icons/FormatItalic.vue         |   2 +-
 src/icons/FormatListBulleted.vue   |   2 +-
 src/icons/FormatListNumbers.vue    |   2 +-
 src/icons/FormatQuoteClose.vue     |   2 +-
 src/icons/FormatSize.vue           |   2 +-
 src/icons/FormatStrikethrough.vue  |   2 +-
 src/icons/HelpCircle.vue           |   5 ++
 src/icons/LinkVariant.vue          |   2 +-
 src/icons/Login.vue                |   5 ++
 src/icons/Menu.vue                 |   2 +-
 src/icons/NavigationBar.vue        |   2 +-
 src/icons/Pen.vue                  |   2 +-
 src/icons/Settings.vue             |   2 +-
 src/icons/SidePreview.vue          |   2 +-
 src/icons/StatusBar.vue            |   2 +-
 src/icons/Table.vue                |   2 +-
 src/icons/Target.vue               |   2 +-
 src/icons/Toc.vue                  |   5 ++
 src/icons/index.js                 |   8 +++
 36 files changed, 267 insertions(+), 36 deletions(-)
 create mode 100644 src/components/MenuItem.vue
 create mode 100644 src/data/markdownSample.md
 create mode 100644 src/icons/ArrowLeft.vue
 create mode 100644 src/icons/HelpCircle.vue
 create mode 100644 src/icons/Login.vue
 create mode 100644 src/icons/Toc.vue

diff --git a/src/components/ExplorerNode.vue b/src/components/ExplorerNode.vue
index b33e4af9..f5cd6179 100644
--- a/src/components/ExplorerNode.vue
+++ b/src/components/ExplorerNode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="explorer-node" :class="{'explorer-node--selected': isSelected, 'explorer-node--open': isOpen, 'explorer-node--drag-target': isDragTargetFolder}" @dragover.prevent @dragenter.stop="setDragTarget(node.item.id)" @dragleave.stop="isDragTarget && setDragTargetId()" @drop.stop="onDrop">
+  <div class="explorer-node" :class="{'explorer-node--selected': isSelected, 'explorer-node--open': isOpen, 'explorer-node--drag-target': isDragTargetFolder}" @dragover.prevent @dragenter.stop="setDragTarget(node.item.id)" @dragleave.stop="isDragTarget && setDragTargetId()" @drop.prevent.stop="onDrop">
     <div v-if="isEditing" class="explorer-node__item-editor" :class="['explorer-node__item-editor--' + node.item.type]" :style="{'padding-left': leftPadding}">
       <input type="text" class="text-input" v-focus @blur="submitEdit()" @keyup.enter="submitEdit()" @keyup.esc="submitEdit(true)" v-model="editingNodeName">
     </div>
diff --git a/src/components/MenuItem.vue b/src/components/MenuItem.vue
new file mode 100644
index 00000000..c08dfcc0
--- /dev/null
+++ b/src/components/MenuItem.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="menu-item button flex flex--row flex--align-center">
+    <div class="menu-item__icon flex flex--column flex--center">
+      <slot name="icon"></slot>
+    </div>
+    <div class="flex flex--column">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.menu-item {
+  text-align: left;
+  padding: 10px 12px;
+  height: auto;
+  margin: 5px;
+
+  span {
+    display: inline-block;
+    font-size: 0.75em;
+    opacity: 0.5;
+    white-space: normal;
+    line-height: 1.4;
+  }
+}
+
+.menu-item__icon {
+  height: 20px;
+  width: 20px;
+  margin-right: 12px;
+  -webkit-flex: none;
+  flex: none;
+}
+</style>
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index 05b1126a..d3fc4a49 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -180,6 +180,7 @@ export default {
 
 .navigation-bar__button {
   width: 34px;
+  height: 36px;
   padding: 7px;
 
   /* prevent from seeing wrapped buttons */
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 82c14213..8d257ce9 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -2,20 +2,37 @@
   <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> -->
+        <button v-if="panel !== 'menu'" class="side-title__button button" @click="panel = 'menu'">
+          <icon-arrow-left></icon-arrow-left>
+        </button>
         <div class="side-title__title">
-          Menu
+          {{panelName}}
         </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 class="side-bar__inner">
+      <div v-if="panel === 'menu'" class="side-bar__panel side-bar__panel--menu">
+        <menu-item>
+          <icon-login slot="icon"></icon-login>
+          <div>Sign in with Google</div>
+          <span>Have all your files and settings backed up and synced.</span>
+        </menu-item>
+        <menu-item @click.native="panel = 'toc'">
+          <icon-toc slot="icon"></icon-toc>
+          Table of Contents
+        </menu-item>
+        <menu-item @click.native="panel = 'help'">
+          <icon-help-circle slot="icon"></icon-help-circle>
+          Markdown help
+        </menu-item>
+      </div>
+      <div class="side-bar__panel side-bar__panel--toc" :class="{'side-bar__panel--hidden': panel !== 'toc'}">
+        <toc>
+        </toc>
+      </div>
     </div>
   </div>
 </template>
@@ -23,10 +40,30 @@
 <script>
 import { mapActions } from 'vuex';
 import Toc from './Toc';
+import MenuItem from './MenuItem';
+
+const panelNames = {
+  menu: 'Menu',
+  help: 'Markdown help',
+  toc: 'Table of Contents',
+};
 
 export default {
   components: {
     Toc,
+    MenuItem,
+  },
+  data: () => ({
+    panel: 'menu',
+    panelNames: {
+      menu: 'Menu',
+      toc: 'Table of Contents',
+    },
+  }),
+  computed: {
+    panelName() {
+      return panelNames[this.panel];
+    },
   },
   methods: {
     ...mapActions('data', [
@@ -41,6 +78,13 @@ export default {
 
 .side-bar {
   overflow: hidden;
+  height: 100%;
+}
+
+.side-bar__inner {
+  overflow: auto;
+  height: 100%;
+  padding: 10px 0;
 }
 
 .side-bar__panel {
@@ -49,7 +93,7 @@ export default {
   height: 100%;
 }
 
-.side-bar__panel--toc {
+.side-bar__panel--hidden {
   left: 1000px;
 }
 </style>
diff --git a/src/components/common/app.scss b/src/components/common/app.scss
index 15af85e3..4ff2c299 100644
--- a/src/components/common/app.scss
+++ b/src/components/common/app.scss
@@ -55,8 +55,8 @@ textarea {
   color: #333;
   background-color: transparent;
   display: inline-block;
-  height: 36px;
-  padding: 3px 12px;
+  height: auto;
+  padding: 6px 12px;
   margin-bottom: 0;
   font-size: 18px;
   font-weight: 400;
@@ -105,11 +105,21 @@ textarea {
   flex-direction: column;
 }
 
+.flex--center {
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
 .flex--space-between {
   -webkit-justify-content: space-between;
   justify-content: space-between;
 }
 
+.flex--align-center {
+  -webkit-align-items: center;
+  align-items: center;
+}
+
 .side-title {
   height: 44px;
   line-height: 36px;
@@ -121,6 +131,7 @@ textarea {
 
 .side-title__button {
   width: 38px;
+  height: 36px;
   padding: 6px;
   display: inline-block;
   background-color: transparent;
diff --git a/src/data/markdownSample.md b/src/data/markdownSample.md
new file mode 100644
index 00000000..01ad688b
--- /dev/null
+++ b/src/data/markdownSample.md
@@ -0,0 +1,112 @@
+Headers
+----------------------------
+
+# Header 1
+
+## Header 2
+
+### Header 3
+
+
+Styling
+----------------------------
+
+*Emphasize* _emphasize_
+
+**Strong** __strong__
+
+~~Mistaken text.~~
+
+> Quoted text.
+
+H~2~O is a liquid.
+
+2^10^ is 1024.
+
+
+Lists
+----------------------------
+
+- Item
+* Item
++ Item
+
+1. Item
+2. Item
+3. Item
+
+
+Links
+----------------------------
+
+A [link](http://example.com).
+
+An image: ![Alt](img.jpg)
+
+
+Code
+----------------------------
+
+Some `inline code`.
+
+```
+// A code block
+var foo = 'bar';
+```
+
+```javascript
+// An highlighted block
+var foo = 'bar';
+```
+
+
+Tables
+----------------------------
+
+Item     | Value
+-------- | -----
+Computer | $1600
+Phone    | $12
+Pipe     | $1
+
+
+| Column 1 | Column 2      |
+|:--------:| -------------:|
+| centered | right-aligned |
+
+
+Definition lists
+----------------------------
+
+Markdown
+:  Text-to-HTML conversion tool
+
+Classeur
+:  French translation for "Binder"
+:  A Markdown editing app
+
+Footnotes
+----------------------------
+
+Some text with a footnote.[^1]
+
+[^1]: The footnote.
+
+
+Abbreviations
+----------------------------
+
+Markdown converts text to HTML.
+
+*[HTML]: HyperText Markup Language
+
+
+LaTeX math
+----------------------------
+
+The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall
+n\in\mathbb N$ is via the Euler integral
+
+$$
+\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
+$$
diff --git a/src/icons/ArrowLeft.vue b/src/icons/ArrowLeft.vue
new file mode 100644
index 00000000..d17730ec
--- /dev/null
+++ b/src/icons/ArrowLeft.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
+    <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 20,11L 20,13L 7.98958,13L 13.4948,18.5052L 12.0806,19.9194L 4.16116,12L 12.0806,4.08058L 13.4948,5.49479L 7.98958,11L 20,11 Z "/>
+  </svg>
+</template>
diff --git a/src/icons/Close.vue b/src/icons/Close.vue
index 6337271f..12784acd 100644
--- a/src/icons/Close.vue
+++ b/src/icons/Close.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
   </svg>
 </template>
diff --git a/src/icons/CodeBraces.vue b/src/icons/CodeBraces.vue
index 90423321..20d4a2ba 100644
--- a/src/icons/CodeBraces.vue
+++ b/src/icons/CodeBraces.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-linejoin="round" d="M 8,3C 6.89543,3 6,3.89539 6,5L 6,9C 6,10.1046 5.10457,11 4,11L 3,11L 3,13L 4,13C 5.10457,13 6,13.8954 6,15L 6,19C 6,20.1046 6.92841,20.7321 8,21L 10,21L 10,19L 8,19L 8,14C 8,12.8954 7.10457,12 6,12C 7.10457,12 8,11.1046 8,10L 8,5L 10,5L 10,3M 16,3C 17.1046,3 18,3.89539 18,5L 18,9C 18,10.1046 18.8954,11 20,11L 21,11L 21,13L 20,13C 18.8954,13 18,13.8954 18,15L 18,19C 18,20.1046 17.0716,20.7321 16,21L 14,21L 14,19L 16,19L 16,14C 16,12.8954 16.8954,12 18,12C 16.8954,12 16,11.1046 16,10L 16,5L 14,5L 14,3L 16,3 Z " />
   </svg>
 </template>
diff --git a/src/icons/Delete.vue b/src/icons/Delete.vue
index 872908ff..f250d37e 100644
--- a/src/icons/Delete.vue
+++ b/src/icons/Delete.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19C6,20.1 6.9,21 8,21H16C17.1,21 18,20.1 18,19V7H6V19Z" />
   </svg>
 </template>
diff --git a/src/icons/Eye.vue b/src/icons/Eye.vue
index 2c543fef..018d7195 100644
--- a/src/icons/Eye.vue
+++ b/src/icons/Eye.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-linejoin="round" d="M 11.9994,8.99813C 10.3424,8.99813 8.99941,10.3411 8.99941,11.9981C 8.99941,13.6551 10.3424,14.9981 11.9994,14.9981C 13.6564,14.9981 14.9994,13.6551 14.9994,11.9981C 14.9994,10.3411 13.6564,8.99813 11.9994,8.99813 Z M 11.9994,16.9981C 9.23841,16.9981 6.99941,14.7591 6.99941,11.9981C 6.99941,9.23714 9.23841,6.99813 11.9994,6.99813C 14.7604,6.99813 16.9994,9.23714 16.9994,11.9981C 16.9994,14.7591 14.7604,16.9981 11.9994,16.9981 Z M 11.9994,4.49813C 6.99741,4.49813 2.72741,7.60915 0.99941,11.9981C 2.72741,16.3871 6.99741,19.4981 11.9994,19.4981C 17.0024,19.4981 21.2714,16.3871 22.9994,11.9981C 21.2714,7.60915 17.0024,4.49813 11.9994,4.49813 Z " />
   </svg>
 </template>
diff --git a/src/icons/FileImage.vue b/src/icons/FileImage.vue
index dd3fa0a0..107bc539 100644
--- a/src/icons/FileImage.vue
+++ b/src/icons/FileImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 12.9994,8.99807L 18.4994,8.99807L 12.9994,3.49807L 12.9994,8.99807 Z M 5.99938,1.99809L 13.9994,1.99809L 19.9994,7.99808L 19.9994,19.9981C 19.9994,21.1021 19.1034,21.9981 17.9994,21.9981L 5.98937,21.9981C 4.88537,21.9981 3.99939,21.1021 3.99939,19.9981L 4.0094,3.99808C 4.0094,2.89407 4.89437,1.99809 5.99938,1.99809 Z M 6,20L 15,20L 18,20L 18,12L 14,16L 12,14L 6,20 Z M 8,9C 6.89543,9 6,9.89543 6,11C 6,12.1046 6.89543,13 8,13C 9.10457,13 10,12.1046 10,11C 10,9.89543 9.10457,9 8,9 Z " />
   </svg>
 </template>
diff --git a/src/icons/FilePlus.vue b/src/icons/FilePlus.vue
index 9932fe10..d75373ff 100644
--- a/src/icons/FilePlus.vue
+++ b/src/icons/FilePlus.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20C20,21.1 19.1,22 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M11,15V12H9V15H6V17H9V20H11V17H14V15H11Z" />
   </svg>
 </template>
diff --git a/src/icons/FolderMultiple.vue b/src/icons/FolderMultiple.vue
index 0e42e38f..56795645 100644
--- a/src/icons/FolderMultiple.vue
+++ b/src/icons/FolderMultiple.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M22,4H14L12,2H6C4.9,2 4,2.9 4,4V16C4,17.1 4.9,18 6,18H22C23.1,18 24,17.1 24,16V6C24,4.9 23.1,4 22,4M2,6H0V11H0V20C0,21.1 0.9,22 2,22H20V20H2V6Z" />
   </svg>
 </template>
diff --git a/src/icons/FolderPlus.vue b/src/icons/FolderPlus.vue
index 6c706ff8..bba3207a 100644
--- a/src/icons/FolderPlus.vue
+++ b/src/icons/FolderPlus.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M10,4L12,6H20C21.1,6 22,6.9 22,8V18C22,19.1 21.1,20 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10M15,9V12H12V14H15V17H17V14H20V12H17V9H15Z" />
   </svg>
 </template>
diff --git a/src/icons/FormatBold.vue b/src/icons/FormatBold.vue
index 10a8fe84..34cf0f1c 100644
--- a/src/icons/FormatBold.vue
+++ b/src/icons/FormatBold.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M13.35,17.401l-4.201,0l0,-3.601l4.201,0c0.997,0 1.801,0.805 1.801,1.801c0,0.996 -0.804,1.8 -1.801,1.8m-4.201,-10.802l3.601,0c0.996,0 1.801,0.804 1.801,1.8c0,0.996 -0.805,1.801 -1.801,1.801l-3.601,0m6.722,1.548c1.164,-0.816 1.98,-2.149 1.98,-3.349c0,-2.712 -2.1,-4.801 -4.801,-4.801l-7.502,0l0,16.804l8.45,0c2.521,0 4.454,-2.04 4.454,-4.549c0,-1.825 -1.033,-3.385 -2.581,-4.105Z" style="fill-rule:nonzero;"/>
   </svg>
 </template>
diff --git a/src/icons/FormatHorizontalRule.vue b/src/icons/FormatHorizontalRule.vue
index a0437d6e..e5236952 100644
--- a/src/icons/FormatHorizontalRule.vue
+++ b/src/icons/FormatHorizontalRule.vue
@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+	<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
 		<path fill="#000000" fill-opacity="1" stroke-linejoin="round" d="M3,13l5,0l0,-2l-5,0l0,2Zm6.5,0l5,0l0,-2l-5,0l0,2Zm6.5,0l5,0l0,-2l-5,0l0,2Z" />
 	</svg>
 </template>
diff --git a/src/icons/FormatItalic.vue b/src/icons/FormatItalic.vue
index 7a59b58a..3cfdb631 100644
--- a/src/icons/FormatItalic.vue
+++ b/src/icons/FormatItalic.vue
@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+	<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
 		<path d="M8.617,3.658l0,3.575l2.633,0l-2.075,9.534l-3.325,0l0,3.575l9.533,0l0,-3.575l-2.633,0l2.075,-9.534l3.325,0l0,-3.575l-9.533,0Z" style="fill-rule:nonzero;"/>
 	</svg>
 </template>
diff --git a/src/icons/FormatListBulleted.vue b/src/icons/FormatListBulleted.vue
index 01290473..959276ba 100644
--- a/src/icons/FormatListBulleted.vue
+++ b/src/icons/FormatListBulleted.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M7.043,4.695l14.61,0l0,2.087l-14.61,0l0,-2.087m0,8.349l0,-2.088l14.61,0l0,2.088l-14.61,0m-3.131,-8.871c0.866,0 1.566,0.699 1.566,1.565c0,0.867 -0.7,1.566 -1.566,1.566c-0.866,0 -1.565,-0.699 -1.565,-1.566c0,-0.866 0.699,-1.565 1.565,-1.565m0,6.262c0.866,0 1.566,0.699 1.566,1.565c0,0.866 -0.7,1.565 -1.566,1.565c-0.866,0 -1.565,-0.699 -1.565,-1.565c0,-0.866 0.699,-1.565 1.565,-1.565m3.131,8.87l0,-2.087l14.61,0l0,2.087l-14.61,0m-3.131,-2.609c0.866,0 1.566,0.699 1.566,1.566c0,0.866 -0.7,1.565 -1.566,1.565c-0.866,0 -1.565,-0.699 -1.565,-1.565c0,-0.867 0.699,-1.566 1.565,-1.566Z" style="fill-rule:nonzero;"/>
   </svg>
 </template>
diff --git a/src/icons/FormatListNumbers.vue b/src/icons/FormatListNumbers.vue
index a7f93f5f..e6c5825f 100644
--- a/src/icons/FormatListNumbers.vue
+++ b/src/icons/FormatListNumbers.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M7.235,13.059l14.825,0l0,-2.118l-14.825,0m0,8.471l14.825,0l0,-2.117l-14.825,0m0,-10.59l14.825,0l0,-2.117l-14.825,0m-5.295,6.353l1.906,0l-1.906,2.224l0,0.953l3.177,0l0,-1.059l-1.906,0l1.906,-2.224l0,-0.953l-3.177,0m1.059,-2.118l1.059,0l0,-4.235l-2.118,0l0,1.059l1.059,0m-1.059,12.707l2.118,0l0,0.529l-1.059,0l0,1.059l1.059,0l0,0.529l-2.118,0l0,1.059l3.177,0l0,-4.235l-3.177,0l0,1.059Z" style="fill-rule:nonzero;"/>
   </svg>
 </template>
diff --git a/src/icons/FormatQuoteClose.vue b/src/icons/FormatQuoteClose.vue
index e7cb7177..bb655925 100644
--- a/src/icons/FormatQuoteClose.vue
+++ b/src/icons/FormatQuoteClose.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M14.446,18.235l2.92,0l1.946,-4.988l0,-7.482l-5.839,0l0,7.482l2.92,0m-10.732,4.988l2.919,0l1.947,-4.988l0,-7.482l-5.839,0l0,7.482l2.919,0l-1.946,4.988Z" style="fill-rule:nonzero;"/>
   </svg>
 </template>
diff --git a/src/icons/FormatSize.vue b/src/icons/FormatSize.vue
index 5bbf4667..fba58d02 100644
--- a/src/icons/FormatSize.vue
+++ b/src/icons/FormatSize.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M2.007,12.526l3.156,0l0,7.363l3.155,0l0,-7.363l3.156,0l0,-3.156l-9.467,0m6.311,-5.259l0,3.155l5.26,0l0,12.623l3.156,0l0,-12.623l5.259,0l0,-3.155l-13.675,0Z" style="fill-rule:nonzero;"/>
   </svg>
 </template>
diff --git a/src/icons/FormatStrikethrough.vue b/src/icons/FormatStrikethrough.vue
index c5f7f10d..32bb9197 100644
--- a/src/icons/FormatStrikethrough.vue
+++ b/src/icons/FormatStrikethrough.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path d="M20.874,12.059l0,1.729l-3.541,0c0.806,1.851 0.766,6.918 -5.026,6.918c-6.721,0.043 -6.463,-5.621 -6.463,-5.621l3.203,0.044c0.024,2.914 2.55,2.914 3.05,2.879c0.516,-0.043 2.444,-0.034 2.598,-2.058c0.064,-0.942 -0.823,-1.66 -1.791,-2.162l-9.778,0l0,-1.729l17.748,0m-2.896,-3.554l-3.211,-0.026c0,0 0.137,-2.395 -2.646,-2.404c-2.783,-0.017 -2.541,1.902 -2.541,2.144c0.032,0.243 0.274,1.436 2.42,2.007l-5.074,0c0,0 -2.816,-5.82 4.057,-6.814c7.027,-1.038 7.011,5.11 6.995,5.093Z" style="fill-rule:nonzero;"/>
   </svg>
 </template>
diff --git a/src/icons/HelpCircle.vue b/src/icons/HelpCircle.vue
new file mode 100644
index 00000000..a656330f
--- /dev/null
+++ b/src/icons/HelpCircle.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
+    <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 15.0661,11.2518L 14.1711,12.1697C 13.4471,12.8937 12.9991,13.4977 12.9991,14.9977L 10.9991,14.9977L 10.9991,14.4977C 10.9991,13.3937 11.4471,12.3937 12.1711,11.6697L 13.4141,10.4117C 13.7751,10.0497 13.9991,9.54974 13.9991,8.99774C 13.9991,7.89374 13.1041,6.99774 11.9991,6.99774C 10.8951,6.99774 9.99908,7.89374 9.99908,8.99774L 7.99908,8.99774C 7.99908,6.78876 9.7901,4.99774 11.9991,4.99774C 14.2091,4.99774 15.9991,6.78876 15.9991,8.99774C 15.9991,9.87775 15.6431,10.6747 15.0661,11.2518 Z M 12.9991,18.9977L 10.9991,18.9977L 10.9991,16.9977L 12.9991,16.9977M 11.9991,1.99774C 6.4761,1.99774 1.99908,6.47473 1.99908,11.9977C 1.99908,17.5217 6.4761,21.9977 11.9991,21.9977C 17.5231,21.9977 21.9991,17.5217 21.9991,11.9977C 21.9991,6.47473 17.5231,1.99774 11.9991,1.99774 Z "/>
+  </svg>
+</template>
diff --git a/src/icons/LinkVariant.vue b/src/icons/LinkVariant.vue
index 090cff99..6e7a23a4 100644
--- a/src/icons/LinkVariant.vue
+++ b/src/icons/LinkVariant.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-linejoin="round" d="M 10.5858,13.4142C 10.9763,13.8047 10.9763,14.4379 10.5858,14.8284C 10.1952,15.2189 9.56207,15.2189 9.17154,14.8284C 7.21892,12.8758 7.21892,9.70995 9.17154,7.75733L 9.17157,7.75736L 12.707,4.2219C 14.6596,2.26928 17.8255,2.26929 19.7781,4.2219C 21.7307,6.17452 21.7307,9.34034 19.7781,11.293L 18.2925,12.7785C 18.3008,11.9583 18.1659,11.1368 17.8876,10.355L 18.3639,9.87865C 19.5355,8.70708 19.5355,6.80759 18.3639,5.63602C 17.1923,4.46445 15.2929,4.46445 14.1213,5.63602L 10.5858,9.17155C 9.41419,10.3431 9.41419,12.2426 10.5858,13.4142 Z M 13.4142,9.17155C 13.8047,8.78103 14.4379,8.78103 14.8284,9.17155C 16.781,11.1242 16.781,14.29 14.8284,16.2426L 14.8284,16.2426L 11.2929,19.7782C 9.34026,21.7308 6.17444,21.7308 4.22182,19.7782C 2.26921,17.8255 2.2692,14.6597 4.22182,12.7071L 5.70744,11.2215C 5.69913,12.0417 5.8341,12.8631 6.11234,13.645L 5.63601,14.1213C 4.46444,15.2929 4.46444,17.1924 5.63601,18.3639C 6.80758,19.5355 8.70708,19.5355 9.87865,18.3639L 13.4142,14.8284C 14.5858,13.6568 14.5858,11.7573 13.4142,10.5858C 13.0237,10.1952 13.0237,9.56207 13.4142,9.17155 Z " />
   </svg>
 </template>
diff --git a/src/icons/Login.vue b/src/icons/Login.vue
new file mode 100644
index 00000000..f99c5156
--- /dev/null
+++ b/src/icons/Login.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
+    <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 10,17.25L 10,14L 3.00002,14L 3.00002,10L 10,10L 10,6.75L 15.25,12L 10,17.25 Z M 7.99999,2.00003L 17,2.00005C 18.1045,2.00005 19,2.89546 19,4.00003L 19,20C 19,21.1046 18.1045,22 17,22L 7.99999,22C 6.89542,22 5.99999,21.1046 5.99999,20L 6,16L 7.99999,16L 7.99999,20L 17,20L 17,4.00003L 7.99999,4.00002L 7.99999,8.00001L 6,8.00001L 5.99999,4.00002C 5.99999,2.89545 6.89542,2.00003 7.99999,2.00003 Z "/>
+  </svg>
+</template>
diff --git a/src/icons/Menu.vue b/src/icons/Menu.vue
index ee2d30c8..44a53f13 100644
--- a/src/icons/Menu.vue
+++ b/src/icons/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 3,6L 21,6L 21,8L 3,8L 3,6 Z M 3,11L 21,11L 21,13L 3,13L 3,11 Z M 3,16L 21,16L 21,18L 3,18L 3,16 Z "/>
   </svg>
 </template>
diff --git a/src/icons/NavigationBar.vue b/src/icons/NavigationBar.vue
index d4b83ddc..bd096ae1 100644
--- a/src/icons/NavigationBar.vue
+++ b/src/icons/NavigationBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="miter" d="M19,8.977l-14,0l0,10l14,0m0,2l-14,0c-1.104,0 -2,-0.896 -2,-2l0,-10c0,-1.105 0.896,-2 2,-2l14,0c1.105,0 2,0.895 2,2l0,10c0,1.104 -0.895,2 -2,2Z" />
     <rect x="3" y="3.023" width="18" height="2" />
   </svg>
diff --git a/src/icons/Pen.vue b/src/icons/Pen.vue
index a8352cc3..f336e105 100644
--- a/src/icons/Pen.vue
+++ b/src/icons/Pen.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 16.8363,2.73375C 16.45,2.73375 16.0688,2.88125 15.7712,3.17375L 13.6525,5.2925L 18.955,10.5962L 21.0737,8.47625C 21.665,7.89 21.665,6.94375 21.0737,6.3575L 17.895,3.17375C 17.6025,2.88125 17.2163,2.73375 16.8363,2.73375 Z M 12.9437,6.00125L 4.84375,14.1062L 7.4025,14.39L 7.57875,16.675L 9.85875,16.85L 10.1462,19.4088L 18.2475,11.3038M 4.2475,15.0437L 2.515,21.7337L 9.19875,19.9412L 8.955,17.7838L 6.645,17.6075L 6.465,15.2925"/>
   </svg>
 </template>
diff --git a/src/icons/Settings.vue b/src/icons/Settings.vue
index a65aae44..e0cf49ad 100644
--- a/src/icons/Settings.vue
+++ b/src/icons/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 11.9994,15.498C 10.0664,15.498 8.49939,13.931 8.49939,11.998C 8.49939,10.0651 10.0664,8.49805 11.9994,8.49805C 13.9324,8.49805 15.4994,10.0651 15.4994,11.998C 15.4994,13.931 13.9324,15.498 11.9994,15.498 Z M 19.4284,12.9741C 19.4704,12.6531 19.4984,12.329 19.4984,11.998C 19.4984,11.6671 19.4704,11.343 19.4284,11.022L 21.5414,9.36804C 21.7294,9.21606 21.7844,8.94604 21.6594,8.73004L 19.6594,5.26605C 19.5354,5.05005 19.2734,4.96204 19.0474,5.04907L 16.5584,6.05206C 16.0424,5.65607 15.4774,5.32104 14.8684,5.06903L 14.4934,2.41907C 14.4554,2.18103 14.2484,1.99805 13.9994,1.99805L 9.99939,1.99805C 9.74939,1.99805 9.5434,2.18103 9.5054,2.41907L 9.1304,5.06805C 8.52039,5.32104 7.95538,5.65607 7.43939,6.05206L 4.95139,5.04907C 4.7254,4.96204 4.46338,5.05005 4.33939,5.26605L 2.33939,8.73004C 2.21439,8.94604 2.26938,9.21606 2.4574,9.36804L 4.5694,11.022C 4.5274,11.342 4.49939,11.6671 4.49939,11.998C 4.49939,12.329 4.5274,12.6541 4.5694,12.9741L 2.4574,14.6271C 2.26938,14.78 2.21439,15.05 2.33939,15.2661L 4.33939,18.73C 4.46338,18.946 4.7254,19.0341 4.95139,18.947L 7.4404,17.944C 7.95639,18.34 8.52139,18.675 9.1304,18.9271L 9.5054,21.577C 9.5434,21.8151 9.74939,21.998 9.99939,21.998L 13.9994,21.998C 14.2484,21.998 14.4554,21.8151 14.4934,21.577L 14.8684,18.9271C 15.4764,18.6741 16.0414,18.34 16.5574,17.9431L 19.0474,18.947C 19.2734,19.0341 19.5354,18.946 19.6594,18.73L 21.6594,15.2661C 21.7844,15.05 21.7294,14.78 21.5414,14.6271L 19.4284,12.9741 Z "/>
   </svg>
 </template>
diff --git a/src/icons/SidePreview.vue b/src/icons/SidePreview.vue
index 4ad35827..d8f703a0 100644
--- a/src/icons/SidePreview.vue
+++ b/src/icons/SidePreview.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="miter" d="M11,20.977l-6,0c-1.104,0 -2,-0.896 -2,-2l0,-14c0,-1.105 0.896,-2 2,-2l14,0c1.105,0 2,0.895 2,2l0,14c0,1.104 -0.895,2 -2,2l-6,0l0,0.023l-2,0l0,-0.023Zm0,-2l0,-14l-6,0l0,14l6,0Zm8,-14l-6,0l0,14l6,0l0,-14Z" />
   </svg>
 </template>
diff --git a/src/icons/StatusBar.vue b/src/icons/StatusBar.vue
index 68299652..dc9b013b 100644
--- a/src/icons/StatusBar.vue
+++ b/src/icons/StatusBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="miter" d="M19,15.023l-14,0l0,-10l14,0m0,-2l-14,0c-1.104,0 -2,0.896 -2,2l0,10c0,1.105 0.896,2 2,2l14,0c1.105,0 2,-0.895 2,-2l0,-10c0,-1.104 -0.895,-2 -2,-2Z" />
     <rect x="3" y="18.977" width="18" height="2" />
   </svg>
diff --git a/src/icons/Table.vue b/src/icons/Table.vue
index ed408a9b..ef551464 100644
--- a/src/icons/Table.vue
+++ b/src/icons/Table.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-width="1.33333" stroke-linejoin="round" d="M 5,4L 19,4C 20.1046,4 21,4.89543 21,6L 21,18C 21,19.1046 20.1046,20 19,20L 5,20C 3.89543,20 3,19.1046 3,18L 3,6C 3,4.89543 3.89543,4 5,4 Z M 5,8L 5,12L 11,12L 11,8L 5,8 Z M 13,8L 13,12L 19,12L 19,8L 13,8 Z M 5,14L 5,18L 11,18L 11,14L 5,14 Z M 13,14L 13,18L 19,18L 19,14L 13,14 Z " />
   </svg>
 </template>
diff --git a/src/icons/Target.vue b/src/icons/Target.vue
index ee458ba2..0cb2d714 100644
--- a/src/icons/Target.vue
+++ b/src/icons/Target.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00" enable-background="new 0 0 24.00 24.00" xml:space="preserve">
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
     <path fill="#000000" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 11.0013,2.0025L 11.0013,4.0725C 7.3825,4.53125 4.53125,7.3825 4.0725,11.0012L 2.0025,11.0012L 2.0025,12.9975L 4.0725,12.9975C 4.53125,16.6213 7.3825,19.4675 11.0013,19.9262L 11.0013,22.0025L 12.9975,22.0025L 12.9975,19.9313C 16.6212,19.4675 19.4675,16.6213 19.9263,12.9975L 22.0025,12.9975L 22.0025,11.0012L 19.9312,11.0012C 19.4675,7.3825 16.6212,4.53125 12.9975,4.0725L 12.9975,2.0025M 11.0013,6.08375L 11.0013,7.9975L 12.9975,7.9975L 12.9975,6.08875C 15.5175,6.51375 17.485,8.48625 17.915,11.0012L 16.0012,11.0012L 16.0012,12.9975L 17.91,12.9975C 17.485,15.5175 15.5125,17.485 12.9975,17.915L 12.9975,16.0012L 11.0013,16.0012L 11.0013,17.91C 8.48625,17.485 6.51375,15.5125 6.08375,12.9975L 7.9975,12.9975L 7.9975,11.0012L 6.08875,11.0012C 6.51375,8.48625 8.48625,6.51375 11.0013,6.08375 Z M 12.0025,11.0012C 11.445,11.0012 11.0013,11.445 11.0013,12.0025C 11.0013,12.5538 11.445,12.9975 12.0025,12.9975C 12.5537,12.9975 12.9975,12.5538 12.9975,12.0025C 12.9975,11.445 12.5537,11.0012 12.0025,11.0012 Z "/>
   </svg>
 </template>
diff --git a/src/icons/Toc.vue b/src/icons/Toc.vue
new file mode 100644
index 00000000..09470cba
--- /dev/null
+++ b/src/icons/Toc.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 24.00 24.00">
+    <path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"/>
+  </svg>
+</template>
diff --git a/src/icons/index.js b/src/icons/index.js
index 3b8a788d..1d299704 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -24,6 +24,10 @@ import Close from './Close';
 import FolderMultiple from './FolderMultiple';
 import Pen from './Pen';
 import Target from './Target';
+import ArrowLeft from './ArrowLeft';
+import HelpCircle from './HelpCircle';
+import Toc from './Toc';
+import Login from './Login';
 
 Vue.component('iconFormatBold', FormatBold);
 Vue.component('iconFormatItalic', FormatItalic);
@@ -50,3 +54,7 @@ Vue.component('iconClose', Close);
 Vue.component('iconFolderMultiple', FolderMultiple);
 Vue.component('iconPen', Pen);
 Vue.component('iconTarget', Target);
+Vue.component('iconArrowLeft', ArrowLeft);
+Vue.component('iconHelpCircle', HelpCircle);
+Vue.component('iconToc', Toc);
+Vue.component('iconLogin', Login);