<template>
	<NcAppNavigation :class="{ episode }">
		<slot />
		<template #list>
			<slot name="list" />
		</template>
		<template #footer>
			<slot name="footer" />
		</template>
	</NcAppNavigation>
</template>

<script lang="ts">
import { NcAppNavigation } from '@nextcloud/vue'
import { mapState } from 'pinia'
import { usePlayer } from '../../store/player.ts'

export default {
	name: 'AppNavigation',
	components: {
		NcAppNavigation,
	},
	computed: {
		...mapState(usePlayer, ['episode']),
	},
}
</script>

<style scoped>
.episode {
	padding-bottom: 6rem;
}
</style>
