Update nav + back buttons

src/renderer/src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="classes" :style="styles">
-        <Nav />
+        <Nav ref="nav" />
 
         <Suspense>
             <div class="layout-container">
@@ -17,18 +17,19 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import loadFonts from '@fuzzco/font-loader'
-import { useWindowSize } from '@vueuse/core'
+import { useWindowSize, useElementBounding } from '@vueuse/core'
 import Menu from '@/components/Menu.vue'
 import Nav from '@/components/Nav.vue'
 import MoveMenu from '@/components/MoveMenu.vue'
 import ScrollBar from '@/components/ScrollBar.vue'
 import useConfig from '@/composables/useConfig'
 
-const { height } = useWindowSize()
+const nav = ref()
 
-// Theme state
+const { height } = useWindowSize()
+const { height: navHeight } = useElementBounding(nav)
 const { config } = useConfig()
 
 const classes = computed(() => [
@@ -60,6 +61,7 @@ onMounted(async () => {
 
 const styles = computed(() => ({
     '--vh': height.value ? height.value / 100 + 'px' : '100vh',
+    '--nav-height': navHeight.value + 'px',
 }))
 </script>
 

src/renderer/src/components/Menu.vue

@@ -64,7 +64,7 @@ const openNewCategory = () => {}
     .menu-wrap {
         display: flex;
         flex-direction: column;
-        padding-top: 1.2em;
+        padding-top: var(--nav-height);
         padding-bottom: 10px;
 
         .menu-item {

src/renderer/src/components/Nav.vue

@@ -1,14 +1,30 @@
 <template>
     <nav class="nav layout-block">
-        <button @click="toggleMenu">Menu</button>
+        <div class="left">
+            <router-link v-if="HAS_BACK_BUTTON.includes($route.name)" to="/"
+                ><- Back</router-link
+            >
+        </div>
 
-        <router-link to="/search">Search</router-link>
+        <div class="right">
+            <button @click="toggleMenu">Menu</button>
+
+            <router-link to="/search">Search</router-link>
+        </div>
     </nav>
 </template>
 
 <script setup>
 import useMenu from '@/composables/useMenu'
 
+const HAS_BACK_BUTTON = [
+    'category',
+    'create-category',
+    'instructions',
+    'search',
+    'preferences',
+]
+
 const { menuOpen, closeMenu, openMenu } = useMenu()
 
 const toggleMenu = () => {
@@ -24,9 +40,16 @@ const toggleMenu = () => {
 .nav {
     position: absolute;
     display: flex;
-    align-items: center;
+    justify-content: space-between;
-    gap: 10px;
     padding-top: 9px;
+    padding-bottom: 9px;
     color: var(--grey-100);
+
+    .left,
+    .right {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
 }
 </style>

src/renderer/src/views/Category.vue

@@ -1,7 +1,5 @@
 <template>
     <main class="category layout-block">
-        <router-link class="back" to="/"><- Go Back</router-link>
-
         <category-row
             :index="categoryIndex"
             :category="id"
@@ -61,13 +59,8 @@ const categoryIndex = computed(() => {
 
 <style lang="scss">
 main.category {
-    padding-top: 1.24em;
+    padding-top: var(--nav-height);
 
-    .back {
-        display: block;
-        opacity: 0.25;
-        margin-top: 9px;
-    }
     .category-row {
         margin-top: 4px;
     }

src/renderer/src/views/CreateCategory.vue

@@ -17,6 +17,6 @@ const onCategoryEdited = (name) => {
 
 <style lang="scss">
 .create-category {
-    padding-top: 1.2em;
+    padding-top: var(--nav-height);
 }
 </style>

src/renderer/src/views/Directory.vue

@@ -52,7 +52,7 @@ watch(notesChangeCount, async () => {
 
 <style lang="scss">
 main.directory {
-    padding-top: 26px;
+    padding-top: var(--nav-height);
     padding-bottom: 30px;
 
     .label {

src/renderer/src/views/Instructions.vue

@@ -1,7 +1,5 @@
 <template>
     <main class="instructions layout-block">
-        <router-link class="back-link" to="/"><- Go Back</router-link>
-
         <div class="content" v-html="renderedContent" />
     </main>
 </template>
@@ -16,14 +14,7 @@ const renderedContent = md.render(content)
 
 <style lang="scss">
 main.instructions {
-    padding-top: 1.2em;
+    padding-top: var(--nav-height);
-
-    .back-link {
-        opacity: 0.25;
-        display: block;
-        margin-top: 9px;
-        margin-bottom: 14px;
-    }
 
     .content {
         display: flex;

src/renderer/src/views/Note.vue

@@ -23,7 +23,7 @@ watchEffect(() => {
 
 <style lang="scss">
 main.note {
-    padding-top: 2.2em;
+    padding-top: var(--nav-height);
     padding-bottom: 20px;
 }
 </style>

src/renderer/src/views/Preferences.vue

@@ -1,7 +1,5 @@
 <template>
     <main class="preferences layout-block">
-        <router-link to="/" class="back"><- Back</router-link>
-
         <h1 class="mono">Storage Plugin</h1>
 
         <div v-for="plugin in plugins" class="plugin" :key="plugin.id">
@@ -112,16 +110,9 @@ const save = async () => {
 
 <style lang="scss">
 .preferences {
-    padding-top: 1.2em;
+    padding-top: var(--nav-height);
     padding-bottom: 60px;
 
-    .back {
-        opacity: 0.25;
-        display: block;
-        margin-top: 9px;
-        margin-bottom: 14px;
-    }
-
     h1 {
         margin-bottom: 20px;
     }

src/renderer/src/views/Search.vue

@@ -1,7 +1,5 @@
 <template>
     <main class="search layout-block">
-        <router-link class="back" to="/"><- Back</router-link>
-
         <form @submit.prevent="onSearch">
             <div class="input-wrap">
                 <input
@@ -54,13 +52,8 @@ const onInput = _debounce(async () => {
 
 <style lang="scss">
 main.search {
-    padding-top: 1.2em;
+    padding-top: var(--nav-height);
 
-    .back {
-        display: block;
-        opacity: 0.25;
-        margin-top: 9px;
-    }
     .input-wrap {
         margin-top: 19px;
         position: relative;