minie4
1ed9af766d
- Implement new main settings menu - Implement "filtering" page - Implement "appearance" page - Implement "about" page - Make the Git hash a link to the Git repo
73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
<script setup>
|
|
import ScrollableContainer from "@/components/scrollable-container.vue";
|
|
import PageCard from "@/components/settings/page-card.vue";
|
|
import {
|
|
FilterIcon,
|
|
PaletteIcon,
|
|
InfoIcon,
|
|
ChevronLeft,
|
|
} from "lucide-vue-next";
|
|
</script>
|
|
|
|
<template>
|
|
<ScrollableContainer class="settings">
|
|
<div class="wrapper" v-if="$route.name == 'title.settings.main'">
|
|
<div class="cards">
|
|
<PageCard
|
|
:name="$t('title.settings.filtering')"
|
|
:icon="FilterIcon"
|
|
route="settings/filtering"
|
|
/>
|
|
<PageCard
|
|
:name="$t('title.settings.appearance')"
|
|
:icon="PaletteIcon"
|
|
route="settings/appearance"
|
|
/>
|
|
<PageCard
|
|
:name="$t('title.settings.about')"
|
|
:icon="InfoIcon"
|
|
route="settings/about"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="subroute" v-else>
|
|
<RouterLink to="/settings" class="back">
|
|
<ChevronLeft />
|
|
<span>{{ $t("settings.back") }}</span>
|
|
</RouterLink>
|
|
<RouterView />
|
|
</div>
|
|
</ScrollableContainer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.settings {
|
|
padding: 20px 10px 0px 10px;
|
|
}
|
|
|
|
.wrapper {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.back {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
width: max-content;
|
|
text-decoration: unset;
|
|
color: unset;
|
|
margin-bottom: 8px;
|
|
}
|
|
</style>
|