From 5c826e6b93be88518b0e1b4e71c3e2db8c876c04 Mon Sep 17 00:00:00 2001
From: nicwands <wands.nic@gmail.com>
Date: Tue, 17 Mar 2026 13:11:13 -0400
Subject: [PATCH] Update nav + back buttons

---
 src/renderer/src/App.vue                  | 12 +++++----
 src/renderer/src/components/Menu.vue      |  2 +-
 src/renderer/src/components/Nav.vue       | 31 ++++++++++++++++++++---
 src/renderer/src/views/Category.vue       |  9 +------
 src/renderer/src/views/CreateCategory.vue |  2 +-
 src/renderer/src/views/Directory.vue      |  2 +-
 src/renderer/src/views/Instructions.vue   | 11 +-------
 src/renderer/src/views/Note.vue           |  2 +-
 src/renderer/src/views/Preferences.vue    | 11 +-------
 src/renderer/src/views/Search.vue         |  9 +------
 10 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index 67e210c..8c0cc99 100644
--- a/src/renderer/src/App.vue
+++ b/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>
 
diff --git a/src/renderer/src/components/Menu.vue b/src/renderer/src/components/Menu.vue
index c5f260b..1f2c745 100644
--- a/src/renderer/src/components/Menu.vue
+++ b/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 {
diff --git a/src/renderer/src/components/Nav.vue b/src/renderer/src/components/Nav.vue
index 673f275..374a507 100644
--- a/src/renderer/src/components/Nav.vue
+++ b/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;
-    gap: 10px;
+    justify-content: space-between;
     padding-top: 9px;
+    padding-bottom: 9px;
     color: var(--grey-100);
+
+    .left,
+    .right {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
 }
 </style>
diff --git a/src/renderer/src/views/Category.vue b/src/renderer/src/views/Category.vue
index 32acf3b..6ed3655 100644
--- a/src/renderer/src/views/Category.vue
+++ b/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;
     }
diff --git a/src/renderer/src/views/CreateCategory.vue b/src/renderer/src/views/CreateCategory.vue
index 7559243..320a573 100644
--- a/src/renderer/src/views/CreateCategory.vue
+++ b/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>
diff --git a/src/renderer/src/views/Directory.vue b/src/renderer/src/views/Directory.vue
index 071b1c5..ce62ea7 100644
--- a/src/renderer/src/views/Directory.vue
+++ b/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 {
diff --git a/src/renderer/src/views/Instructions.vue b/src/renderer/src/views/Instructions.vue
index cae4454..c9d1566 100644
--- a/src/renderer/src/views/Instructions.vue
+++ b/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;
-
-    .back-link {
-        opacity: 0.25;
-        display: block;
-        margin-top: 9px;
-        margin-bottom: 14px;
-    }
+    padding-top: var(--nav-height);
 
     .content {
         display: flex;
diff --git a/src/renderer/src/views/Note.vue b/src/renderer/src/views/Note.vue
index af8263d..2119be7 100644
--- a/src/renderer/src/views/Note.vue
+++ b/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>
diff --git a/src/renderer/src/views/Preferences.vue b/src/renderer/src/views/Preferences.vue
index 475a485..762822f 100644
--- a/src/renderer/src/views/Preferences.vue
+++ b/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;
     }
diff --git a/src/renderer/src/views/Search.vue b/src/renderer/src/views/Search.vue
index b9d294f..134a803 100644
--- a/src/renderer/src/views/Search.vue
+++ b/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;