From c12d594bb20084e8fad7e466ed6423624ec7dc57 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 6 Dec 2018 22:23:02 +0300
Subject: [PATCH] Basic menu with input and button

---
 src/AppMenu.vue                              | 34 +++++++++++++++++++-
 src/assets/images/menu/apps.svg              |  1 +
 src/assets/images/menu/button-active.svg     |  1 +
 src/assets/images/menu/button.svg            |  1 +
 src/assets/images/menu/charts-active.svg     |  1 +
 src/assets/images/menu/charts.svg            |  1 +
 src/assets/images/menu/components.svg        |  1 +
 src/assets/images/menu/data-active.svg       |  1 +
 src/assets/images/menu/data.svg              |  1 +
 src/assets/images/menu/dragdrop-active.svg   |  1 +
 src/assets/images/menu/dragdrop.svg          |  1 +
 src/assets/images/menu/file-active.svg       |  1 +
 src/assets/images/menu/file.svg              |  1 +
 src/assets/images/menu/input-active.svg      |  1 +
 src/assets/images/menu/input.svg             |  1 +
 src/assets/images/menu/menu-active.svg       |  1 +
 src/assets/images/menu/menu.svg              |  1 +
 src/assets/images/menu/message-active.svg    |  1 +
 src/assets/images/menu/message.svg           |  1 +
 src/assets/images/menu/misc-active.svg       |  1 +
 src/assets/images/menu/misc.svg              |  1 +
 src/assets/images/menu/multimedia-active.svg |  1 +
 src/assets/images/menu/multimedia.svg        |  1 +
 src/assets/images/menu/overlay-active.svg    |  1 +
 src/assets/images/menu/overlay.svg           |  1 +
 src/assets/images/menu/panel-active.svg      |  1 +
 src/assets/images/menu/panel.svg             |  1 +
 src/assets/styles/app.scss                   |  2 +-
 28 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/menu/apps.svg
 create mode 100644 src/assets/images/menu/button-active.svg
 create mode 100644 src/assets/images/menu/button.svg
 create mode 100644 src/assets/images/menu/charts-active.svg
 create mode 100644 src/assets/images/menu/charts.svg
 create mode 100644 src/assets/images/menu/components.svg
 create mode 100644 src/assets/images/menu/data-active.svg
 create mode 100644 src/assets/images/menu/data.svg
 create mode 100644 src/assets/images/menu/dragdrop-active.svg
 create mode 100644 src/assets/images/menu/dragdrop.svg
 create mode 100644 src/assets/images/menu/file-active.svg
 create mode 100644 src/assets/images/menu/file.svg
 create mode 100644 src/assets/images/menu/input-active.svg
 create mode 100644 src/assets/images/menu/input.svg
 create mode 100644 src/assets/images/menu/menu-active.svg
 create mode 100644 src/assets/images/menu/menu.svg
 create mode 100644 src/assets/images/menu/message-active.svg
 create mode 100644 src/assets/images/menu/message.svg
 create mode 100644 src/assets/images/menu/misc-active.svg
 create mode 100644 src/assets/images/menu/misc.svg
 create mode 100644 src/assets/images/menu/multimedia-active.svg
 create mode 100644 src/assets/images/menu/multimedia.svg
 create mode 100644 src/assets/images/menu/overlay-active.svg
 create mode 100644 src/assets/images/menu/overlay.svg
 create mode 100644 src/assets/images/menu/panel-active.svg
 create mode 100644 src/assets/images/menu/panel.svg

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 6fc2c72ac..8bd057e4b 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -1,10 +1,42 @@
 <template>
     <div class="layout-sidebar">
+        <div class="layout-menu">
+            <a @click="toggleMenu($event, 0)" :class="{'active-menuitem': activeMenuIndex === 0}">
+                <img alt="input" class="layout-menu-icon-inactive" src="./assets/images/menu/input.svg" />
+                <img alt="input" class="layout-menu-icon-active" src="./assets/images/menu/input-active.svg" />
+                <span>Input</span>
+            </a>
+            <div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}">
+                <div>
+                    <router-link to="/inputtext">&#9679; InputText</router-link>
+                </div>
+            </div>
+
+             <a @click="toggleMenu($event, 1)" :class="{'active-menuitem': activeMenuIndex === 1}">
+                <img alt="button" class="layout-menu-icon-inactive" src="./assets/images/menu/button.svg" />
+                <img alt="button" class="layout-menu-icon-active" src="./assets/images/menu/button-active.svg" />
+                <span>Button</span>
+            </a>
+            <div :class="{'submenuhide': activeMenuIndex !== 1, 'submenushow': activeMenuIndex === 1}">
+                <div>
+                    <router-link to="/button">&#9679; Button</router-link>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-
+    data() {
+        return {
+            activeMenuIndex: null
+        }
+    },
+    methods: {
+        toggleMenu(event, index) {
+            this.activeMenuIndex = index;
+        }
+    }
 }
 </script>
