<script setup>
import { IconoirProvider } from "@iconoir/vue";
import SideBar from "./components/SideBar.vue";
</script>

<template>
	<IconoirProvider
		:icon-props="{
			color: 'white',
			'stroke-width': 2,
			width: '1.2em',
			height: '1.2em',
		}"
	>
		<div id="snw-ui">
			<SideBar />
			<div id="display-content">
				<RouterView />
			</div>
		</div>
	</IconoirProvider>
</template>

<style lang="css">
#snw-ui {
	display: flex;
	flex-direction: row;
	border-radius: 10px;
	padding: 10px;
	border: 4px solid rgb(235, 230, 230);
	max-width: 1280px;
	min-width: 800px;
	margin: 10px auto;
	height: 80vh;
}

#display-content {
	/* flex-grow: 1; */
	margin-left: auto;
	margin-right: auto;
	max-width: 50vw;
	min-width: 80%;
}
</style>
