Jonas
35eee78efc
Added new event images and introduced HomeEntrieWithImagePreset component for consistent image-text layouts. Updated Home.vue to include new sections for club values and events (Nikolausturnier, Wettkämpfe, Kinoabende) with tab navigation. Refactored carousel and improved HomeEntrie for better mobile/desktop title handling. Renamed CarouseWithTitle.vue to CarouselItemWithTitle.vue for clarity.
95 lines
2.6 KiB
Vue
95 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
import { useTheme } from 'vuetify';
|
|
import { Visibility, routes } from './plugins/routesLayout';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const theme = useTheme();
|
|
const route = useRoute();
|
|
const showDrawer = ref(true);
|
|
|
|
function changeTheme() {
|
|
theme.toggle();
|
|
localStorage.setItem('theme', theme.name.value);
|
|
}
|
|
|
|
function toggleDrawer() {
|
|
showDrawer.value = !showDrawer.value;
|
|
localStorage.setItem('drawer', showDrawer.value ? 'Y' : 'N');
|
|
}
|
|
|
|
onMounted(() => {
|
|
theme.change(
|
|
localStorage.getItem('theme') ||
|
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
|
|
);
|
|
showDrawer.value = localStorage.getItem('drawer')?.startsWith('Y') || false;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<v-app>
|
|
<v-app-bar image="/static/images/appBarIcon.png">
|
|
<template v-slot:image>
|
|
<v-img
|
|
:gradient="
|
|
theme.name.value === 'dark'
|
|
? 'rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)'
|
|
: 'rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)'
|
|
"
|
|
/>
|
|
</template>
|
|
<template v-slot:prepend>
|
|
<v-app-bar-nav-icon @click="toggleDrawer()"></v-app-bar-nav-icon>
|
|
</template>
|
|
|
|
<v-app-bar-title class="title" @click="$router.push({ name: 'Home' })"
|
|
><span class="pointer">Judoteam - Stadtlohn</span></v-app-bar-title
|
|
>
|
|
|
|
<v-tooltip v-if="!$vuetify.display.mobile">
|
|
<template #activator="{ props }">
|
|
<v-btn icon v-bind="props">
|
|
<v-icon>mdi-account</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
Account
|
|
</v-tooltip>
|
|
<v-tooltip>
|
|
<template #activator="{ props }">
|
|
<v-btn icon @click="changeTheme()" v-bind="props">
|
|
<v-icon>mdi-brightness-6</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
{{ theme.name.value === 'dark' ? 'Hellen Modus aktivieren' : 'Dunklen Modus aktivieren' }}
|
|
</v-tooltip>
|
|
</v-app-bar>
|
|
|
|
<v-navigation-drawer
|
|
v-model="showDrawer"
|
|
:location="$vuetify.display.mobile ? 'bottom' : undefined"
|
|
:permanent="!$vuetify.display.mobile"
|
|
>
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="item in routes.filter((x) => x.visible === Visibility.Public)"
|
|
:key="item.path"
|
|
:to="item.path"
|
|
:active="route.path === item.path"
|
|
link
|
|
:prepend-icon="item.icon"
|
|
:title="item.name"
|
|
class="rounded-lg mr-1 ml-1"
|
|
>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
|
|
<v-main>
|
|
<router-view></router-view>
|
|
</v-main>
|
|
</v-app>
|
|
</template>
|
|
|
|
<style scoped></style>
|