<script lang="ts">
	import { userStore } from './routes/UserStore.svelte';
</script>

<nav>
	<ul>
		<li>
			<a href="/"> Index </a>
		</li>
		{#if userStore.user}
			<li>
				<a href="/models"> Models </a>
			</li>
		{/if}
		<li class="expand"></li>
		{#if userStore.user}
			<li>
				<a href="/user/info"> User Info </a>
				<a href="/logout"> Logout </a>
			</li>
		{:else}
			<li>
				<a href="/login"> Login </a>
			</li>
		{/if}
	</ul>
</nav>

<style class="scss">
	nav {
		background: #ececec;
		margin: 0;
		box-shadow: 0 0 8px 1px #888888ef;
		height: 60px;

		ul {
			display: flex;
			margin: 0;
			padding: 20px 40px;

			li {
				list-style: none;
				padding-left: 10px;

				&:first-child {
					padding: 0;
				}

				&.expand {
					flex-grow: 1;
				}

				a {
					text-decoration: none;
					color: black;
				}
			}
		}
	}
</style>
