menu WIP

src/renderer/src/App.vue

@@ -1,7 +1,11 @@
 <template>
     <lenis root :options="{ duration: 1 }">
         <div :class="classes" :style="styles">
+            <Nav />
+
             <router-view :key="$route.fullPath" />
+
+            <Menu />
         </div>
     </lenis>
 </template>
@@ -11,6 +15,8 @@ import Lenis from './components/Lenis.vue'
 import { ref, computed, onMounted } from 'vue'
 import loadFonts from '@fuzzco/font-loader'
 import { useWindowSize } from '@vueuse/core'
+import Menu from '@/components/menu/Index.vue'
+import Nav from '@/components/Nav.vue'
 
 const { height } = useWindowSize()
 

src/renderer/src/components/Nav.vue

@@ -0,0 +1,29 @@
+<template>
+    <nav class="nav layout-block-inner">
+        <button @click="toggleMenu">Menu</button>
+    </nav>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+const toggleMenu = () => {
+    const state = route.query.menuOpen
+
+    if (state === 'true') {
+        router.push({ query: { menuOpen: false } })
+    } else {
+        router.push({ query: { menuOpen: true } })
+    }
+}
+</script>
+
+<style lang="scss">
+.nav {
+    margin-top: size-vw(9px);
+    color: var(--grey-100);
+}
+</style>

src/renderer/src/components/NewNote.vue

@@ -0,0 +1,24 @@
+<template>
+    <button class="new-note" @click="onClick">+ New Nota</button>
+</template>
+
+<script setup>
+import useOpenNote from '@/composables/useOpenNote'
+import useNotes from '@/composables/useNotes'
+
+const emit = defineEmits(['noteOpened'])
+
+const { createNote } = useNotes()
+const { openNote } = useOpenNote()
+
+const onClick = async () => {
+    const note = await createNote({}, '')
+    openNote(note.id)
+    emit('noteOpened')
+}
+</script>
+
+<style lang="scss">
+.new-note {
+}
+</style>

src/renderer/src/components/menu/Index.vue

@@ -0,0 +1,81 @@
+<template>
+    <transition name="menu">
+        <div v-if="open" class="menu" ref="container">
+            <Nav />
+
+            <div class="menu-wrap layout-block-inner">
+                <new-note @noteOpened="closeMenu" />
+                <button>+ New Capitulum</button>
+                <button>Change Theme</button>
+                <button>Instructio</button>
+                <button>Import</button>
+                <button>Export</button>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script setup>
+import NewNote from '@/components/NewNote.vue'
+import { onClickOutside } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import Nav from '../Nav.vue'
+
+const container = ref()
+
+const route = useRoute()
+const router = useRouter()
+
+const closeMenu = () => {
+    router.push({
+        query: {
+            menuOpen: false,
+        },
+    })
+}
+
+onClickOutside(container, () => {
+    if (!open.value) return
+
+    closeMenu()
+})
+
+const open = computed(() => route.query.menuOpen === 'true')
+</script>
+
+<style lang="scss">
+.menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: var(--theme-bg);
+    border-bottom: 1px solid var(--grey-100);
+
+    .menu-wrap {
+        display: flex;
+        flex-direction: column;
+        padding-top: size-vw(3px);
+        padding-bottom: size-vw(10px);
+
+        button {
+            padding: size-vw(16px) 0;
+            text-align: center;
+
+            &:not(:last-child) {
+                border-bottom: 1px dashed currentColor;
+            }
+        }
+    }
+
+    &.menu-enter-active,
+    &.menu-leave-active {
+        transition: transform 300ms var(--ease-out-expo);
+    }
+    &.menu-enter-from,
+    &.menu-leave-to {
+        transform: translateY(-100%);
+    }
+}
+</style>

src/renderer/src/styles/_layers.scss

@@ -1,7 +1,4 @@
 // z-index
-.lily-cursor {
+.menu {
-    z-index: 20;
-}
-.site-header {
     z-index: 10;
 }