further smoothen sidebar toggling

src/App.vue

@@ -1,13 +1,16 @@
 <template>
-  <div class="l-container">
+  <div class="l-container" :class="{ collapsed: collapsed }">
     <div class="l-sidebar">
       <div id="logo-container">
-        <router-link :to="{ name: 'Home' }"><div id="logo"></div></router-link>
+        <div id="toggle" @click="toggleNav"></div>
+        <router-link :to="{ name: 'FolderView' }" v-if="!collapsed"
+          ><div ref="logo" class="logo"></div
+        ></router-link>
       </div>
       <hr class="seperator" />
-      <Navigation />
+      <Navigation :collapsed="collapsed" />
       <hr class="seperator" />
-      <PinnedStuff />
+      <PinnedStuff :collapsed="collapsed" />
       <div id="settings-button">
         <div class="nav-icon" id="settings-icon"></div>
         <span id="text">Settings</span>
@@ -24,6 +27,7 @@
 </template>
 
 <script>
+import { ref } from "@vue/reactivity";
 import Navigation from "./components/LeftSidebar/Navigation.vue";
 import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
 
@@ -33,25 +37,37 @@ export default {
     PinnedStuff,
   },
   setup() {
-    let quick_access = null;
+    const collapsed = ref(false);
 
-    return { quick_access };
+    const logo = ref(null);
+
+    function toggleNav() {
+      collapsed.value = !collapsed.value;
+    }
+    return { logo, toggleNav, collapsed };
   },
 };
 </script>
 
 <style>
-#logo {
-  height: 60px;
-  width: 200px;
+.logo {
+  height: 30px;
+  width: 150px;
+  margin-left: 35px;
   background: url(./assets/logo.svg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
+  animation: fadeIn;
+  animation-duration: 2s;
+  animation-iteration-count: 1;
 }
 
 #logo-container {
-  padding-left: 15px;
+  height: 60px;
+  margin-left: 20px;
+  display: flex;
+  align-items: center;
 }
 
 .l-sidebar {
@@ -62,6 +78,19 @@ export default {
   margin-left: -2em;
 }
 
+.l-container #toggle {
+  position: fixed;
+  top: 7px;
+  width: 30px;
+  height: 60px;
+  background: url(./assets/icons/menu.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  margin-right: 5px;
+}
+
 .l-container #settings-button {
   position: absolute;
   bottom: 0;
@@ -89,26 +118,17 @@ export default {
   background-position: center;
 }
 
-@media (max-width: 1000px) {
-  #logo {
-    height: 40px;
-    width: 40px;
-    background: url(./assets/icons/logo-small.svg);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-  .l-container #settings-button {
-    flex-direction: column;
-    justify-content: center;
-  }
+.collapsed #settings-button {
+  flex-direction: column;
+  justify-content: center;
+}
 
-  .l-container #settings-button #settings-icon {
-    margin-left: 0;
-    margin-right: 0;
-  }
-  .l-container #settings-button #text {
-    display: none;
-  }
+.collapsed #settings-button #settings-icon {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.collapsed #settings-button #text {
+  display: none;
 }
 </style>