traxxx-web/renderer/container.vue

<template>
	<div
		class="container"
		@click="blur"
	>
		<transition name="slide">
			<Sidebar
				v-if="showSidebar"
				@sidebar="showSidebar = false"
			/>
		</transition>

		<Header />

		<div
			ref="content"
			class="content"
		>
			<slot @scroll="scroll" />
		</div>

		<BottomNavigation
			class="nav"
			@sidebar="showSidebar = true"
		/>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

import events from '#/src/events.js';

import Header from '#/components/header/header.vue';
import Sidebar from '#/components/sidebar/sidebar.vue';
import BottomNavigation from '#/components/footer/navigation.vue';

const content = ref(null);
const showSidebar = ref(false);

function blur() {
	events.emit('blur');
}

onMounted(() => {
	events.on('scrollUp', () => { content.value.scrollTop = 0; });
});
</script>

<style>
.scroller {
	height: 30rem;
	overflow-y: auto;
}

.item {
	height: 32px;
	padding: 0 12px;
	display: flex;
	align-items: center;
}

.slide-enter-active,
.slide-leave-active {
	&.sidebar-container {
		transition: background .15s ease-in-out;
	}

	.sidebar {
		transition: transform .15s ease-in-out;
	}
}

.slide-enter-from,
.slide-leave-to {
	&.sidebar-container {
		background: transparent;
	}

	.sidebar {
		transform: translate(100%, 0);
	}
}
</style>

<style scoped>
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow-y: auto;
}

.nav {
	display: none;
}

@media(--small-10) {
	.nav {
		display: flex;
	}
}
</style>