fix: Improve navigation on mobile displays

gabe565 · Dec 23, 2024 · 5efec79 · 5efec79
1 parent db6f777
commit 5efec79
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 57 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -4,9 +4,9 @@
       Skip to main content
     </v-btn>
 
-    <v-navigation-drawer color="primary" width="220" mobile-breakpoint="md">
+    <v-navigation-drawer v-model="drawer" color="primary" width="220" mobile-breakpoint="md">
       <template #prepend>
-        <v-list v-if="!isMobile">
+        <v-list>
           <v-list-item to="/" title="Mnemonic Ninja" :prepend-icon="LogoIcon" :active="false" />
         </v-list>
         <v-divider />
@@ -27,30 +27,58 @@
       </v-list>
 
       <template #append>
-        <div class="d-flex overflow-hidden">
-          <github-button />
-        </div>
+        <v-divider />
+        <v-list nav density="compact">
+          <v-list-item
+            href="https://gabecook.com"
+            target="_blank"
+            rel="noopener"
+            title="Built by Gabe Cook"
+            link
+            :prepend-icon="PersonIcon"
+          />
+          <v-list-item
+            href="https://github.com/gabe565/mnemonic-ninja"
+            target="_blank"
+            rel="noopener"
+            title="Source on GitHub"
+            :prepend-icon="GitHubIcon"
+            link
+          />
+        </v-list>
       </template>
     </v-navigation-drawer>
 
     <v-bottom-navigation v-if="isMobile" position="fixed" bg-color="primary" theme="dark" grow>
       <template v-for="(group, title) in routes" :key="title">
-        <v-divider v-if="title !== routeKeys[0]" vertical inset />
-        <v-btn
-          v-for="route in group"
-          :key="route.path"
-          :active="route.path === currentRoute.path"
-          :to="route.path"
-          :prepend-icon="route.meta.icon"
-        >
-          <span>{{ route.meta?.short || route.name }}</span>
-        </v-btn>
+        <template v-if="title === 'Converters'">
+          <v-divider v-if="title !== routeKeys[0]" vertical inset />
+          <v-btn
+            v-for="route in group"
+            :key="route.path"
+            :active="route.path === currentRoute.path"
+            :to="route.path"
+            :prepend-icon="route.meta.icon"
+          >
+            <span>{{ route.meta?.short || route.name }}</span>
+          </v-btn>
+        </template>
       </template>
     </v-bottom-navigation>
 
     <update-snackbar />
 
     <v-main>
+      <v-app-bar color="primary" flat>
+        <template #title>
+          <template v-if="isMobile && $route.name === 'Home'"> Mnemonic Ninja</template>
+          <template v-else>{{ $route.name }}</template>
+        </template>
+        <template #prepend>
+          <v-btn v-if="isMobile" :icon="MenuIcon" @click.stop="drawer = !drawer" />
+        </template>
+      </v-app-bar>
+
       <span id="content" class="anchor" />
       <router-view v-slot="{ Component }">
         <keep-alive>
@@ -62,15 +90,19 @@
 </template>
 
 <script setup>
-import { computed, onBeforeMount } from "vue";
+import { computed, onBeforeMount, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
-import GithubButton from "./components/NavButtons/GithubButton.vue";
 import UpdateSnackbar from "./components/UpdateSnackbar.vue";
+import MenuIcon from "~icons/material-symbols/menu-rounded";
+import PersonIcon from "~icons/material-symbols/person-rounded";
 import LogoIcon from "~icons/mnemonic-ninja/logo";
+import GitHubIcon from "~icons/simple-icons/github";
 
 const { smAndDown: isMobile } = useDisplay();
 
+const drawer = ref(!isMobile.value);
+
 const currentRoute = useRoute();
 
 const routes = computed(() => {

diff --git a/src/components/NavButtons/GithubButton.vue b/src/components/NavButtons/GithubButton.vue
diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
@@ -1,15 +1,4 @@
 <template>
-  <v-app-bar color="primary" flat :title="$route.name">
-    <template #prepend>
-      <v-btn v-if="isMobile" to="/" icon size="small" :active="false">
-        <v-icon :icon="AppIcon" size="28" style="opacity: 0.7" aria-label="Mnemonic Ninja" />
-      </v-btn>
-    </template>
-    <template #append>
-      <github-button v-if="isMobile" />
-    </template>
-  </v-app-bar>
-
   <div class="d-flex align-center" style="min-height: 100%">
     <v-container class="pt-6 pt-lg-12">
       <v-row v-if="$slots.description" tag="section">
@@ -23,11 +12,3 @@
     </v-container>
   </div>
 </template>
-
-<script setup>
-import { useDisplay } from "vuetify";
-import GithubButton from "../components/NavButtons/GithubButton.vue";
-import AppIcon from "~icons/mnemonic-ninja/logo";
-
-const { smAndDown: isMobile } = useDisplay();
-</script>