DistrictCentral/imports/ui/Admin.svelte

<script>
	import Tab, { Label } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import AssetTypes from "/imports/ui/Admin/AssetTypes.svelte";
	import Sites from "/imports/ui/Admin/Sites.svelte";
	import Students from "/imports/ui/Admin/Students.svelte";
	import Staff from "/imports/ui/Admin/Staff.svelte";

	let activeTab = "Sites";
</script>

<div class="container">
	<TabBar tabs={['Sites','Students','Staff','Asset Types']} minWidth let:tab bind:active={activeTab}>
		<Tab {tab}>
			<Label>{tab}</Label>
		</Tab>
	</TabBar>
	{#if activeTab === 'Sites'}
		<Sites></Sites>
	{:else if activeTab === 'Students'}
		<Students></Students>
	{:else if activeTab === 'Staff'}
		<Staff></Staff>
	{:else if activeTab === 'Asset Types'}
		<AssetTypes></AssetTypes>
	{/if}
</div>

<style>
</style>