Locked menu on first open

src/renderer/src/components/Menu.vue

@@ -1,7 +1,11 @@
 <template>
     <transition name="menu">
-        <div v-if="menuOpen" class="menu" ref="container">
+        <div
-            <Nav />
+            v-if="menuOpen || lockOpen"
+            :class="['menu', { locked: lockOpen }]"
+            ref="container"
+        >
+            <Nav v-if="!lockOpen" />
 
             <div class="menu-wrap layout-block">
                 <new-note class="menu-item" @noteOpened="closeMenu" />
@@ -32,6 +36,10 @@ import useMenu from '@/composables/useMenu'
 import { useRoute } from 'vue-router'
 import useExport from '@/composables/useExport'
 
+const props = defineProps({
+    lockOpen: { type: Boolean, default: () => false },
+})
+
 const container = ref()
 
 const { menuOpen, closeMenu } = useMenu()
@@ -85,6 +93,10 @@ const handleExport = async () => {
         }
     }
 
+    &.locked .menu-wrap {
+        padding-top: 0;
+    }
+
     &.menu-enter-active,
     &.menu-leave-active {
         transition: transform 300ms var(--ease-out-expo);

src/renderer/src/views/Directory.vue

@@ -1,5 +1,8 @@
 <template>
-    <main v-if="loaded" class="directory layout-block">
+    <main
+        v-if="loaded && (categories?.length || notes?.length)"
+        class="directory layout-block"
+    >
         <category-row
             v-for="(category, i) in categories"
             :index="i"
@@ -18,6 +21,10 @@
         <decryption-warning :failedIds="decryptionFailures" />
     </main>
 
+    <main v-else-if="loaded">
+        <Menu lockOpen />
+    </main>
+
     <page-loading v-else />
 </template>
 
@@ -30,6 +37,7 @@ import NoteRow from '@/components/NoteRow.vue'
 import useNotes from '@/composables/useNotes'
 import NewNote from '@/components/NewNote.vue'
 import { useMagicKeys } from '@vueuse/core'
+import Menu from '@/components/Menu.vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()