Prepping public app bar for mobile view

web/src/components/layout/PublicAppBar.vue

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