From 58d6f9a28c13a060fcad19385abe2712825cea2e Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Thu, 29 Dec 2022 21:18:49 -0800
Subject: [PATCH] Fix/mobile-layouts (#192)

* partial fix for location card spacing

* update header on mobile
---
 frontend/components/Location/Card.vue |  9 ++++++++-
 frontend/layouts/default.vue          | 23 ++++++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/components/Location/Card.vue b/frontend/components/Location/Card.vue
index 335a0f9..d0b6543 100644
--- a/frontend/components/Location/Card.vue
+++ b/frontend/components/Location/Card.vue
@@ -19,7 +19,14 @@
         <span class="mx-auto">
           {{ location.name }}
         </span>
-        <span v-if="hasCount" class="badge badge-primary h-6 badge-lg"> {{ count }}</span>
+        <span
+          class="badge badge-primary h-6 badge-lg"
+          :class="{
+            'opacity-0': !hasCount,
+          }"
+        >
+          {{ count }}
+        </span>
       </h2>
     </div>
   </NuxtLink>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 8dff148..ef1a8ca 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -13,14 +13,23 @@
     <AppToast />
     <div class="drawer drawer-mobile">
       <input id="my-drawer-2" v-model="drawerToggle" type="checkbox" class="drawer-toggle" />
-      <div class="drawer-content justify-center bg-base-300">
-        <AppHeaderDecor class="-mt-10" />
-        <slot></slot>
-
+      <div class="drawer-content justify-center bg-base-300 pt-20 lg:pt-0">
+        <AppHeaderDecor class="-mt-10 hidden lg:block" />
         <!-- Button -->
-        <label for="my-drawer-2" class="btn btn-primary drawer-button lg:hidden fixed bottom-2 right-2">
-          <Icon name="mdi-menu" class="h-6 w-6" />
-        </label>
+        <div class="navbar z-[99] lg:hidden top-0 fixed bg-primary shadow-md drawer-button">
+          <NuxtLink to="/home">
+            <h2 class="mt-1 ml-1 text-3xl font-bold tracking-tight text-base-100 flex">
+              HomeB
+              <AppLogo class="w-8 -mb-3" />
+              x
+            </h2>
+          </NuxtLink>
+          <label for="my-drawer-2" class="btn btn-square btn-ghost ml-auto text-base-100 drawer-button lg:hidden">
+            <Icon name="mdi-menu" class="h-6 w-6" />
+          </label>
+        </div>
+
+        <slot></slot>
       </div>
 
       <!-- Sidebar -->