From 5c67cd7271df44950b4ed469c87fdc7538c5045f Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 02:20:40 +1200
Subject: [PATCH] Improve side bar width animation

---
 src/renderer/components/side-nav/side-nav.css |  15 +-
 src/renderer/components/side-nav/side-nav.vue | 184 +++++++++---------
 2 files changed, 106 insertions(+), 93 deletions(-)

diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 0be50dbd..bcd129f2 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/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;
 }
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index 30435826..b4d3e362 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -4,99 +4,101 @@
     class="sideNav"
     :class="{closed: !isOpen}"
   >
-    <div
-      class="navOption topNavOption mobileShow"
-      @click="navigate('subscriptions')"
-    >
-      <font-awesome-icon
-        icon="rss"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        Subscriptions
-      </p>
-      <font-awesome-icon
-        class="refreshIcon"
-        icon="sync"
+    <div class="inner">
+      <div
+        class="navOption topNavOption mobileShow"
+        @click="navigate('subscriptions')"
+      >
+        <font-awesome-icon
+          icon="rss"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Subscriptions
+        </p>
+        <font-awesome-icon
+          class="refreshIcon"
+          icon="sync"
+        />
+      </div>
+      <div
+        class="navOption mobileHidden"
+        @click="navigate('trending')"
+      >
+        <font-awesome-icon
+          icon="fire"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Trending
+        </p>
+      </div>
+      <div
+        class="navOption mobileHidden"
+        @click="navigate('popular')"
+      >
+        <font-awesome-icon
+          icon="users"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Most Popular
+        </p>
+      </div>
+      <div
+        class="navOption mobileShow"
+        @click="navigate('userplaylists')"
+      >
+        <font-awesome-icon
+          icon="bookmark"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Playlists
+        </p>
+      </div>
+      <side-nav-more-options
+        @navigate="navigate"
       />
+      <div
+        class="navOption mobileShow"
+        @click="navigate('history')"
+      >
+        <font-awesome-icon
+          icon="history"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          History
+        </p>
+      </div>
+      <hr>
+      <div
+        class="navOption mobileShow"
+        @click="navigate('settings')"
+      >
+        <font-awesome-icon
+          icon="sliders-h"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Settings
+        </p>
+      </div>
+      <div
+        class="navOption mobileHidden"
+        @click="navigate('about')"
+      >
+        <font-awesome-icon
+          icon="info-circle"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          About
+        </p>
+      </div>
+      <hr>
     </div>
-    <div
-      class="navOption mobileHidden"
-      @click="navigate('trending')"
-    >
-      <font-awesome-icon
-        icon="fire"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        Trending
-      </p>
-    </div>
-    <div
-      class="navOption mobileHidden"
-      @click="navigate('popular')"
-    >
-      <font-awesome-icon
-        icon="users"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        Most Popular
-      </p>
-    </div>
-    <div
-      class="navOption mobileShow"
-      @click="navigate('userplaylists')"
-    >
-      <font-awesome-icon
-        icon="bookmark"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        Playlists
-      </p>
-    </div>
-    <side-nav-more-options
-      @navigate="navigate"
-    />
-    <div
-      class="navOption mobileShow"
-      @click="navigate('history')"
-    >
-      <font-awesome-icon
-        icon="history"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        History
-      </p>
-    </div>
-    <hr>
-    <div
-      class="navOption mobileShow"
-      @click="navigate('settings')"
-    >
-      <font-awesome-icon
-        icon="sliders-h"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        Settings
-      </p>
-    </div>
-    <div
-      class="navOption mobileHidden"
-      @click="navigate('about')"
-    >
-      <font-awesome-icon
-        icon="info-circle"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        About
-      </p>
-    </div>
-    <hr>
   </ft-flex-box>
 </template>