fix issue with scrollbar

css/sideMenu.css

@@ -7,7 +7,6 @@
     top: 0;
     left: 0;
     height: 100vh;
-    overflow: hidden;
     width: 100%;
     max-width: 250px;
     background: #333;
@@ -31,7 +30,13 @@
 }
 
 .side-menu-apps-list {
-    padding: 30px 0;
+    height: calc(100vh - 150px);
+    z-index: 2200;
+    position: fixed;
+    top: 150px;
+    width: 100%;
+    max-width: 250px;
+    overflow: auto;
 }
 
 .side-menu-app-icon {
@@ -44,7 +49,10 @@
     line-height: 30px;
     color: #fff;
     display: block;
-    padding: 7px 15px;
+    padding: 7px 0 7px 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .side-menu-app a:hover {
@@ -58,3 +66,12 @@
 .side-menu-logo img {
     width: 60%;
 }
+
+.side-menu-header {
+    height: 150px;
+    z-index: 2300;
+    max-width: 250px;
+    background: #333;
+    position: fixed;
+    top: 0;
+}

src/SideMenu.vue

@@ -1,9 +1,11 @@
 <template>
 	<div id="side-menu">
-		<button class="side-menu-opener"></button>
+		<div class="side-menu-header">
+			<button class="side-menu-opener"></button>
 
-		<div v-if="logo" class="side-menu-logo">
-			<img v-bind:src="logo">
+			<div v-if="logo" class="side-menu-logo">
+				<img v-bind:src="logo">
+			</div>
 		</div>
 
 		<ul class="side-menu-apps-list">