Stundenaufzeichnung/src/routes/+layout.svelte

<script lang="ts">
	let { children } = $props();
</script>

{#snippet nav(classlist: string)}
<div class={classlist}>
	<h1>Navigation</h1>
	<ul>
		<li><a href="/">Stundenliste</a></li>
		<li><a href="/schaetzung">Stundenschätzung</a></li>
		<li><a href="/dokumente">Dokumente</a></li>
		
		<li style="height: 20px"></li>
		<li>Benutzerverwaltung</li>
		<li>
			<form method="POST" action="/login?/logout">
				<button type="submit">Logout</button>
			</form>
		</li>
	</ul>
</div>
{/snippet}

<div style:display="flex">
{@render nav("navpos nav")}
{@render nav("navpseudo nav")}

<div class="content">
{@render children()}
</div>

</div>

<style>

.navpos {	
	position: fixed; 
	top: 0;
	left: 0;
}

.navpseudo {
	visibility: hidden;
}

.nav {
	width: 10%;
	height: 100%;

	min-width: 130px;

	padding: 8px;
	
	border-right: 1px black solid;
}

.nav ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	height: 100%;
}

.nav ul li {
	padding-bottom: 5px;
}

.nav button {
	padding: 0;
	border: none;
	background: none;
	font-family: arial, sans-serif;
	text-decoration-line: underline;
	color: blue;
	cursor: pointer;
}

.nav h1 {
	width: 100%;

	margin-top: 10px;

	text-align: center;
	font-size: 25px;
}

.content {
	flex: 1;
}

.content :global(h1) {
	width: 100%;
	text-align: center;
	font-weight: bold;
}

</style>