Adding public pages

web/src/components/layout/DefaultAppBar.vue

@@ -1,32 +1,66 @@
 <template>
-  <v-app-bar
-    id="top"
-    elevation="6"
-    height="60"
-    class="main-head pl-2"
-  >
-    <div class="mr-3">
-      <AppLogo />
-    </div>
-
-    <v-tabs
-      class="ml-2"
-      color="primary"
+  <div v-if="mobile">
+    <v-app-bar
+      id="top"
+      elevation="6"
+      height="60"
+      extension-height="48"
+      class="main-head pl-2"
     >
-      <v-tab
-        :to="{ name: 'DashboardPage' }"
-        text="Dashboard"
-      />
-      <v-tab
-        :to="{ name: 'FlashcardsPage' }"
-        text="Flashcards"
-      />
-    </v-tabs>
+      <div class="mr-3">
+        <AppLogo />
+      </div>
 
-    <v-spacer />
+      <v-spacer />
 
-    <!-- TODO Add notifications -->
-    <!-- <v-btn
+      <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>
+    <v-app-bar
+      id="top"
+      elevation="6"
+      height="60"
+      class="main-head pl-2"
+    >
+      <div class="mr-3">
+        <AppLogo />
+      </div>
+
+      <v-tabs
+        class="ml-2"
+        color="primary"
+      >
+        <v-tab
+          :to="{ name: 'DashboardPage' }"
+          text="Dashboard"
+        />
+        <v-tab
+          :to="{ name: 'FlashcardsPage' }"
+          text="Flashcards"
+        />
+      </v-tabs>
+
+      <v-spacer />
+
+      <!-- TODO Add notifications -->
+      <!-- <v-btn
       icon
       class="mr-1"
     >
@@ -42,11 +76,16 @@
       </v-badge>
     </v-btn> -->
 
-    <ProfileMenu />
-  </v-app-bar>
+      <ProfileMenu />
+    </v-app-bar>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { useDisplay } from "vuetify"
+
 import AppLogo from "@/components/common/AppLogo.vue"
 import ProfileMenu from "@/components/layout/ProfileMenu.vue"
+
+const { mobile } = useDisplay()
 </script>

web/src/components/layout/PublicAppBar.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-app-bar
+    id="top"
+    elevation="6"
+    height="60"
+    class="main-head pl-2"
+  >
+    <div class="mr-3">
+      <PublicAppLogo
+        to="/"
+        :animated="isHomePage"
+      />
+    </div>
+
+    <v-spacer />
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { useRoute } from "vue-router"
+
+import PublicAppLogo from "@/components/common/PublicAppLogo.vue"
+
+const route = useRoute()
+const isHomePage = computed(() => route.name === "HomePage")
+</script>