Prepping public app bar for mobile view

web/src/components/layout/PublicAppBar.vue

@@ -1,4 +1,5 @@
 <template>
+  <div v-if="mobile">
     <v-app-bar
       id="top"
       elevation="6"
@@ -14,14 +15,35 @@
 
       <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>