You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const bottomNav = ref();
|
|
const drawer = ref();
|
|
</script>
|
|
|
|
<template>
|
|
<v-app>
|
|
<v-app-bar
|
|
:collapse="false"
|
|
:collapse-on-scroll="true"
|
|
absolute
|
|
color="orange accent-4"
|
|
dark
|
|
scroll-target="#scrolling-techniques-6"
|
|
>
|
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
|
<v-toolbar-title>IID Hausarbeit</v-toolbar-title>
|
|
<template v-slot:extension>
|
|
<v-tabs align-with-title>
|
|
<v-tab>Aktuelles</v-tab>
|
|
<v-tab>Chat</v-tab>
|
|
<v-tab>Termine</v-tab>
|
|
</v-tabs>
|
|
</template>
|
|
</v-app-bar>
|
|
|
|
<v-main>
|
|
<router-view />
|
|
</v-main>
|
|
|
|
<v-navigation-drawer absolute bottom temporary v-model="drawer">
|
|
<v-list nav dense>
|
|
<v-list-item-group active-class="deep-purple--text text--accent-4">
|
|
<v-list-item>
|
|
<v-list-item-title>Foo</v-list-item-title>
|
|
</v-list-item>
|
|
|
|
<v-list-item>
|
|
<v-list-item-title>Bar</v-list-item-title>
|
|
</v-list-item>
|
|
|
|
<v-list-item>
|
|
<v-list-item-title>Fizz</v-list-item-title>
|
|
</v-list-item>
|
|
|
|
<v-list-item>
|
|
<v-list-item-title>Buzz</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list-item-group>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
|
|
<v-bottom-navigation v-model="bottomNav">
|
|
<v-btn value="recent">
|
|
<span>Aktuelles</span>
|
|
<v-icon>mdi-history</v-icon>
|
|
</v-btn>
|
|
<v-btn value="favorites">
|
|
<span>Chat</span>
|
|
<v-icon>mdi-heart</v-icon>
|
|
</v-btn>
|
|
<v-btn value="nearby">
|
|
<span>Termine</span>
|
|
<v-icon>mdi-map-marker</v-icon>
|
|
</v-btn>
|
|
</v-bottom-navigation>
|
|
</v-app>
|
|
</template>
|