better animated sidebar

components.d.ts

@@ -23,7 +23,6 @@ declare module '@vue/runtime-core' {
     SearchBar: typeof import('./src/components/Search/SearchBar.vue')['default']
     SearchResult: typeof import('./src/components/Search/SearchResult.vue')['default']
     SideBar: typeof import('./src/components/SideBar.vue')['default']
-    SideBar2: typeof import('./src/components/SideBar2.vue')['default']
     SideBarMenu: typeof import('./src/components/SideBar/SideBarMenu.vue')['default']
     SideBarMenuItem: typeof import('./src/components/SideBar/SideBarMenuItem.vue')['default']
     SkeletonNote: typeof import('./src/components/Skeleton/SkeletonNote.vue')['default']

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
+    <Transition name="sidebar">
-      :view-modes="viewModes"
+      <SideBar
-      :active-view-mode="activeViewMode"
+        :view-modes="viewModes"
-      @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
+        :active-view-mode="activeViewMode"
-      @collapse="(collapse) => (sideBarCollapsed = collapse)"
+        @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
-      class="mt-[50px] px-3 py-6"
+        @collapse="(collapse) => (sideBarCollapsed = collapse)"
-      :class="sideBarCollapsed && 'max-sm:hidden'"
+        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="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' : 'ml-sidebar max-sm:hidden'"
+      :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>

src/components/SideBar.vue

@@ -28,7 +28,7 @@ const setViewMode = (viewMode: ViewMode) => {
 <template>
   <div
     id="sidebar"
-    class="fixed top-0 flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:w-full max-sm:text-[120%]"
+    class="fixed bottom-0 top-0 flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:text-[120%]"
   >
     <SideBarMenu>
       <template #header>Root note</template>

src/components/ViewModes/Note.vue

@@ -49,7 +49,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
           v-if="props.note.isRoot"
         ></i>
-        <input type="text" class="bg-transparent py-1 outline-none w-full" v-model="noteTitle" />
+        <input type="text" class="bg-transparent pb-1 outline-none w-full" v-model="noteTitle" />
       </template>
     </NoteToolbar>
     <NoteEditor