feat: move homebar to app.vue outside <NuxtPage /> to avoid it being rerendered on route change
This commit is contained in:
parent
8932070fcc
commit
f7e171d6a2
2 changed files with 25 additions and 25 deletions
24
app.vue
24
app.vue
|
@ -1,6 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Banner v-if="banner" />
|
<Banner v-if="banner" />
|
||||||
|
<div id="homebar">
|
||||||
|
<div class="homebar-item">
|
||||||
|
<marquee>
|
||||||
|
gorb!!!!!
|
||||||
|
</marquee>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<NuxtPage :keepalive="true" />
|
<NuxtPage :keepalive="true" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -71,4 +78,21 @@ a {
|
||||||
visibility: hidden;
|
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>
|
</style>
|
||||||
|
|
|
@ -1,13 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<Loading v-show="loading" />
|
<Loading v-show="loading" />
|
||||||
<div :class="{ hidden: loading, visible: !loading }" id="client-root">
|
<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">
|
<div id="left-column">
|
||||||
<NuxtLink id="home-button" href="/">
|
<NuxtLink id="home-button" href="/">
|
||||||
<img class="sidebar-icon" src="/public/icon.svg"/>
|
<img class="sidebar-icon" src="/public/icon.svg"/>
|
||||||
|
@ -40,7 +33,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
|
||||||
height: 100dvh;
|
height: 100dvh;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 4fr 18fr 4fr;
|
grid-template-columns: 1fr 4fr 18fr 4fr;
|
||||||
grid-template-rows: 4dvh auto;
|
grid-template-rows: auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -53,23 +46,6 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
|
||||||
transition-duration: 500ms;
|
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) {
|
#client-root>div:nth-child(-n+4) {
|
||||||
border-bottom: 1px solid var(--padding-color);
|
border-bottom: 1px solid var(--padding-color);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue