ayanova/src/App.vue

@@ -137,16 +137,19 @@
         </div>
       </template>
     </v-navigation-drawer>
-    <!-- :color="appBar.isMain ? 'primary' : 'secondary'" -->
+    <!-- :color="appBar.isMain ? 'primary' : 'secondary'" style="width: 300px" -->
     <v-app-bar v-if="isAuthenticated" :color="appBar.color" dark fixed app>
       <v-app-bar-nav-icon
         @click.stop="drawer = !drawer"
         data-cy="navicon"
       ></v-app-bar-nav-icon>
-      <v-toolbar-title style="width: 300px" class="ml-0 pl-4">
-        <v-icon>{{ appBar.icon }}</v-icon
-        >&nbsp;
-        <span v-if="appBar.title">{{ $ay.t(appBar.title) }}</span>
+      <v-toolbar-title class="ml-n5 ml-sm-0 pl-sm-4">
+        <v-icon>{{ appBar.icon }}</v-icon>
+        <span
+          v-if="appBar.title"
+          class="text-subtitle-2 ml-2 text-sm-h6 ml-sm-4"
+          >{{ appBar.title }}</span
+        >
       </v-toolbar-title>
       <v-spacer></v-spacer>
       <v-btn text icon to="/home-notifications" data-cy="notification">
@@ -383,6 +386,22 @@ export default {
     source: { type: String, default: null }
   },
   methods: {
+    titleDisplay() {
+      //Allow for extra info in title
+      if (this.appBar.title == null) {
+        return null;
+      }
+
+      if (this.appBar.title.includes(":")) {
+        const t = this.appBar.title.split(":");
+        // if (this.$vuetify.breakpoint.smAndUp) {
+        //   return this.$ay.t(t[0]) + " " + t[1];
+        // } else {
+        return t[1] + " " + this.$ay.t(t[0]);
+        //}
+      }
+      return this.$ay.t(this.appBar.title);
+    },
     afterLeave() {
       this.$root.$emit("triggerScroll");
     },