Adjusted sidebar menuitem and added hover animation

src/renderer/App.vue

@@ -31,6 +31,7 @@ $lato-font-path: '/node_modules/lato-font/fonts'
   display: flex
   @include lato-font('normal')
   max-height: 100vh
+  user-select: none
 
 .page-wrapper
   flex-direction: column

src/renderer/components/MenuItem.vue

@@ -3,9 +3,9 @@
         <span>
             <slot name="icon"></slot>
         </span>
-        <a>
+        <span>
             <slot>Nothing to show</slot>
-        </a>
+        </span>
     </router-link>
 </template>
 
@@ -20,7 +20,13 @@ export default {
 li.menu-item
     display: flex
     align-items: center
-    margin: 1rem 0
+    padding: 0.5rem
+    border-radius: 100px
+    cursor: pointer
+    transition: background-color 300ms
+
+    &:hover
+        background-color: rgba(0,0,0,0.05)
     &.fade
         a  
             outline: unset

src/renderer/layouts/DockableSidebar.vue

@@ -100,7 +100,7 @@ section
     width: 100%
     max-width: 250px
     min-height: 100vh
-    padding: 2rem 3rem
+    padding: 2rem 2rem
     box-sizing: border-box
     background-color: #fcfcfc
     display: flex