Adding a ton of stuff

web/src/components/layout/DefaultAppBar.vue

@@ -18,22 +18,6 @@
       <v-spacer />
 
       <ProfileMenu />
-
-      <template #extension>
-        <v-tabs
-          class="ml-2"
-          color="primary"
-        >
-          <v-tab
-            :to="{ name: 'DashboardPage' }"
-            text="Dashboard"
-          />
-          <v-tab
-            :to="{ name: 'FlashcardsPage' }"
-            text="Flashcards"
-          />
-        </v-tabs>
-      </template>
     </v-app-bar>
   </div>
   <div v-else>
@@ -51,19 +35,14 @@
         />
       </div>
 
-      <v-tabs
-        class="ml-2"
-        color="primary"
-      >
-        <v-tab
-          :to="{ name: 'DashboardPage' }"
-          text="Dashboard"
+      <div class="d-flex align-center">
+        <v-divider vertical />
+        <ExactingBreadcrumbs
+          class="appbar-title"
+          density="compact"
+          :items="breadcrumbs"
         />
-        <v-tab
-          :to="{ name: 'FlashcardsPage' }"
-          text="Flashcards"
-        />
-      </v-tabs>
+      </div>
 
       <v-spacer />
 
@@ -92,8 +71,30 @@
 <script setup lang="ts">
 import { useDisplay } from "vuetify"
 
+import useBreadcrumbs from "@/use/use-breadcrumbs"
+
 import PublicAppLogo from "@/components/common/PublicAppLogo.vue"
 import ProfileMenu from "@/components/layout/ProfileMenu.vue"
+import ExactingBreadcrumbs from "@/components/layout/ExactingBreadcrumbs.vue"
 
 const { mobile } = useDisplay()
+const { breadcrumbs } = useBreadcrumbs(undefined, undefined, {
+  baseCrumb: {
+    title: "Dashboard",
+    to: {
+      name: "DashboardPage",
+    },
+  },
+})
 </script>
+
+<style scoped>
+.appbar-title {
+  margin-left: 12px;
+  padding: 0 0 0 12px;
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+</style>

web/src/components/layout/PublicAppBar.vue

@@ -30,10 +30,7 @@
       class="main-head pl-2"
     >
       <div class="mr-3">
-        <PublicAppLogo
-          to="/"
-          :animated="isHomePage"
-        />
+        <PublicAppLogo to="/" />
       </div>
 
       <v-spacer />
@@ -51,17 +48,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue"
-import { useRoute } from "vue-router"
 import { useDisplay } from "vuetify"
 import { useAuth0 } from "@auth0/auth0-vue"
 
 import ProfileMenu from "@/components/layout/ProfileMenu.vue"
 import PublicAppLogo from "@/components/common/PublicAppLogo.vue"
 
-const route = useRoute()
-const isHomePage = computed(() => route.name === "HomePage")
-
 const { mobile } = useDisplay()
 const { isAuthenticated } = useAuth0()
 </script>