teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: prevent hydration mismatch after refreshing settings (#663)

Browse source
This commit is contained in:
Ayaka Rizumu 2022-12-30 23:29:34 +08:00 committed by GitHub
parent 1bb8963d98
commit ca37b65962
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
pages/settings.vue
View file

@ -9,58 +9,60 @@ const isRootPath = computedEager(() => route.name === 'settings')
</script> </script>
<template> <template>
<div min-h-screen flex> <div>
<div border="r base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'"> <div min-h-screen flex>
<MainContent> <div border="r base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
<template #title> <MainContent>
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop"> <template #title>
<div i-ri:settings-4-line /> <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<span>{{ $t('nav.settings') }}</span> <div i-ri:settings-4-line />
<span>{{ $t('nav.settings') }}</span>
</div>
</template>
<div xl:w-97 lg:w-78 w-full>
<SettingsNavItem
v-show="currentUser"
:command="!!currentUser"
icon="i-ri:user-line"
:text="$t('settings.profile.label')"
to="/settings/profile"
/>
<SettingsNavItem
command
icon="i-ri-compasses-2-line"
:text="$t('settings.interface.label')"
to="/settings/interface"
/>
<SettingsNavItem
command
icon="i-ri-globe-line"
:text="$t('settings.language.label')"
to="/settings/language"
/>
<SettingsNavItem
command
icon="i-ri:settings-2-line"
:text="$t('settings.preferences.label')"
to="/settings/preferences"
/>
<SettingsNavItem
command
icon="i-ri-group-line"
:text="$t('settings.users.label')"
to="/settings/users"
/>
<SettingsNavItem
command
icon="i-ri:information-line"
:text="$t('settings.about.label')"
to="/settings/about"
/>
</div> </div>
</template> </MainContent>
<div xl:w-97 lg:w-78 w-full> </div>
<SettingsNavItem <div flex-1 :class="isRootPath ? 'hidden lg:block' : 'block'">
v-show="currentUser" <NuxtPage />
:command="!!currentUser" </div>
icon="i-ri:user-line"
:text="$t('settings.profile.label')"
to="/settings/profile"
/>
<SettingsNavItem
command
icon="i-ri-compasses-2-line"
:text="$t('settings.interface.label')"
to="/settings/interface"
/>
<SettingsNavItem
command
icon="i-ri-globe-line"
:text="$t('settings.language.label')"
to="/settings/language"
/>
<SettingsNavItem
command
icon="i-ri:settings-2-line"
:text="$t('settings.preferences.label')"
to="/settings/preferences"
/>
<SettingsNavItem
command
icon="i-ri-group-line"
:text="$t('settings.users.label')"
to="/settings/users"
/>
<SettingsNavItem
command
icon="i-ri:information-line"
:text="$t('settings.about.label')"
to="/settings/about"
/>
</div>
</MainContent>
</div>
<div flex-1 :class="isRootPath ? 'hidden lg:block' : 'block'">
<NuxtPage />
</div> </div>
</div> </div>
</template> </template>