\ No newline at end of file
diff --git a/src/assets/images/menu/apps.svg b/src/assets/images/menu/apps.svg
new file mode 100644
index 000000000..cb36c16c9
--- /dev/null
+++ b/src/assets/images/menu/apps.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#889597"><circle cx="20.178" cy="25.659" r="9.253"/><circle cx="43.659" cy="41.706" r="9.252"/><circle cx="43.659" cy="9.324" r="9.252"/><circle cx="67.141" cy="25.659" r="9.252"/><circle cx="43.659" cy="74.086" r="9.252"/><circle cx="20.178" cy="57.751" r="9.253"/><circle cx="67.141" cy="57.751" r="9.252"/><path d="m53.666 19.461h3.469v28.442h-3.469z" transform="matrix(.5642 .8256 -.8256 .5642 51.9487 -31.0618)"/><path d="m30.826 3.27h3.47v28.442h-3.47z" transform="matrix(.5643 .8256 -.8256 .5643 28.6277 -19.2611)"/><path d="m53.666 51.698h3.469v28.441h-3.469z" transform="matrix(.5642 .8256 -.8256 .5642 78.5641 -17.0143)"/><path d="m29.958 35.436h3.468v28.44h-3.468z" transform="matrix(.5639 .8259 -.8259 .5639 54.8315 -4.5165)"/><path d="m31.476 20.689h3.47v28.441h-3.47z" transform="matrix(.5527 -.8334 .8334 .5527 -14.2373 43.2951)"/><path d="m53.665 3.269h3.469v28.443h-3.469z" transform="matrix(.5523 -.8336 .8336 .5523 10.2223 54.0145)"/><path d="m31.476 52.782h3.47v28.441h-3.47z" transform="matrix(.5525 -.8335 .8335 .5525 -40.9857 57.6635)"/><path d="m53.666 35.361h3.469v28.443h-3.469z" transform="matrix(.5524 -.8336 .8336 .5524 -16.5326 68.3766)"/><path d="m65.407 26.801h3.471v28.443h-3.471z" transform="matrix(1 -.0034 .0034 1 -.1381 .2269)"/><path d="m18.667 26.801h3.469v28.443h-3.469z" transform="matrix(1 -.0034 .0034 1 -.1385 .0692)"/><path d="m42.437 44.891h3.471v28.442h-3.471z" transform="matrix(1 -.0028 .0028 1 -.1661 .1245)"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/button-active.svg b/src/assets/images/menu/button-active.svg
new file mode 100644
index 000000000..7a131004e
--- /dev/null
+++ b/src/assets/images/menu/button-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#42b983"><path d="m20.351 40.021h-3.184v4.001l3.184.021c1.08 0 1.62-.656 1.62-1.962 0-.599-.134-1.093-.4-1.48-.266-.386-.674-.58-1.22-.58z"/><path d="m21.381 37.231c.261-.288.39-.719.39-1.291 0-.573-.146-.984-.439-1.231-.294-.246-.661-.37-1.1-.37h-3.063v3.322h3.063c.504 0 .89-.144 1.149-.43z"/><path d="m58.905 38.891c-.08-.259-.207-.443-.379-.551-.308-.198-.738-.302-1.291-.31-.553-.005-.947.022-1.182.09-.23.067-.433.22-.601.461-.166.24-.277.57-.33.99-.055.42-.08.99-.08 1.711 0 .72.033 1.28.103 1.679.063.4.188.703.369.91.18.207.385.338.61.394.228.051.533.077.92.077.386 0 .677-.014.871-.041.191-.024.379-.092.56-.2.18-.104.311-.271.391-.498.172-.479.26-1.13.26-1.951s-.016-1.42-.051-1.802c-.033-.379-.09-.7-.17-.959z"/><path d="m84.522 24.263h-81.727c-1.587 0-2.874 1.286-2.874 2.874v24.268c0 1.586 1.287 2.873 2.874 2.873h81.728c1.59 0 2.875-1.287 2.875-2.873v-24.268c-.001-1.588-1.286-2.874-2.876-2.874zm-60.781 21.14c-.687.734-1.783 1.1-3.291 1.1h-6.083v-14.646h6.043c1.414 0 2.453.363 3.121 1.091.668.726 1.001 1.671 1.001 2.832 0 .748-.167 1.423-.501 2.031-.333.607-.833.97-1.5 1.091.642.119 1.175.477 1.602 1.069.428.595.641 1.336.641 2.231-.003 1.401-.345 2.466-1.033 3.201zm11.596 1.099h-2.262l-.541-1.121c-.118.068-.286.168-.5.304-.213.133-.38.235-.5.312-.12.071-.277.157-.47.258-.194.102-.378.178-.552.231-.414.134-.866.199-1.36.199-2.106 0-3.16-1.248-3.16-3.742v-7.063h2.801v7.125c0 .947.394 1.42 1.182 1.42.691 0 1.278-.127 1.76-.379.24-.133.507-.314.799-.541v-7.625h2.803zm8.101-8.501h-2.38v4.261c0 .72.072 1.221.221 1.5.146.281.373.479.679.6.801.279 1.248.42 1.341.42v1.721h-2.44c-1.734 0-2.602-1.266-2.602-3.801v-4.701h-1.721v-1.562l1.721-.58.46-2.961h2.342v2.961h2.38v2.142zm7.625 0h-2.383v4.261c0 .72.073 1.221.221 1.5.146.281.375.479.682.6.799.279 1.246.42 1.34.42v1.721h-2.44c-1.734 0-2.603-1.266-2.603-3.801v-4.701h-1.719v-1.562l1.719-.58.461-2.961h2.341v2.961h2.383zm9.834 7.462c-.688.761-1.957 1.14-3.812 1.14-1.813 0-3.082-.403-3.801-1.222-.695-.784-1.041-2.11-1.041-3.979 0-.921.053-1.691.158-2.312.106-.621.274-1.147.502-1.58.227-.435.541-.778.941-1.03.733-.468 1.812-.701 3.239-.701 1.828 0 3.092.399 3.791 1.2.701.799 1.051 2.225 1.051 4.271.002 2.049-.34 3.454-1.028 4.213zm12.055 1.039h-2.803v-7.122c0-.96-.394-1.44-1.18-1.44-.533 0-.988.07-1.359.21-.375.14-.775.376-1.201.709v7.643h-2.801v-10.623h2.24l.561 1.14c.975-.708 1.746-1.112 2.32-1.22.307-.067.653-.101 1.041-.101 2.121 0 3.182 1.24 3.182 3.722z"/><path d="m84.522 56.274h-81.727c-1.587 0-2.874-1.285-2.874-2.875v2.875c0 1.588 1.287 2.873 2.874 2.873h81.728c1.59 0 2.875-1.285 2.875-2.873v-2.875c-.001 1.59-1.286 2.875-2.876 2.875z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/button.svg b/src/assets/images/menu/button.svg
new file mode 100644
index 000000000..4553ba490
--- /dev/null
+++ b/src/assets/images/menu/button.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m20.351 40.021h-3.184v4.001l3.184.021c1.08 0 1.62-.656 1.62-1.962 0-.599-.134-1.093-.4-1.48-.266-.386-.674-.58-1.22-.58z"/><path d="m21.381 37.231c.261-.288.39-.719.39-1.291 0-.573-.146-.984-.439-1.231-.294-.246-.661-.37-1.1-.37h-3.063v3.322h3.063c.504 0 .89-.144 1.149-.43z"/><path d="m58.905 38.891c-.08-.259-.207-.443-.379-.551-.308-.198-.738-.302-1.291-.31-.553-.005-.947.022-1.182.09-.23.067-.433.22-.601.461-.166.24-.277.57-.33.99-.055.42-.08.99-.08 1.711 0 .72.033 1.28.103 1.679.063.4.188.703.369.91.18.207.385.338.61.394.228.051.533.077.92.077.386 0 .677-.014.871-.041.191-.024.379-.092.56-.2.18-.104.311-.271.391-.498.172-.479.26-1.13.26-1.951s-.016-1.42-.051-1.802c-.033-.379-.09-.7-.17-.959z"/><path d="m84.522 24.263h-81.727c-1.587 0-2.874 1.286-2.874 2.874v24.268c0 1.586 1.287 2.873 2.874 2.873h81.728c1.59 0 2.875-1.287 2.875-2.873v-24.268c-.001-1.588-1.286-2.874-2.876-2.874zm-60.781 21.14c-.687.734-1.783 1.1-3.291 1.1h-6.083v-14.646h6.043c1.414 0 2.453.363 3.121 1.091.668.726 1.001 1.671 1.001 2.832 0 .748-.167 1.423-.501 2.031-.333.607-.833.97-1.5 1.091.642.119 1.175.477 1.602 1.069.428.595.641 1.336.641 2.231-.003 1.401-.345 2.466-1.033 3.201zm11.596 1.099h-2.262l-.541-1.121c-.118.068-.286.168-.5.304-.213.133-.38.235-.5.312-.12.071-.277.157-.47.258-.194.102-.378.178-.552.231-.414.134-.866.199-1.36.199-2.106 0-3.16-1.248-3.16-3.742v-7.063h2.801v7.125c0 .947.394 1.42 1.182 1.42.691 0 1.278-.127 1.76-.379.24-.133.507-.314.799-.541v-7.625h2.803zm8.101-8.501h-2.38v4.261c0 .72.072 1.221.221 1.5.146.281.373.479.679.6.801.279 1.248.42 1.341.42v1.721h-2.44c-1.734 0-2.602-1.266-2.602-3.801v-4.701h-1.721v-1.562l1.721-.58.46-2.961h2.342v2.961h2.38v2.142zm7.625 0h-2.383v4.261c0 .72.073 1.221.221 1.5.146.281.375.479.682.6.799.279 1.246.42 1.34.42v1.721h-2.44c-1.734 0-2.603-1.266-2.603-3.801v-4.701h-1.719v-1.562l1.719-.58.461-2.961h2.341v2.961h2.383zm9.834 7.462c-.688.761-1.957 1.14-3.812 1.14-1.813 0-3.082-.403-3.801-1.222-.695-.784-1.041-2.11-1.041-3.979 0-.921.053-1.691.158-2.312.106-.621.274-1.147.502-1.58.227-.435.541-.778.941-1.03.733-.468 1.812-.701 3.239-.701 1.828 0 3.092.399 3.791 1.2.701.799 1.051 2.225 1.051 4.271.002 2.049-.34 3.454-1.028 4.213zm12.055 1.039h-2.803v-7.122c0-.96-.394-1.44-1.18-1.44-.533 0-.988.07-1.359.21-.375.14-.775.376-1.201.709v7.643h-2.801v-10.623h2.24l.561 1.14c.975-.708 1.746-1.112 2.32-1.22.307-.067.653-.101 1.041-.101 2.121 0 3.182 1.24 3.182 3.722z"/><path d="m84.522 56.274h-81.727c-1.587 0-2.874-1.285-2.874-2.875v2.875c0 1.588 1.287 2.873 2.874 2.873h81.728c1.59 0 2.875-1.285 2.875-2.873v-2.875c-.001 1.59-1.286 2.875-2.876 2.875z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/charts-active.svg b/src/assets/images/menu/charts-active.svg
new file mode 100644
index 000000000..c4aa690b8
--- /dev/null
+++ b/src/assets/images/menu/charts-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#03c4e8"><path d="m68.851 20.514v23.34h.124l18.323 14.267c-4.269 5.511-10.935 9.074-18.447 9.074-12.892 0-23.34-10.449-23.34-23.341 0-12.891 10.449-23.34 23.34-23.34z"/><path d="m.019 36.949h11.045v30.207h-11.045z"/><path d="m14.788 16.216h11.045v50.939h-11.045z"/><path d="m29.556 27.008h11.045v40.147h-11.045z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/charts.svg b/src/assets/images/menu/charts.svg
new file mode 100644
index 000000000..11240b98a
--- /dev/null
+++ b/src/assets/images/menu/charts.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m68.851 20.514v23.34h.124l18.323 14.267c-4.269 5.511-10.935 9.074-18.447 9.074-12.892 0-23.34-10.449-23.34-23.341 0-12.891 10.449-23.34 23.34-23.34z"/><path d="m.019 36.949h11.045v30.207h-11.045z"/><path d="m14.788 16.216h11.045v50.939h-11.045z"/><path d="m29.556 27.008h11.045v40.147h-11.045z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/components.svg b/src/assets/images/menu/components.svg
new file mode 100644
index 000000000..e6f18ea1e
--- /dev/null
+++ b/src/assets/images/menu/components.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#889597" transform="matrix(5.34921 0 0 5.34921 -1638.26701 -1667.12454)"><path d="m314.768 326.119v-4.224l7.551-4.224v4.224z"/><path d="m314.188 326.165v-4.224l-7.551-4.224v4.224z"/><path d="m312.483 316.089c0-.654-.947-1.184-2.116-1.184s-2.116.53-2.116 1.184.947 1.183 2.116 1.183c1.168.001 2.116-.529 2.116-1.183z"/><path d="m316.428 318.151c0-.654-.947-1.184-2.116-1.184-1.168 0-2.116.53-2.116 1.184s.947 1.183 2.116 1.183c1.169.001 2.116-.529 2.116-1.183z"/><path d="m320.493 316.089c0-.654-.947-1.184-2.116-1.184-1.168 0-2.116.53-2.116 1.184s.948 1.183 2.116 1.183c1.169.001 2.116-.529 2.116-1.183z"/><path d="m314.52 312.99-1.621.906c.375-.188.87-.303 1.413-.303 1.169 0 2.116.53 2.116 1.184s-.947 1.184-2.116 1.184c-1.168 0-2.116-.53-2.116-1.184 0-.304.205-.581.541-.79l-3.468 1.939c.32-.108.695-.171 1.097-.171 1.168 0 2.116.53 2.116 1.184 0 .653-.947 1.184-2.116 1.184s-2.116-.53-2.116-1.184c0-.225.112-.435.306-.614l-1.534.858 7.496 4.193 7.496-4.193zm-.208 7.195c-1.168 0-2.116-.53-2.116-1.183 0-.654.947-1.184 2.116-1.184s2.116.53 2.116 1.184c0 .653-.947 1.183-2.116 1.183zm4.066-2.062c-1.168 0-2.116-.53-2.116-1.184s.948-1.184 2.116-1.184c1.169 0 2.116.53 2.116 1.184-.001.654-.948 1.184-2.116 1.184z"/><path d="m316.428 313.927c0-.654-.947-1.183-2.116-1.183-1.168 0-2.116.53-2.116 1.183 0 .654.947 1.184 2.116 1.184s2.116-.53 2.116-1.184z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/data-active.svg b/src/assets/images/menu/data-active.svg
new file mode 100644
index 000000000..bc3c052b6
--- /dev/null
+++ b/src/assets/images/menu/data-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#03c4e8"><ellipse cx="43.659" cy="22.15" rx="43.616" ry="16.3"/><path d="m.043 29.25s6.548 14.195 43.616 14.195c37.067 0 43.616-14.195 43.616-14.195v8.218s-7.969 14.195-43.616 14.195c-35.646 0-43.616-13.946-43.616-13.946v-8.467z"/><path d="m.043 42.199s6.548 14.195 43.616 14.195c37.067 0 43.616-14.195 43.616-14.195v8.219s-7.969 14.193-43.616 14.193c-35.646 0-43.616-13.945-43.616-13.945v-8.467z"/><path d="m.043 55.149s6.548 14.193 43.616 14.193c37.067 0 43.616-14.193 43.616-14.193v8.219s-7.969 14.193-43.616 14.193c-35.646 0-43.616-13.945-43.616-13.945v-8.467z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/data.svg b/src/assets/images/menu/data.svg
new file mode 100644
index 000000000..df24eea28
--- /dev/null
+++ b/src/assets/images/menu/data.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><ellipse cx="43.659" cy="22.15" rx="43.616" ry="16.3"/><path d="m.043 29.25s6.548 14.195 43.616 14.195c37.067 0 43.616-14.195 43.616-14.195v8.218s-7.969 14.195-43.616 14.195c-35.646 0-43.616-13.946-43.616-13.946v-8.467z"/><path d="m.043 42.199s6.548 14.195 43.616 14.195c37.067 0 43.616-14.195 43.616-14.195v8.219s-7.969 14.193-43.616 14.193c-35.646 0-43.616-13.945-43.616-13.945v-8.467z"/><path d="m.043 55.149s6.548 14.193 43.616 14.193c37.067 0 43.616-14.193 43.616-14.193v8.219s-7.969 14.193-43.616 14.193c-35.646 0-43.616-13.945-43.616-13.945v-8.467z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/dragdrop-active.svg b/src/assets/images/menu/dragdrop-active.svg
new file mode 100644
index 000000000..b766b70ce
--- /dev/null
+++ b/src/assets/images/menu/dragdrop-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#03c4e8"><path d="m47.303 33.088h-9.331v3.109h8.293v.572h3.111v-1.608h-2.074v-2.073zm-13.478 0h-9.33v3.109h9.33zm-13.477 0h-9.331v3.109h9.331zm-13.476 0h-4.697c-1.146 0-2.074.928-2.074 2.073v1.375h3.109v-.339h3.662zm-3.662 7.594h-3.109v9.331h3.109zm0 13.479h-3.109v9.33h3.109zm0 13.477h-3.109v9.331h3.109zm-1.035 12.653-1.914.803c.178.421.488.77.878.996.002.001.007.003.01.004.002.002.005.004.007.005.005.004.01.006.015.009.012.006.022.013.035.019.003.001.005.003.008.004.002.003.005.004.007.005.005.003.013.005.018.009.002.001.005.003.007.004.005.001.008.002.01.004.002.001.005.004.007.004.002.002.005.003.01.005.002.001.005.002.007.004.002.002.005.002.007.003.005.003.008.004.01.004.002.003.005.004.007.005.002.002.005.003.01.004.002.001.005.003.007.004.002.001.005.004.01.004.002.001.005.002.007.004v.001c.002 0 .005.001.007.003.005.002.008.002.01.003.002.002.005.003.01.004.002.001.005.003.008.004.002.001.005.003.007.004.005.001.007.002.01.004.002.001.005.002.01.004.002.001.005.002.007.002v.001c.003.002.005.003.01.004.002 0 .005.002.007.003.002.001.005.002.01.004.002.001.005.002.007.004.005 0 .008.001.01.002.002.001.005.003.007.003v.001c.005 0 .007.002.01.002v.002c.002 0 .005.001.007.002h.002c.002.002.005.003.007.004.003 0 .008.001.01.003.002.001.005.002.007.002.005.002.008.003.01.004.002.001.005.003.01.003.002.001.005.002.008.004.005.001.007.001.01.002.002.001.005.003.007.004h.003.002c.002.001.005.001.005.001.002.002.002.002.005.003.002 0 .002.001.005.001h.005c0 .001.002.001.005.003l.002.001h.002l.002.001c.002 0 .005 0 .005.001.002 0 .002.002.005.002.002.001.002.001.005.001l.002.001h.002s.002.002.005.002l.002.001h.002c0 .001.002.001.002.001v.001c.002 0 .002 0 .005.002h.005c.003 0 .003.001.005.001 0 .001.002.001.005.001s.002.002.002.003h.002.002c.002 0 .002.001.005.001.003 0 .005.001.005.001.002.002.002.002.005.002.002.001.002.001.005.002h.005s.002.002.005.002l.002.001h.002l.002.001c.002 0 .002.001.005.001h.005c.002.002.002.002.005.002.002.001.002.001.005.001.002.001.002.001.005.001v.001h.005s.002 0 .002.002h.002l.002.001c.002 0 .005 0 .005.001h.005v.002h.005c.002 0 .002 0 .005.001.002 0 .002 0 .005.001h.005v.001s.003 0 .005.002h.005.002.002l.002.001h.002c0 .001.003.001.003.001.002.002.002.002.005.002h.002l.002.001h.005c.002 0 .002 0 .005.001.002 0 .002 0 .005.001h.005s.002.002.005.002c0 .001.002.001.002.001h.003l.002.001h.002.002.002.002s.002 0 .002.002h.002c.002.001.005.001.005.001.002 0 .002 0 .005.001.002 0 .002 0 .005.001h.005.005c.002 0 .002.002.005.002h.005c.002.001.002.001.005.001.002 0 .002.001.005.001h.005s.002.001.005.001l.002.002h.002.002.003.002c.002 0 .005.001.005.001h.005c.002 0 .005.001.005.001s0 0 .003 0h.002v.002h.005.005v.001h.005.005.005c.002 0 .002 0 .005.001h.005c.003 0 .003.001.005.001h.005c.002 0 .002 0 .005.002h.005c.002 0 .002 0 .005.001h.005.005.002.002.005s.002.001.005.001h.002.002.002.002l.002.002h.003.002.031.002.002l.002.001h.002.002.003.002.002s.002 0 .002.001h.002.002.002.002.005s0 0 .002 0h.002.005s0 0 .002 0h.002.005.01.002.002l.002.001h.002.002.005.005.002.005s0 0 .002 0h.002c.002.002.005.002.005.002h.004.002.002.002.002.002.005.005.002.005s0 0 .002 0h.002.005s0 0 .002 0h.005v-2.081zm6.896-1.038h-6.896v1.037 2.074h6.896zm13.478 0h-9.331v3.111h9.331zm13.476 0h-9.328v3.111h9.328zm11.278 0h-7.131v3.111h7.131v-2.074zm0 1.037v2.075h.002.004.002.002.002.006.006.004.002.004.002.006.004c.002 0 .002 0 .006-.002h.002.002.004.004.006.004.006l.002-.001h.002.004.004.006.002.002.004.002.002.002.004.004c.004 0 .004 0 .004-.001h.002.002.002.004.004c.004 0 .004 0 .006-.001h.002.002.004.002s.002 0 .002-.002h.006.004.004.002l.002-.001h.006.004.004.002.002c.002 0 .006-.001.006-.001s0 0 .002 0h.002c.004 0 .004-.002.006-.002h.002.002.004c.002-.001.002-.001.004-.001h.006v-.001h.002.002.004.002.002c.002 0 .008-.001.01-.001h.004.002l.002-.002h.006v-.001h.002.002.004.002l.002-.001h.006.004c.004 0 .004 0 .004-.002h.002.002c.002-.001.002-.001.006-.001h.002c.002 0 .002-.001.002-.001h-.005.004l.002-.001h.002.004c.002-.002.002-.002.004-.002h.002.004.002c.002-.001.006-.001.006-.001.002 0 .002-.001.004-.001h.002.004l.002-.001c.002-.002.002-.002.006-.002h.004.002l.004-.001h.002c.002 0 .002-.001.004-.001.004 0 .004 0 .006-.002h.002.004c0-.001.002-.001.002-.001.002 0 .002-.001.004-.001h.004.002s.002 0 .002-.001h.006c.002-.002.002-.002.002-.002h.002l.004-.001h.002s0 0 .002-.001h.006.004s0 0 0-.002h.004s0 0 .002-.001h.002c.004 0 .004-.001.006-.001 0-.001.002-.001.002-.001s0 0 .002 0h.004c.002 0 .002-.002.004-.002.002 0 .002 0 .002-.001h.004l.002-.001h.002s0 0 .004 0v-.002h.004.002.004l.002-.001v-.001h.006l.002-.001c.002 0 .002 0 .002-.002h.002c.004 0 .006-.001.008-.001h.004c0-.001.002-.001.002-.001s0 0 .002 0l.002-.001c.004-.002.004-.002.006-.002h.002.002l.004-.001c0-.001 0-.001 0-.001h.004v-.001h.004c0-.001 0-.001.002-.001l.002-.001h.006s.002 0 .002-.001h.002l.004-.002c.002 0 .002 0 .004-.001.002 0 .002-.001.006-.001h.002.002c0-.002 0-.002.004-.002l.004-.002h.002s0-.001.004-.001c0 0 0 0 .002-.002h.006l.002-.001c.002-.001.002-.001.004-.001s.004-.002.006-.002v-.001h.002.002s0 0 .004-.001c.002 0 .002-.001.004-.001l.004-.002s0 0 .002-.001c0 0 .002 0 .004-.001h.004s.002 0 .002-.001c.002-.002.002-.002.006-.002 0-.001.002-.001.002-.001h.002l.002-.001c.004 0 .004-.002.006-.002.002 0 .002-.001.002-.001h.004l.002-.001c.002 0 .002-.001.004-.001l.004-.002h.002c0-.001.002-.001.002-.001v-.001h.006l.002-.002c.002-.001.006-.002.008-.003h.002l.002-.002c.004 0 .006-.001.008-.002h.004l.002-.002h.004l.004-.001h.002c0-.001.002-.001.002-.001v-.002c.004 0 .004 0 .006-.001l.002-.001c.002-.002.006-.002.01-.003 0 0 0 0 0-.001l.004-.001c.002 0 .004-.002.006-.003h.004s0-.001.002-.001c.002-.001.004-.001.008-.003l.004-.002.004-.002c.002 0 .002 0 .004-.001.002 0 .002-.001.006-.001 0-.001.002-.001.002-.001v-.002h.006c.002-.001.004-.002.006-.004.004-.001.004-.001.006-.001.002-.001.006-.002.008-.004l.002-.002c.002 0 .006-.002.01-.003l.002-.002c.004 0 .006-.002.008-.003h.004c.002-.001.004-.003.006-.004l.004-.001c.002-.001.004-.003.008-.004h.004v-.001c.002-.001.006-.003.008-.004s.002 0 .006-.001c.002-.002.004-.003.006-.004l.004-.001c.002-.002.004-.003.008-.004.002-.002.004-.003.006-.004h.004s0-.001.002-.001c.002-.002.004-.003.008-.004.002-.002.002-.002.004-.003.004 0 .006-.001.008-.002 0 0 0 0 0-.002l.002-.001c.004-.001.006-.002.008-.004.006-.002.008-.004.014-.005 0 0 0 0 0-.001.002-.001.004-.001.008-.003l.004-.002c.002-.002.006-.003.008-.004l.002-.001v-.002c.004 0 .006-.001.008-.002.002-.002.002-.003.006-.003.002-.001.004-.002.006-.004.004-.001.008-.003.012-.006.004-.001.006-.004.012-.006.01-.006.02-.011.029-.017.004-.001.008-.004.01-.005.004-.002.006-.004.008-.005.004 0 .004 0 .006-.002.002-.002.004-.003.008-.003l.002-.003c.002-.003.006-.003.008-.005.002-.003.008-.004.012-.007.004-.002.006-.003.01-.006v-.001c.238-.142.445-.33.609-.555.012-.018.027-.036.039-.054.006-.007.01-.014.012-.021h.004c0-.003.002-.006.004-.008v-.003h.004c0-.004.002-.005.002-.007v-.002c.002-.001.002-.001.002-.001v.005c.002-.003.002-.005.006-.008s.002-.001.002-.003v-.001c.002-.002.002-.004.006-.006v-.001c0-.002 0-.002.002-.003 0-.003.002-.005.002-.008h.002c0-.002.004-.005.004-.007.002-.002.002-.003.002-.004.002-.002.002-.004.006-.007 0-.001 0-.002.002-.003v-.002c0-.001.002-.004.004-.005 0-.001 0-.001 0-.001s0-.003 0-.004l.004-.001v-.003c.002-.001.002-.002.002-.002v-.002c.002-.001.002-.002.002-.002v-.002c0-.001.004-.001.004-.003l.002-.003v.001c0-.001 0-.003.002-.004s0-.001 0-.003c.002-.001.002-.001.002-.001 0-.001 0-.001 0-.001s0-.001 0-.003c.004-.001.004-.001.004-.002l.002-.004c0-.001 0-.001 0-.001l.002-.002c0-.001 0-.001 0-.001s0-.003.002-.004c0 0 0 0 0-.001 0 0 0-.001 0-.003.004 0 .004-.001.004-.001s0 0 0-.001v-.002c.002-.002.002-.002.002-.002v-.001zm2.075-12.419h-3.111v9.332h3.111zm0-13.477h-3.111v9.331h3.111zm0-13.477h-3.111v9.33h3.111zm-2.075-7.829v2.073h2.074c.001-1.145-.927-2.073-2.074-2.073z"/><path d="m56.329 38.811 5.773 23 6.131-6.132 9.256 9.255 2.484-2.481 2.481-2.482-9.256-9.255 6.133-6.133z"/><path d="m85.143 1.045h-45.129c-1.146 0-2.074.929-2.074 2.074v45.13c0 1.145.928 2.072 2.074 2.072h17.068l-2.766-11.005-.842-3.359 3.359.843 23 5.773 3.547.889-2.586 2.587-4.271 4.272h8.619c1.146 0 2.074-.928 2.074-2.072v-45.129c.002-1.146-.926-2.075-2.073-2.075z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/dragdrop.svg b/src/assets/images/menu/dragdrop.svg
new file mode 100644
index 000000000..f9e8929f3
--- /dev/null
+++ b/src/assets/images/menu/dragdrop.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m47.303 33.088h-9.331v3.109h8.293v.572h3.111v-1.608h-2.074v-2.073zm-13.478 0h-9.33v3.109h9.33zm-13.477 0h-9.331v3.109h9.331zm-13.476 0h-4.697c-1.146 0-2.074.928-2.074 2.073v1.375h3.109v-.339h3.662zm-3.662 7.594h-3.109v9.331h3.109zm0 13.479h-3.109v9.33h3.109zm0 13.477h-3.109v9.331h3.109zm-1.035 12.653-1.914.803c.178.421.488.77.878.996.002.001.007.003.01.004.002.002.005.004.007.005.005.004.01.006.015.009.012.006.022.013.035.019.003.001.005.003.008.004.002.003.005.004.007.005.005.003.013.005.018.009.002.001.005.003.007.004.005.001.008.002.01.004.002.001.005.004.007.004.002.002.005.003.01.005.002.001.005.002.007.004.002.002.005.002.007.003.005.003.008.004.01.004.002.003.005.004.007.005.002.002.005.003.01.004.002.001.005.003.007.004.002.001.005.004.01.004.002.001.005.002.007.004v.001c.002 0 .005.001.007.003.005.002.008.002.01.003.002.002.005.003.01.004.002.001.005.003.008.004.002.001.005.003.007.004.005.001.007.002.01.004.002.001.005.002.01.004.002.001.005.002.007.002v.001c.003.002.005.003.01.004.002 0 .005.002.007.003.002.001.005.002.01.004.002.001.005.002.007.004.005 0 .008.001.01.002.002.001.005.003.007.003v.001c.005 0 .007.002.01.002v.002c.002 0 .005.001.007.002h.002c.002.002.005.003.007.004.003 0 .008.001.01.003.002.001.005.002.007.002.005.002.008.003.01.004.002.001.005.003.01.003.002.001.005.002.008.004.005.001.007.001.01.002.002.001.005.003.007.004h.003.002c.002.001.005.001.005.001.002.002.002.002.005.003.002 0 .002.001.005.001h.005c0 .001.002.001.005.003l.002.001h.002l.002.001c.002 0 .005 0 .005.001.002 0 .002.002.005.002.002.001.002.001.005.001l.002.001h.002s.002.002.005.002l.002.001h.002c0 .001.002.001.002.001v.001c.002 0 .002 0 .005.002h.005c.003 0 .003.001.005.001 0 .001.002.001.005.001s.002.002.002.003h.002.002c.002 0 .002.001.005.001.003 0 .005.001.005.001.002.002.002.002.005.002.002.001.002.001.005.002h.005s.002.002.005.002l.002.001h.002l.002.001c.002 0 .002.001.005.001h.005c.002.002.002.002.005.002.002.001.002.001.005.001.002.001.002.001.005.001v.001h.005s.002 0 .002.002h.002l.002.001c.002 0 .005 0 .005.001h.005v.002h.005c.002 0 .002 0 .005.001.002 0 .002 0 .005.001h.005v.001s.003 0 .005.002h.005.002.002l.002.001h.002c0 .001.003.001.003.001.002.002.002.002.005.002h.002l.002.001h.005c.002 0 .002 0 .005.001.002 0 .002 0 .005.001h.005s.002.002.005.002c0 .001.002.001.002.001h.003l.002.001h.002.002.002.002s.002 0 .002.002h.002c.002.001.005.001.005.001.002 0 .002 0 .005.001.002 0 .002 0 .005.001h.005.005c.002 0 .002.002.005.002h.005c.002.001.002.001.005.001.002 0 .002.001.005.001h.005s.002.001.005.001l.002.002h.002.002.003.002c.002 0 .005.001.005.001h.005c.002 0 .005.001.005.001s0 0 .003 0h.002v.002h.005.005v.001h.005.005.005c.002 0 .002 0 .005.001h.005c.003 0 .003.001.005.001h.005c.002 0 .002 0 .005.002h.005c.002 0 .002 0 .005.001h.005.005.002.002.005s.002.001.005.001h.002.002.002.002l.002.002h.003.002.031.002.002l.002.001h.002.002.003.002.002s.002 0 .002.001h.002.002.002.002.005s0 0 .002 0h.002.005s0 0 .002 0h.002.005.01.002.002l.002.001h.002.002.005.005.002.005s0 0 .002 0h.002c.002.002.005.002.005.002h.004.002.002.002.002.002.005.005.002.005s0 0 .002 0h.002.005s0 0 .002 0h.005v-2.081zm6.896-1.038h-6.896v1.037 2.074h6.896zm13.478 0h-9.331v3.111h9.331zm13.476 0h-9.328v3.111h9.328zm11.278 0h-7.131v3.111h7.131v-2.074zm0 1.037v2.075h.002.004.002.002.002.006.006.004.002.004.002.006.004c.002 0 .002 0 .006-.002h.002.002.004.004.006.004.006l.002-.001h.002.004.004.006.002.002.004.002.002.002.004.004c.004 0 .004 0 .004-.001h.002.002.002.004.004c.004 0 .004 0 .006-.001h.002.002.004.002s.002 0 .002-.002h.006.004.004.002l.002-.001h.006.004.004.002.002c.002 0 .006-.001.006-.001s0 0 .002 0h.002c.004 0 .004-.002.006-.002h.002.002.004c.002-.001.002-.001.004-.001h.006v-.001h.002.002.004.002.002c.002 0 .008-.001.01-.001h.004.002l.002-.002h.006v-.001h.002.002.004.002l.002-.001h.006.004c.004 0 .004 0 .004-.002h.002.002c.002-.001.002-.001.006-.001h.002c.002 0 .002-.001.002-.001h-.005.004l.002-.001h.002.004c.002-.002.002-.002.004-.002h.002.004.002c.002-.001.006-.001.006-.001.002 0 .002-.001.004-.001h.002.004l.002-.001c.002-.002.002-.002.006-.002h.004.002l.004-.001h.002c.002 0 .002-.001.004-.001.004 0 .004 0 .006-.002h.002.004c0-.001.002-.001.002-.001.002 0 .002-.001.004-.001h.004.002s.002 0 .002-.001h.006c.002-.002.002-.002.002-.002h.002l.004-.001h.002s0 0 .002-.001h.006.004s0 0 0-.002h.004s0 0 .002-.001h.002c.004 0 .004-.001.006-.001 0-.001.002-.001.002-.001s0 0 .002 0h.004c.002 0 .002-.002.004-.002.002 0 .002 0 .002-.001h.004l.002-.001h.002s0 0 .004 0v-.002h.004.002.004l.002-.001v-.001h.006l.002-.001c.002 0 .002 0 .002-.002h.002c.004 0 .006-.001.008-.001h.004c0-.001.002-.001.002-.001s0 0 .002 0l.002-.001c.004-.002.004-.002.006-.002h.002.002l.004-.001c0-.001 0-.001 0-.001h.004v-.001h.004c0-.001 0-.001.002-.001l.002-.001h.006s.002 0 .002-.001h.002l.004-.002c.002 0 .002 0 .004-.001.002 0 .002-.001.006-.001h.002.002c0-.002 0-.002.004-.002l.004-.002h.002s0-.001.004-.001c0 0 0 0 .002-.002h.006l.002-.001c.002-.001.002-.001.004-.001s.004-.002.006-.002v-.001h.002.002s0 0 .004-.001c.002 0 .002-.001.004-.001l.004-.002s0 0 .002-.001c0 0 .002 0 .004-.001h.004s.002 0 .002-.001c.002-.002.002-.002.006-.002 0-.001.002-.001.002-.001h.002l.002-.001c.004 0 .004-.002.006-.002.002 0 .002-.001.002-.001h.004l.002-.001c.002 0 .002-.001.004-.001l.004-.002h.002c0-.001.002-.001.002-.001v-.001h.006l.002-.002c.002-.001.006-.002.008-.003h.002l.002-.002c.004 0 .006-.001.008-.002h.004l.002-.002h.004l.004-.001h.002c0-.001.002-.001.002-.001v-.002c.004 0 .004 0 .006-.001l.002-.001c.002-.002.006-.002.01-.003 0 0 0 0 0-.001l.004-.001c.002 0 .004-.002.006-.003h.004s0-.001.002-.001c.002-.001.004-.001.008-.003l.004-.002.004-.002c.002 0 .002 0 .004-.001.002 0 .002-.001.006-.001 0-.001.002-.001.002-.001v-.002h.006c.002-.001.004-.002.006-.004.004-.001.004-.001.006-.001.002-.001.006-.002.008-.004l.002-.002c.002 0 .006-.002.01-.003l.002-.002c.004 0 .006-.002.008-.003h.004c.002-.001.004-.003.006-.004l.004-.001c.002-.001.004-.003.008-.004h.004v-.001c.002-.001.006-.003.008-.004s.002 0 .006-.001c.002-.002.004-.003.006-.004l.004-.001c.002-.002.004-.003.008-.004.002-.002.004-.003.006-.004h.004s0-.001.002-.001c.002-.002.004-.003.008-.004.002-.002.002-.002.004-.003.004 0 .006-.001.008-.002 0 0 0 0 0-.002l.002-.001c.004-.001.006-.002.008-.004.006-.002.008-.004.014-.005 0 0 0 0 0-.001.002-.001.004-.001.008-.003l.004-.002c.002-.002.006-.003.008-.004l.002-.001v-.002c.004 0 .006-.001.008-.002.002-.002.002-.003.006-.003.002-.001.004-.002.006-.004.004-.001.008-.003.012-.006.004-.001.006-.004.012-.006.01-.006.02-.011.029-.017.004-.001.008-.004.01-.005.004-.002.006-.004.008-.005.004 0 .004 0 .006-.002.002-.002.004-.003.008-.003l.002-.003c.002-.003.006-.003.008-.005.002-.003.008-.004.012-.007.004-.002.006-.003.01-.006v-.001c.238-.142.445-.33.609-.555.012-.018.027-.036.039-.054.006-.007.01-.014.012-.021h.004c0-.003.002-.006.004-.008v-.003h.004c0-.004.002-.005.002-.007v-.002c.002-.001.002-.001.002-.001v.005c.002-.003.002-.005.006-.008s.002-.001.002-.003v-.001c.002-.002.002-.004.006-.006v-.001c0-.002 0-.002.002-.003 0-.003.002-.005.002-.008h.002c0-.002.004-.005.004-.007.002-.002.002-.003.002-.004.002-.002.002-.004.006-.007 0-.001 0-.002.002-.003v-.002c0-.001.002-.004.004-.005 0-.001 0-.001 0-.001s0-.003 0-.004l.004-.001v-.003c.002-.001.002-.002.002-.002v-.002c.002-.001.002-.002.002-.002v-.002c0-.001.004-.001.004-.003l.002-.003v.001c0-.001 0-.003.002-.004s0-.001 0-.003c.002-.001.002-.001.002-.001 0-.001 0-.001 0-.001s0-.001 0-.003c.004-.001.004-.001.004-.002l.002-.004c0-.001 0-.001 0-.001l.002-.002c0-.001 0-.001 0-.001s0-.003.002-.004c0 0 0 0 0-.001 0 0 0-.001 0-.003.004 0 .004-.001.004-.001s0 0 0-.001v-.002c.002-.002.002-.002.002-.002v-.001zm2.075-12.419h-3.111v9.332h3.111zm0-13.477h-3.111v9.331h3.111zm0-13.477h-3.111v9.33h3.111zm-2.075-7.829v2.073h2.074c.001-1.145-.927-2.073-2.074-2.073z"/><path d="m56.329 38.811 5.773 23 6.131-6.132 9.256 9.255 2.484-2.481 2.481-2.482-9.256-9.255 6.133-6.133z"/><path d="m85.143 1.045h-45.129c-1.146 0-2.074.929-2.074 2.074v45.13c0 1.145.928 2.072 2.074 2.072h17.068l-2.766-11.005-.842-3.359 3.359.843 23 5.773 3.547.889-2.586 2.587-4.271 4.272h8.619c1.146 0 2.074-.928 2.074-2.072v-45.129c.002-1.146-.926-2.075-2.073-2.075z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/file-active.svg b/src/assets/images/menu/file-active.svg
new file mode 100644
index 000000000..ca6bbf261
--- /dev/null
+++ b/src/assets/images/menu/file-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#03c4e8"><path d="m19.281 79.582 60.706-23.925s1.098.102 1.596-1.993l5.582-32.994s1.097-4.187-3.19-3.19-60.805 11.962-60.805 11.962-6.197 1.371-5.784 7.475c.307 4.481 2.494 40.87 2.494 40.87s.111.992-.599 1.795z"/><path d="m15.491 74.872-2.689-40.472s0-6.58 6.579-7.876 49.815-9.792 49.815-9.792l-.599-7.402s-.896-3.587-4.934-2.99-37.157 4.934-37.157 4.934-5.68 1.271-7.474-4.561c0 0-1.198-3.288-4.413-2.842-3.214.449-11.063 1.124-11.063 1.124s-4.188.448-3.439 4.26c.746 3.813 11.737 60.856 11.737 60.856s2.192 8.548 3.637 4.761z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/file.svg b/src/assets/images/menu/file.svg
new file mode 100644
index 000000000..4cdd197f0
--- /dev/null
+++ b/src/assets/images/menu/file.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m19.281 79.582 60.706-23.925s1.098.102 1.596-1.993l5.582-32.994s1.097-4.187-3.19-3.19-60.805 11.962-60.805 11.962-6.197 1.371-5.784 7.475c.307 4.481 2.494 40.87 2.494 40.87s.111.992-.599 1.795z"/><path d="m15.491 74.872-2.689-40.472s0-6.58 6.579-7.876 49.815-9.792 49.815-9.792l-.599-7.402s-.896-3.587-4.934-2.99-37.157 4.934-37.157 4.934-5.68 1.271-7.474-4.561c0 0-1.198-3.288-4.413-2.842-3.214.449-11.063 1.124-11.063 1.124s-4.188.448-3.439 4.26c.746 3.813 11.737 60.856 11.737 60.856s2.192 8.548 3.637 4.761z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/input-active.svg b/src/assets/images/menu/input-active.svg
new file mode 100644
index 000000000..80111e1b9
--- /dev/null
+++ b/src/assets/images/menu/input-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#42b983"><path d="m87.232 57.611h-87.146v-31.811h87.146zm-83.329-3.818h79.512v-24.176h-79.512z"/><path d="m8.212 39.186c1.323-.524 3.092-.787 5.303-.787 1.338 0 2.366.281 3.086.841.721.562 1.081 1.524 1.081 2.89v8.076h-2.422l-.633-1.269c-.06.104-.244.261-.558.47-.312.211-.746.42-1.297.623-.555.203-1.085.307-1.593.307-1.077 0-1.906-.311-2.488-.93-.582-.617-.873-1.334-.873-2.148v-1.09c0-.931.275-1.695.83-2.293.553-.594 1.402-.89 2.553-.883 1.149.008 2.007.012 2.575.012.567 0 .851-.008.851-.021 0-.233 0-.411 0-.534 0-.125 0-.193 0-.207 0-.583-.124-.966-.371-1.146-.248-.183-.741-.272-1.482-.272-.743 0-2.264.08-4.562.239zm2.662 7.635c0 .438.094.725.283.862.189.14.466.206.83.206s.767-.076 1.211-.229c.443-.152.789-.301 1.036-.445l.394-.241v-2.116l-2.814.219c-.626.059-.938.45-.938 1.18z"/><path d="m22.526 33.075v6.132c1.091-.51 2.261-.764 3.512-.764 1.062 0 1.862.254 2.401.764.566.523.938 1.222 1.112 2.094.176.859.263 1.915.263 3.165 0 1.877-.292 3.324-.873 4.343s-1.549 1.526-2.902 1.526c-.624 0-1.258-.131-1.896-.392-.642-.263-1.171-.567-1.595-.919l-.544 1.18h-2.511v-17.129zm2.727 14.642c.51 0 .888-.252 1.136-.754.245-.502.369-1.303.369-2.398 0-1.1-.062-1.91-.186-2.436-.123-.521-.287-.867-.491-1.035-.203-.166-.479-.251-.829-.251-1.062 0-1.963.145-2.707.438v5.739c.745.463 1.646.697 2.708.697z"/><path d="m31.45 44.398c0-1.163.09-2.142.273-2.933.181-.794.45-1.398.807-1.812.356-.415.752-.71 1.189-.885.437-.173.952-.261 1.549-.261 2.138 0 3.913.226 5.322.677v1.898c-1.381-.089-2.483-.132-3.305-.132s-1.316.014-1.484.043c-.167.03-.354.103-.557.218-.203.118-.349.299-.436.548-.204.596-.307 1.443-.307 2.541 0 1.1.068 1.889.207 2.367.14.48.342.797.61.949.27.152.695.229 1.277.229 1.178 0 2.363-.051 3.557-.15l.588-.045v1.922c-.669.348-1.323.553-1.964.609-.946.088-1.766.131-2.465.131h-.13c-.555 0-.859 0-.917 0-1.15 0-2.051-.387-2.707-1.154-.736-.861-1.107-2.445-1.107-4.76z"/><path d="m44.059 33.075h1.907v17.237h-1.907z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/input.svg b/src/assets/images/menu/input.svg
new file mode 100644
index 000000000..4ba5ed32a
--- /dev/null
+++ b/src/assets/images/menu/input.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m87.232 57.611h-87.146v-31.811h87.146zm-83.329-3.818h79.512v-24.176h-79.512z"/><path d="m8.212 39.186c1.323-.524 3.092-.787 5.303-.787 1.338 0 2.366.281 3.086.841.721.562 1.081 1.524 1.081 2.89v8.076h-2.422l-.633-1.269c-.06.104-.244.261-.558.47-.312.211-.746.42-1.297.623-.555.203-1.085.307-1.593.307-1.077 0-1.906-.311-2.488-.93-.582-.617-.873-1.334-.873-2.148v-1.09c0-.931.275-1.695.83-2.293.553-.594 1.402-.89 2.553-.883 1.149.008 2.007.012 2.575.012.567 0 .851-.008.851-.021 0-.233 0-.411 0-.534 0-.125 0-.193 0-.207 0-.583-.124-.966-.371-1.146-.248-.183-.741-.272-1.482-.272-.743 0-2.264.08-4.562.239zm2.662 7.635c0 .438.094.725.283.862.189.14.466.206.83.206s.767-.076 1.211-.229c.443-.152.789-.301 1.036-.445l.394-.241v-2.116l-2.814.219c-.626.059-.938.45-.938 1.18z"/><path d="m22.526 33.075v6.132c1.091-.51 2.261-.764 3.512-.764 1.062 0 1.862.254 2.401.764.566.523.938 1.222 1.112 2.094.176.859.263 1.915.263 3.165 0 1.877-.292 3.324-.873 4.343s-1.549 1.526-2.902 1.526c-.624 0-1.258-.131-1.896-.392-.642-.263-1.171-.567-1.595-.919l-.544 1.18h-2.511v-17.129zm2.727 14.642c.51 0 .888-.252 1.136-.754.245-.502.369-1.303.369-2.398 0-1.1-.062-1.91-.186-2.436-.123-.521-.287-.867-.491-1.035-.203-.166-.479-.251-.829-.251-1.062 0-1.963.145-2.707.438v5.739c.745.463 1.646.697 2.708.697z"/><path d="m31.45 44.398c0-1.163.09-2.142.273-2.933.181-.794.45-1.398.807-1.812.356-.415.752-.71 1.189-.885.437-.173.952-.261 1.549-.261 2.138 0 3.913.226 5.322.677v1.898c-1.381-.089-2.483-.132-3.305-.132s-1.316.014-1.484.043c-.167.03-.354.103-.557.218-.203.118-.349.299-.436.548-.204.596-.307 1.443-.307 2.541 0 1.1.068 1.889.207 2.367.14.48.342.797.61.949.27.152.695.229 1.277.229 1.178 0 2.363-.051 3.557-.15l.588-.045v1.922c-.669.348-1.323.553-1.964.609-.946.088-1.766.131-2.465.131h-.13c-.555 0-.859 0-.917 0-1.15 0-2.051-.387-2.707-1.154-.736-.861-1.107-2.445-1.107-4.76z"/><path d="m44.059 33.075h1.907v17.237h-1.907z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/menu-active.svg b/src/assets/images/menu/menu-active.svg
new file mode 100644
index 000000000..3affb21c0
--- /dev/null
+++ b/src/assets/images/menu/menu-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#03c4e8"><path d="m84.43 30.728h-81.542c-1.584 0-2.867 1.283-2.867 2.868v16.291c0 1.583 1.282 2.868 2.867 2.868h81.542c1.582 0 2.865-1.285 2.865-2.868v-16.291c.001-1.585-1.283-2.868-2.865-2.868z"/><path d="m84.43 57.887c.33 0 .604.27.604.604v16.291c0 .333-.273.604-.604.604h-81.542c-.333 0-.604-.271-.604-.604v-16.29c0-.335.27-.604.604-.604h81.542m0-2.264h-81.542c-1.584 0-2.867 1.283-2.867 2.868v16.291c0 1.583 1.282 2.867 2.867 2.867h81.542c1.582 0 2.865-1.284 2.865-2.867v-16.291c.001-1.585-1.283-2.868-2.865-2.868z"/><path d="m84.43 5.76h-81.542c-1.584 0-2.867 1.283-2.867 2.868v.073 16.218.072c0 1.584 1.282 2.868 2.867 2.868h81.542c1.582 0 2.865-1.284 2.865-2.868v-.072-16.217-.074c.001-1.585-1.283-2.868-2.865-2.868zm-54.394 17.925-.913-9.297-2.243 9.297h-2.966l-2.336-9.297-.818 9.297h-2.624l1.216-13.917h3.706l2.321 9.505 2.301-9.505h3.687l1.293 13.917zm13.269-11.407h-5.495c-.469 0-.76.114-.873.342-.077.178-.115.419-.115.723v2.167l5.627.191v2.204l-5.627.171v2.168c0 .48.133.773.398.874.192.076.451.115.78.115h5.304v2.186c-.634.088-2.199.178-4.697.267l-1.235.056c-.102 0-.219 0-.351 0-.133 0-.308-.008-.522-.027-.216-.019-.475-.086-.78-.201-.305-.112-.57-.267-.798-.455-.506-.455-.763-1.159-.763-2.108v-8.291c0-1.152.345-1.944 1.028-2.375.318-.191.63-.324.941-.399.31-.076.557-.115.741-.115.186 0 1.101.023 2.747.066 1.646.046 2.878.124 3.689.238v2.203zm12.567 11.407h-2.662l-5.533-8.898v8.898h-2.68v-13.917h2.699l5.514 8.991v-8.991h2.662zm12.642-6.084c0 1.989-.291 3.436-.875 4.337-.191.313-.375.571-.559.768-.188.197-.42.368-.707.513-.283.146-.527.255-.73.325-.203.068-.475.123-.818.16-.43.052-.955.075-1.578.075h-.266c-1.52 0-2.533-.158-3.043-.475-.227-.152-.492-.376-.797-.675-.303-.297-.533-.663-.684-1.094-.379-1.064-.572-2.377-.572-3.935v-7.832h2.664v7.833c0 1.217.119 2.111.359 2.679.217.509.641.831 1.275.971.279.052.682.076 1.207.076s.967-.094 1.32-.284c.746-.405 1.123-1.553 1.123-3.441v-7.834h2.68v7.833z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/menu.svg b/src/assets/images/menu/menu.svg
new file mode 100644
index 000000000..3a91429a4
--- /dev/null
+++ b/src/assets/images/menu/menu.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m84.43 30.728h-81.542c-1.584 0-2.867 1.283-2.867 2.868v16.291c0 1.583 1.282 2.868 2.867 2.868h81.542c1.582 0 2.865-1.285 2.865-2.868v-16.291c.001-1.585-1.283-2.868-2.865-2.868z"/><path d="m84.43 57.887c.33 0 .604.27.604.604v16.291c0 .333-.273.604-.604.604h-81.542c-.333 0-.604-.271-.604-.604v-16.29c0-.335.27-.604.604-.604h81.542m0-2.264h-81.542c-1.584 0-2.867 1.283-2.867 2.868v16.291c0 1.583 1.282 2.867 2.867 2.867h81.542c1.582 0 2.865-1.284 2.865-2.867v-16.291c.001-1.585-1.283-2.868-2.865-2.868z"/><path d="m84.43 5.76h-81.542c-1.584 0-2.867 1.283-2.867 2.868v.073 16.218.072c0 1.584 1.282 2.868 2.867 2.868h81.542c1.582 0 2.865-1.284 2.865-2.868v-.072-16.217-.074c.001-1.585-1.283-2.868-2.865-2.868zm-54.394 17.925-.913-9.297-2.243 9.297h-2.966l-2.336-9.297-.818 9.297h-2.624l1.216-13.917h3.706l2.321 9.505 2.301-9.505h3.687l1.293 13.917zm13.269-11.407h-5.495c-.469 0-.76.114-.873.342-.077.178-.115.419-.115.723v2.167l5.627.191v2.204l-5.627.171v2.168c0 .48.133.773.398.874.192.076.451.115.78.115h5.304v2.186c-.634.088-2.199.178-4.697.267l-1.235.056c-.102 0-.219 0-.351 0-.133 0-.308-.008-.522-.027-.216-.019-.475-.086-.78-.201-.305-.112-.57-.267-.798-.455-.506-.455-.763-1.159-.763-2.108v-8.291c0-1.152.345-1.944 1.028-2.375.318-.191.63-.324.941-.399.31-.076.557-.115.741-.115.186 0 1.101.023 2.747.066 1.646.046 2.878.124 3.689.238v2.203zm12.567 11.407h-2.662l-5.533-8.898v8.898h-2.68v-13.917h2.699l5.514 8.991v-8.991h2.662zm12.642-6.084c0 1.989-.291 3.436-.875 4.337-.191.313-.375.571-.559.768-.188.197-.42.368-.707.513-.283.146-.527.255-.73.325-.203.068-.475.123-.818.16-.43.052-.955.075-1.578.075h-.266c-1.52 0-2.533-.158-3.043-.475-.227-.152-.492-.376-.797-.675-.303-.297-.533-.663-.684-1.094-.379-1.064-.572-2.377-.572-3.935v-7.832h2.664v7.833c0 1.217.119 2.111.359 2.679.217.509.641.831 1.275.971.279.052.682.076 1.207.076s.967-.094 1.32-.284c.746-.405 1.123-1.553 1.123-3.441v-7.834h2.68v7.833z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/message-active.svg b/src/assets/images/menu/message-active.svg
new file mode 100644
index 000000000..d084333a3
--- /dev/null
+++ b/src/assets/images/menu/message-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#03c4e8"><path d="m36.506 56.748c0 3.607 2.924 6.533 6.532 6.533h23.764l10.147 12.209 1.025-12.209c3.607 0 6.532-2.926 6.532-6.533l2.799-23.02c0-3.607-2.924-6.532-6.532-6.532h-41.469c-3.607 0-6.532 2.925-6.532 6.532z"/><path d="m33.492 57.013-.66-4.11h-5.011l-10.083 12.131-1.017-12.131h-2.221c-3.327 0-6.037-2.708-6.037-6.037l-3.62-29.915c.071-3.268 2.752-5.902 6.034-5.902h53.648c3.271 0 5.94 2.611 6.034 5.858l-1.179 7.271h4.893l1.088-6.707.03-.387c0-5.991-4.874-10.865-10.866-10.865h-53.647c-5.992 0-10.866 4.874-10.866 10.865l3.625 29.938c.071 5.154 3.751 9.453 8.623 10.478l1.651 19.692 16.176-19.46h3.459c-.023-.238-.049-.477-.054-.719z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/message.svg b/src/assets/images/menu/message.svg
new file mode 100644
index 000000000..6f14bc6bb
--- /dev/null
+++ b/src/assets/images/menu/message.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m36.506 56.748c0 3.607 2.924 6.533 6.532 6.533h23.764l10.147 12.209 1.025-12.209c3.607 0 6.532-2.926 6.532-6.533l2.799-23.02c0-3.607-2.924-6.532-6.532-6.532h-41.469c-3.607 0-6.532 2.925-6.532 6.532z"/><path d="m33.492 57.013-.66-4.11h-5.011l-10.083 12.131-1.017-12.131h-2.221c-3.327 0-6.037-2.708-6.037-6.037l-3.62-29.915c.071-3.268 2.752-5.902 6.034-5.902h53.648c3.271 0 5.94 2.611 6.034 5.858l-1.179 7.271h4.893l1.088-6.707.03-.387c0-5.991-4.874-10.865-10.866-10.865h-53.647c-5.992 0-10.866 4.874-10.866 10.865l3.625 29.938c.071 5.154 3.751 9.453 8.623 10.478l1.651 19.692 16.176-19.46h3.459c-.023-.238-.049-.477-.054-.719z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/misc-active.svg b/src/assets/images/menu/misc-active.svg
new file mode 100644
index 000000000..38759ad80
--- /dev/null
+++ b/src/assets/images/menu/misc-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#03c4e8"><path d="m84.444 69.509-17.642-17.642c3.58-4.729 5.705-10.613 5.705-16.986 0-15.556-12.654-28.211-28.211-28.211-15.556 0-28.209 12.655-28.209 28.211s12.653 28.21 28.209 28.21c6.133 0 11.807-1.974 16.441-5.308l17.715 17.717c.828.827 1.914 1.241 2.996 1.241 1.086 0 2.17-.414 2.998-1.241 1.652-1.654 1.652-4.337-.002-5.991zm-59.884-34.629c0-10.883 8.852-19.737 19.736-19.737 10.883 0 19.736 8.854 19.736 19.737 0 10.884-8.854 19.736-19.736 19.736-10.884.001-19.736-8.852-19.736-19.736z"/><path d="m55.397 43.044c0 1.995-1.617 3.612-3.611 3.612h-16.255c-1.996 0-3.613-1.617-3.613-3.612v-16.256c0-1.994 1.617-3.611 3.613-3.611h16.255c1.994 0 3.611 1.617 3.611 3.611z"/><path d="m76.137 34.88c0 2.746-.416 5.394-1.15 7.904h9.83c1.336 0 2.422-1.084 2.422-2.421v-10.895c0-1.337-1.086-2.421-2.422-2.421h-9.793c.719 2.489 1.113 5.116 1.113 7.833z"/><path d="m12.454 34.88c0-2.712.393-5.331 1.109-7.816-.057-.004-.111-.017-.168-.017h-10.895c-1.338 0-2.421 1.084-2.421 2.421v10.896c0 1.337 1.083 2.421 2.421 2.421h10.895c.064 0 .125-.014.189-.019-.73-2.504-1.13-5.148-1.13-7.886z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/misc.svg b/src/assets/images/menu/misc.svg
new file mode 100644
index 000000000..8c31fe09e
--- /dev/null
+++ b/src/assets/images/menu/misc.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m84.444 69.509-17.642-17.642c3.58-4.729 5.705-10.613 5.705-16.986 0-15.556-12.654-28.211-28.211-28.211-15.556 0-28.209 12.655-28.209 28.211s12.653 28.21 28.209 28.21c6.133 0 11.807-1.974 16.441-5.308l17.715 17.717c.828.827 1.914 1.241 2.996 1.241 1.086 0 2.17-.414 2.998-1.241 1.652-1.654 1.652-4.337-.002-5.991zm-59.884-34.629c0-10.883 8.852-19.737 19.736-19.737 10.883 0 19.736 8.854 19.736 19.737 0 10.884-8.854 19.736-19.736 19.736-10.884.001-19.736-8.852-19.736-19.736z"/><path d="m55.397 43.044c0 1.995-1.617 3.612-3.611 3.612h-16.255c-1.996 0-3.613-1.617-3.613-3.612v-16.256c0-1.994 1.617-3.611 3.613-3.611h16.255c1.994 0 3.611 1.617 3.611 3.611z"/><path d="m76.137 34.88c0 2.746-.416 5.394-1.15 7.904h9.83c1.336 0 2.422-1.084 2.422-2.421v-10.895c0-1.337-1.086-2.421-2.422-2.421h-9.793c.719 2.489 1.113 5.116 1.113 7.833z"/><path d="m12.454 34.88c0-2.712.393-5.331 1.109-7.816-.057-.004-.111-.017-.168-.017h-10.895c-1.338 0-2.421 1.084-2.421 2.421v10.896c0 1.337 1.083 2.421 2.421 2.421h10.895c.064 0 .125-.014.189-.019-.73-2.504-1.13-5.148-1.13-7.886z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/multimedia-active.svg b/src/assets/images/menu/multimedia-active.svg
new file mode 100644
index 000000000..0b0cb8ff7
--- /dev/null
+++ b/src/assets/images/menu/multimedia-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#03c4e8"><path d="m60.707 28.371c12.215 0 22.152 9.938 22.152 22.153s-9.938 22.151-22.152 22.151c-12.213 0-22.15-9.937-22.15-22.151-.001-12.216 9.937-22.153 22.15-22.153m0-4.43c-14.68 0-26.581 11.9-26.581 26.583 0 14.681 11.901 26.582 26.581 26.582 14.682 0 26.583-11.901 26.583-26.582 0-14.683-11.902-26.583-26.583-26.583z"/><path d="m32.536 63.923h-24.754c-1.834 0-3.324-1.491-3.324-3.323v-46.542c0-1.833 1.49-3.322 3.324-3.322h65.682c1.832 0 3.321 1.489 3.321 3.322v9.9c1.578.989 3.063 2.109 4.431 3.354v-13.254c0-4.282-3.47-7.753-7.752-7.753h-65.682c-4.283 0-7.754 3.471-7.754 7.753v46.542c0 4.282 3.472 7.753 7.754 7.753h27.424c-1.007-1.395-1.903-2.874-2.67-4.43z"/><path d="m55.576 63.988c-.94.618-2.298.013-2.298-.769v-25.22c0-.78 1.171-1.674 2.222-.889l18.757 12.201c.688.52.702 1.685.025 2.127"/><path d="m28.281 18.476c-2.846 0-4.431-1.261-4.431-1.261l.827 27.296c-2.091-.625-4.807-.346-7.38.96-4.285 2.173-6.535 6.347-5.027 9.325 1.509 2.975 6.207 3.627 10.492 1.453 3.178-1.612 5.234-4.326 5.468-6.837h.028v-27.398s1.06.02 2.483-1.344c1.661-1.59 2.562-4.592 2.562-4.592s-2.541 2.398-5.022 2.398z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/multimedia.svg b/src/assets/images/menu/multimedia.svg
new file mode 100644
index 000000000..cf034dc32
--- /dev/null
+++ b/src/assets/images/menu/multimedia.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m60.707 28.371c12.215 0 22.152 9.938 22.152 22.153s-9.938 22.151-22.152 22.151c-12.213 0-22.15-9.937-22.15-22.151-.001-12.216 9.937-22.153 22.15-22.153m0-4.43c-14.68 0-26.581 11.9-26.581 26.583 0 14.681 11.901 26.582 26.581 26.582 14.682 0 26.583-11.901 26.583-26.582 0-14.683-11.902-26.583-26.583-26.583z"/><path d="m32.536 63.923h-24.754c-1.834 0-3.324-1.491-3.324-3.323v-46.542c0-1.833 1.49-3.322 3.324-3.322h65.682c1.832 0 3.321 1.489 3.321 3.322v9.9c1.578.989 3.063 2.109 4.431 3.354v-13.254c0-4.282-3.47-7.753-7.752-7.753h-65.682c-4.283 0-7.754 3.471-7.754 7.753v46.542c0 4.282 3.472 7.753 7.754 7.753h27.424c-1.007-1.395-1.903-2.874-2.67-4.43z"/><path d="m55.576 63.988c-.94.618-2.298.013-2.298-.769v-25.22c0-.78 1.171-1.674 2.222-.889l18.757 12.201c.688.52.702 1.685.025 2.127"/><path d="m28.281 18.476c-2.846 0-4.431-1.261-4.431-1.261l.827 27.296c-2.091-.625-4.807-.346-7.38.96-4.285 2.173-6.535 6.347-5.027 9.325 1.509 2.975 6.207 3.627 10.492 1.453 3.178-1.612 5.234-4.326 5.468-6.837h.028v-27.398s1.06.02 2.483-1.344c1.661-1.59 2.562-4.592 2.562-4.592s-2.541 2.398-5.022 2.398z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/overlay-active.svg b/src/assets/images/menu/overlay-active.svg
new file mode 100644
index 000000000..8bb12a359
--- /dev/null
+++ b/src/assets/images/menu/overlay-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#03c4e8"><path d="m82.989 10.083h-78.661c-2.338 0-4.235 1.897-4.235 4.235v12.248h87.132v-12.247c0-2.338-1.896-4.236-4.236-4.236zm-1.301 11.012c.516.516.516 1.349 0 1.862-.512.515-1.348.516-1.861 0l-2.77-2.769-2.77 2.769c-.516.516-1.35.515-1.863 0-.514-.514-.514-1.347 0-1.862l2.77-2.769-2.771-2.771c-.512-.516-.512-1.349 0-1.862.516-.515 1.35-.516 1.863 0l2.771 2.771 2.77-2.771c.514-.516 1.35-.515 1.861 0 .516.514.516 1.347 0 1.862l-2.77 2.771z"/><path d="m.093 30.052v39.04c0 2.338 1.897 4.235 4.235 4.235h78.661c2.34 0 4.236-1.897 4.236-4.235v-39.04zm80.197 35.705h-73.26v-28.137h73.26z"/><path d="m11.052 41.882h65.652v5.395h-65.652z"/><path d="m11.052 50.898h46.211v5.396h-46.211z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/overlay.svg b/src/assets/images/menu/overlay.svg
new file mode 100644
index 000000000..836b57b73
--- /dev/null
+++ b/src/assets/images/menu/overlay.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m82.989 10.083h-78.661c-2.338 0-4.235 1.897-4.235 4.235v12.248h87.132v-12.247c0-2.338-1.896-4.236-4.236-4.236zm-1.301 11.012c.516.516.516 1.349 0 1.862-.512.515-1.348.516-1.861 0l-2.77-2.769-2.77 2.769c-.516.516-1.35.515-1.863 0-.514-.514-.514-1.347 0-1.862l2.77-2.769-2.771-2.771c-.512-.516-.512-1.349 0-1.862.516-.515 1.35-.516 1.863 0l2.771 2.771 2.77-2.771c.514-.516 1.35-.515 1.861 0 .516.514.516 1.347 0 1.862l-2.77 2.771z"/><path d="m.093 30.052v39.04c0 2.338 1.897 4.235 4.235 4.235h78.661c2.34 0 4.236-1.897 4.236-4.235v-39.04zm80.197 35.705h-73.26v-28.137h73.26z"/><path d="m11.052 41.882h65.652v5.395h-65.652z"/><path d="m11.052 50.898h46.211v5.396h-46.211z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/panel-active.svg b/src/assets/images/menu/panel-active.svg
new file mode 100644
index 000000000..61f26d5ff
--- /dev/null
+++ b/src/assets/images/menu/panel-active.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#03c4e8"><path d="m77.591 70.883c0 2.082-1.688 3.771-3.77 3.771h-70.019c-2.083 0-3.77-1.689-3.77-3.771v-48.662c0-2.081 1.687-3.77 3.77-3.77h70.021c2.082 0 3.77 1.689 3.77 3.77z"/><path d="m83.517 8.756h-70.02c-2.083 0-3.771 1.688-3.771 3.77v1.616h68.404c2.082 0 3.771 1.689 3.771 3.77v47.047h1.617c2.08 0 3.77-1.688 3.77-3.77v-48.663c-.002-2.082-1.691-3.77-3.771-3.77z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/panel.svg b/src/assets/images/menu/panel.svg
new file mode 100644
index 000000000..780daa1c8
--- /dev/null
+++ b/src/assets/images/menu/panel.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m77.591 70.883c0 2.082-1.688 3.771-3.77 3.771h-70.019c-2.083 0-3.77-1.689-3.77-3.771v-48.662c0-2.081 1.687-3.77 3.77-3.77h70.021c2.082 0 3.77 1.689 3.77 3.77z"/><path d="m83.517 8.756h-70.02c-2.083 0-3.771 1.688-3.771 3.77v1.616h68.404c2.082 0 3.771 1.689 3.771 3.77v47.047h1.617c2.08 0 3.77-1.688 3.77-3.77v-48.663c-.002-2.082-1.691-3.77-3.771-3.77z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index 5f1d5275f..5131f0c61 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -267,7 +267,7 @@ body {
             
             &.active-menuitem {
                 background-color: #ffffff;
-                color: #03c4e8;
+                color: #42b983;
                 
                 img{
                     &.layout-menu-icon-active {