From f2decf0aec5d40b18714ee7ed0563ce47df92cb6 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Sat, 20 Jul 2019 21:28:47 +0430
Subject: [PATCH] Adjusted sidebar menuitem and added hover animation

---
 src/renderer/App.vue                     |  1 +
 src/renderer/components/MenuItem.vue     | 12 +++++++++---
 src/renderer/layouts/DockableSidebar.vue |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 3af44ab..42b68fb 100644
--- a/src/renderer/App.vue
+++ b/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
diff --git a/src/renderer/components/MenuItem.vue b/src/renderer/components/MenuItem.vue
index 4d605d2..b1a85c8 100644
--- a/src/renderer/components/MenuItem.vue
+++ b/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
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index 00cbd93..4b5a681 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/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