From 6fb6959d4595e8392ecb6fbd3ded0178351efb67 Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Thu, 6 Jul 2023 20:28:45 -0400
Subject: [PATCH] fix: dynamic hide home button when on mobile

---
 packages/client/src/components/global/MkPageHeader.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 34d682673c..4a889c9802 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -101,7 +101,7 @@
 			</nav>
 		</template>
 		<div class="buttons right">
-			<MkButton v-if="!$i && displayHomeButton" :to="'/'" link rounded>
+			<MkButton v-if="!$i && displayHomeButton && isDesktop" :to="'/'" link rounded>
 				<i class="ph-house ph-bold ph-lg"></i>
 				{{ i18n.ts.home }}
 			</MkButton>
@@ -162,6 +162,10 @@ type Tab = {
 	onClick?: (ev: MouseEvent) => void;
 };
 
+let isDesktop = $ref(window.innerWidth >= 1100);
+matchMedia(`(min-width: ${1100 - 1}px)`).onchange = (mql) => {
+	isDesktop = mql.matches;
+};
 const props = withDefaults(
 	defineProps<{
 		tabs?: Tab[];
@@ -179,7 +183,7 @@ const props = withDefaults(
 		to?: string;
 	}>(),
 	{
-		displayHomeButton: !$i && window.innerWidth >= 1100,
+		displayHomeButton: !$i,
 	}
 );