better animated sidebar

src/App.vue

@@ -53,18 +53,26 @@ provide('loading', loading)
     @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
   />
   <div class="mx-auto flex w-full max-w-app flex-grow">
-    <SideBar
-      :view-modes="viewModes"
-      :active-view-mode="activeViewMode"
-      @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
-      @collapse="(collapse) => (sideBarCollapsed = collapse)"
-      class="mt-[50px] px-3 py-6"
-      :class="sideBarCollapsed && 'max-sm:hidden'"
-    />
+    <Transition name="sidebar">
+      <SideBar
+        :view-modes="viewModes"
+        :active-view-mode="activeViewMode"
+        @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
+        @collapse="(collapse) => (sideBarCollapsed = collapse)"
+        class="mt-[50px] bg-gray-100 px-3 py-6 transition-[width] delay-200 duration-0 max-sm:z-50 max-sm:border-x-[1px] max-sm:py-3 max-sm:transition-transform max-sm:delay-0 max-sm:duration-200"
+        v-if="!sideBarCollapsed"
+      />
+    </Transition>
     <main
-      class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out max-sm:px-4 max-sm:py-2"
-      :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar max-sm:hidden'"
+      class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out max-sm:px-4 max-sm:py-3"
+      :class="sideBarCollapsed ? 'ml-0' : 'sm:ml-sidebar'"
     >
+      <Transition name="overlay">
+        <div
+          class="absolute bottom-0 left-0 right-0 top-0 bg-neutral-800 bg-opacity-60 transition-opacity duration-200 sm:hidden"
+          v-if="!sideBarCollapsed"
+        />
+      </Transition>
       <template v-if="!loading">
         <Note
           v-if="activeViewMode.name === 'Note' && activeNote"
@@ -91,3 +99,13 @@ provide('loading', loading)
     </template>
   </Modal>
 </template>
+<style scoped>
+.sidebar-enter-from,
+.sidebar-leave-to {
+  @apply max-sm:-translate-x-full;
+}
+.overlay-enter-from,
+.overlay-leave-to {
+  @apply opacity-0;
+}
+</style>