From f7e171d6a2059e7e81972658cc9c3f9aab3eb989 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 10 Jul 2025 11:37:27 +0200
Subject: [PATCH] feat: move homebar to app.vue outside <NuxtPage /> to avoid
 it being rerendered on route change

---
 app.vue            | 24 ++++++++++++++++++++++++
 layouts/client.vue | 26 +-------------------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/app.vue b/app.vue
index 7af306b..1efe050 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
     <Banner v-if="banner" />
+    <div id="homebar">
+			<div class="homebar-item">
+				<marquee>
+					gorb!!!!!
+				</marquee>
+			</div>
+		</div>
     <NuxtPage :keepalive="true" />
   </div>
 </template>
@@ -71,4 +78,21 @@ a {
 	visibility: hidden;
 }
 
+#homebar {
+	grid-row: 1;
+	grid-column: 1 / -1;
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+	background: var(--optional-topbar-background);
+	background-color: var(--topbar-background-color);
+	padding-left: 5dvw;
+	padding-right: 5dvw;
+
+}
+
+.homebar-item {
+	width: 100dvw;
+}
+
 </style>
diff --git a/layouts/client.vue b/layouts/client.vue
index 9ce451e..2687f1e 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -1,13 +1,6 @@
 <template>
 	<Loading v-show="loading" />
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
-		<div id="homebar">
-			<div class="homebar-item">
-				<marquee>
-					gorb!!!!!
-				</marquee>
-			</div>
-		</div>
 		<div id="left-column">
 			<NuxtLink id="home-button" href="/">
 				<img class="sidebar-icon" src="/public/icon.svg"/>
@@ -40,7 +33,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	height: 100dvh;
 	display: grid;
 	grid-template-columns: 1fr 4fr 18fr 4fr;
-	grid-template-rows: 4dvh auto;
+	grid-template-rows: auto;
 	text-align: center;
 }
 
@@ -53,23 +46,6 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	transition-duration: 500ms;
 }
 
-#homebar {
-	grid-row: 1;
-	grid-column: 1 / -1;
-	display: flex;
-	justify-content: space-evenly;
-	align-items: center;
-	background: var(--optional-topbar-background);
-	background-color: var(--topbar-background-color);
-	padding-left: 5dvw;
-	padding-right: 5dvw;
-
-}
-
-.homebar-item {
-	width: 100dvw;
-}
-
 #client-root>div:nth-child(-n+4) {
 	border-bottom: 1px solid var(--padding-color);
 }