91 lines
2.9 KiB
Vue
91 lines
2.9 KiB
Vue
<script lang="ts" setup>
|
|
definePageMeta({
|
|
wideLayout: true,
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
|
|
useHydratedHead({
|
|
title: () => t('nav.settings'),
|
|
})
|
|
|
|
const route = useRoute()
|
|
|
|
const isRootPath = computedEager(() => route.name === 'settings')
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div min-h-screen flex>
|
|
<div border="e base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
|
|
<MainContent>
|
|
<template #title>
|
|
<div timeline-title-style flex items-center gap-2 @click="$scrollToTop">
|
|
<div i-ri:settings-3-line />
|
|
<span>{{ isHydrated ? $t('nav.settings') : '' }}</span>
|
|
</div>
|
|
</template>
|
|
<div xl:w-97 lg:w-78 w-full>
|
|
<SettingsItem
|
|
v-if="isHydrated && currentUser"
|
|
command
|
|
icon="i-ri:user-line"
|
|
:text="$t('settings.profile.label')"
|
|
to="/settings/profile"
|
|
:match="$route.path.startsWith('/settings/profile/')"
|
|
/>
|
|
<SettingsItem
|
|
command
|
|
icon="i-ri-compasses-2-line"
|
|
:text="isHydrated ? $t('settings.interface.label') : ''"
|
|
to="/settings/interface"
|
|
:match="$route.path.startsWith('/settings/interface/')"
|
|
/>
|
|
<SettingsItem
|
|
v-if="isHydrated && currentUser"
|
|
command
|
|
icon="i-ri:notification-badge-line"
|
|
:text="$t('settings.notifications_settings')"
|
|
to="/settings/notifications"
|
|
:match="$route.path.startsWith('/settings/notifications/')"
|
|
/>
|
|
<SettingsItem
|
|
command
|
|
icon="i-ri-globe-line"
|
|
:text="isHydrated ? $t('settings.language.label') : ''"
|
|
to="/settings/language"
|
|
:match="$route.path.startsWith('/settings/language/')"
|
|
/>
|
|
<SettingsItem
|
|
command
|
|
icon="i-ri-equalizer-line"
|
|
:text="isHydrated ? $t('settings.preferences.label') : ''"
|
|
to="/settings/preferences"
|
|
:match="$route.path.startsWith('/settings/preferences/')"
|
|
/>
|
|
<SettingsItem
|
|
command
|
|
icon="i-ri-group-line"
|
|
:text="isHydrated ? $t('settings.users.label') : ''"
|
|
to="/settings/users"
|
|
:match="$route.path.startsWith('/settings/users/')"
|
|
/>
|
|
<SettingsItem
|
|
command
|
|
icon="i-ri:information-line"
|
|
:text="isHydrated ? $t('settings.about.label') : ''"
|
|
to="/settings/about"
|
|
:match="$route.path.startsWith('/settings/about/')"
|
|
/>
|
|
</div>
|
|
</MainContent>
|
|
</div>
|
|
<div flex-1 :class="isRootPath ? 'hidden lg:block' : 'block'">
|
|
<ClientOnly>
|
|
<NuxtPage />
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|