<template>
	<div
		class="w-full flex flex-col sm:flex-row flex-grow"
		:class="{ 'sidebar-toggle': sidebarToggle }">
		<aside
			class="hidden md:block h-screen overflow-y-auto no-scrollbar border-r">
			<Sidebar/>
		</aside>

		<main role="main" class="w-full h-full flex-grow overflow-auto p-3">
			<RouterView/>
		</main>

		<button class="sidebar-toggle-btn md:hidden" v-on:click="toggleSidebar">
			<svg class="svg-icon" style="width: 30px; height: 30px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M682.666667 682.666667h170.666666v170.666666h-170.666666v-170.666666z m-256 0h170.666666v170.666666h-170.666666v-170.666666z m-256 0h170.666666v170.666666H170.666667v-170.666666z m512-256h170.666666v170.666666h-170.666666v-170.666666z m-256 0h170.666666v170.666666h-170.666666v-170.666666z m-256 0h170.666666v170.666666H170.666667v-170.666666z m512-256h170.666666v170.666666h-170.666666V170.666667z m-256 0h170.666666v170.666666h-170.666666V170.666667zM170.666667 170.666667h170.666666v170.666666H170.666667V170.666667z" fill="#000000" /></svg>
		</button>
	</div>
</template>

<script>
import { RouterView } from 'vue-router'
import Sidebar from '@/components/Sidebar.vue';

export default {
	components: {
		Sidebar,
		RouterView,
	},
	data() {
		return {
			sidebarToggle: false,
		};
	},
	methods: {
		toggleSidebar() {
			this.sidebarToggle = !this.sidebarToggle;

			this.emitter.emit('sidebar.toggle');
		},
	},
}
</script>

<style lang="scss">
aside {
	width: 480px;
}
@media (max-width: 768px) {
	.sidebar-toggle {
		aside {
			display: block;
			width: 100%;
			max-width: initial;
		}

		main {
			display: none;
		}

		&-btn {
			right: 10px;
			bottom: 10px;
			position: fixed;
			z-index: 1000;
			background-color: white;
			border-radius: 5px;
			padding: 2px;
		}
	}
}
</style>