Improve side bar width animation

src/renderer/components/side-nav/side-nav.css

@@ -2,19 +2,30 @@
   display: block;
   height: calc(100vh - 60px);
   width: 200px;
-  overflow-y: auto;
+  overflow-x: hidden;
   position: fixed;
   left: 0px;
   top: 0px;
   z-index: 1;
   margin-top: 60px;
-  -webkit-box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
+  box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
   background-color: var(--side-nav-color);
   transition-property: width;
   transition-duration: 150ms;
   transition-timing-function: ease-in-out;
 }
 
+.inner {
+  height: 100%;
+  width: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.closed .inner {
+  width: 80px;
+}
+
 .topNavOption {
   margin-top: 10px;
 }

src/renderer/components/side-nav/side-nav.vue

@@ -4,6 +4,7 @@
     class="sideNav"
     :class="{closed: !isOpen}"
   >
+    <div class="inner">
       <div
         class="navOption topNavOption mobileShow"
         @click="navigate('subscriptions')"
@@ -97,6 +98,7 @@
         </p>
       </div>
       <hr>
+    </div>
   </ft-flex-box>
 </template>