clean up nav/logo

theseus_gui/src/App.vue

@@ -11,6 +11,7 @@ import {
   Notifications,
   XIcon,
   Card,
+  TextLogo,
 } from 'omorphia'
 import { useLoading, useTheming } from '@/store/state'
 import AccountsCard from './components/ui/AccountsCard.vue'
@@ -343,7 +344,7 @@ command_listener(async (e) => {
         <!-- Top Bar -->
         <div data-tauri-drag-region class="appbar">
           <section class="navigation-controls">
-            Logo
+            <TextLogo class="logo" :animate="false" />
             <Breadcrumbs data-tauri-drag-region />
           </section>
           <section class="mod-stats">
@@ -398,9 +399,19 @@ command_listener(async (e) => {
   transition: all ease-in-out 0.1s;
 }
 
+.logo {
+  height: calc(var(--appbar-height) - 3rem);
+  width: auto;
+  min-height: 100%;
+  margin-right: var(--gap-md);
+  color: var(--color-contrast);
+}
+
 .navigation-controls {
   display: flex;
   flex-direction: row;
+
+  align-items: center;
 }
 
 .appbar-row {
@@ -442,7 +453,7 @@ command_listener(async (e) => {
 }
 
 .container {
-  --appbar-height: 3.5rem;
+  --appbar-height: 4.5rem;
   --sidebar-width: 4.5rem;
 
   height: 100vh;
@@ -463,7 +474,7 @@ command_listener(async (e) => {
       background: var(--color-raised-bg);
       text-align: center;
       padding: var(--gap-md);
-      height: 3.25rem;
+      height: var(--appbar-height);
       gap: var(--gap-sm);
       //no select
       user-select: none;
@@ -491,7 +502,7 @@ command_listener(async (e) => {
   .appbar-failure {
     display: flex; /* Change to flex to align items horizontally */
     justify-content: flex-end; /* Align items to the right */
-    height: 3.25rem;
+    height: var(--appbar-height);
     //no select
     user-select: none;
     -webkit-user-select: none;

theseus_gui/src/components/ui/Breadcrumbs.vue

@@ -1,12 +1,5 @@
 <template>
   <div class="breadcrumbs">
-    <Button class="breadcrumbs__back transparent" icon-only @click="$router.back()">
-      <ChevronLeftIcon />
-    </Button>
-    <Button class="breadcrumbs__forward transparent" icon-only @click="$router.forward()">
-      <ChevronRightIcon />
-    </Button>
-    {{ breadcrumbData.resetToNames(breadcrumbs) }}
     <div v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name" class="breadcrumbs__item">
       <router-link
         v-if="breadcrumb.link"
@@ -14,24 +7,19 @@
           path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
           query: breadcrumb.query,
         }"
-        >{{
-          breadcrumb.name.charAt(0) === '?'
-            ? breadcrumbData.getName(breadcrumb.name.slice(1))
-            : breadcrumb.name
-        }}
+      >
+        {{ breadcrumbName(breadcrumb.name) }}
       </router-link>
-      <span v-else class="selected">{{
-        breadcrumb.name.charAt(0) === '?'
-          ? breadcrumbData.getName(breadcrumb.name.slice(1))
-          : breadcrumb.name
-      }}</span>
+      <span v-else class="selected">
+        {{ breadcrumbName(breadcrumb.name) }}
+      </span>
       <ChevronRightIcon v-if="breadcrumb.link" class="chevron" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ChevronRightIcon, Button, ChevronLeftIcon } from 'omorphia'
+import { ChevronRightIcon } from 'omorphia'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
@@ -39,6 +27,11 @@ import { computed } from 'vue'
 const route = useRoute()
 
 const breadcrumbData = useBreadcrumbs()
+
+breadcrumbData.$subscribe(() => {
+  breadcrumbData?.resetToNames(breadcrumbs.value)
+})
+
 const breadcrumbs = computed(() => {
   const additionalContext =
     route.meta.useContext === true
@@ -48,6 +41,13 @@ const breadcrumbs = computed(() => {
       : null
   return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
 })
+
+const breadcrumbName = (bcn) => {
+  if (bcn.charAt(0) === '?') {
+    return breadcrumbData.getName(bcn.slice(1))
+  }
+  return bcn
+}
 </script>
 
 <style scoped lang="scss">
@@ -63,7 +63,7 @@ const breadcrumbs = computed(() => {
 
     .chevron,
     a {
-      margin: auto 0;
+      margin: auto 0.25rem;
     }
   }