intelidomWebsite/src/routes/admin/(dashboard)/+layout.svelte

<script lang="ts">
	import { page } from '$app/state';
	import type { Snippet } from 'svelte';
	import type { LayoutData } from './$types';
	import intelidom_banner from '$lib/assets/intelidom_banner.svg';

	let { data, children }: { data: LayoutData; children: Snippet } = $props();

	const tabs = [
		{ href: '/admin/gallery', label: 'Galerija' },
		{ href: '/admin/services', label: 'Storitve' },
		{ href: '/admin/news', label: 'Novice' },
		{ href: '/admin/contact', label: 'Kontakt' }
	];

	const isAdmin = $derived(data.user.role === 'admin');
</script>

<svelte:head>
	<title>Admin — InteliDom d.o.o.</title>
	<meta name="robots" content="noindex" />
</svelte:head>

<div class="dash">
	<aside class="sidebar">
		<div class="brand">
			<a href="/"><img src={intelidom_banner} alt="InteliDom" /></a>
			<span>Admin</span>
		</div>

		<nav>
			{#each tabs as tab (tab.href)}
				<a href={tab.href} class="tab" class:active={page.url.pathname.startsWith(tab.href)}>
					{tab.label}
				</a>
			{/each}
			{#if isAdmin}
				<a
					href="/admin/users"
					class="tab"
					class:active={page.url.pathname.startsWith('/admin/users')}
				>
					Uporabniki
				</a>
			{/if}
		</nav>

		<div class="account">
			<div class="who">
				<span class="who-name">{data.user.name}</span>
				<span class="who-role">{data.user.role}</span>
			</div>
			<form method="POST" action="/admin/logout">
				<button type="submit" class="logout">Odjava</button>
			</form>
		</div>
	</aside>

	<main class="dash-main">
		{@render children()}
	</main>
</div>

<style>
	.dash {
		width: 100%;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.sidebar {
		background: #11161a;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 1em;
		padding: 1em;
	}

	.brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25em;
	}

	.brand a {
		display: block;
		line-height: 0;
	}

	.brand img {
		width: 100%;
		max-width: 150px;
		display: block;
	}

	.brand span {
		color: #9aa0a6;
		font-size: 0.75em;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	nav {
		display: flex;
		flex-direction: row;
		gap: 0.3em;
		overflow-x: auto;
	}

	.tab {
		color: #c7c9cf;
		text-decoration: none;
		padding: 0.5em 0.9em;
		border-radius: 8px;
		white-space: nowrap;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.tab:hover {
		background: rgba(255, 255, 255, 0.05);
		color: #fff;
	}

	.tab.active {
		background: rgba(66, 175, 56, 0.15);
		color: #fff;
	}

	.account {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1em;
		flex-wrap: wrap;
	}

	.who {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.who-name {
		color: #e5e4ea;
		font-weight: 600;
	}

	.who-role {
		color: #9aa0a6;
		font-size: 0.8em;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.logout {
		background: rgba(255, 255, 255, 0.08);
		color: #e5e4ea;
		border: none;
		border-radius: 8px;
		padding: 0.5em 1em;
		font-family: inherit;
		font-size: 0.9em;
		cursor: pointer;
	}

	.logout:hover {
		background: rgba(255, 255, 255, 0.05);
	}

	.dash-main {
		flex: 1 1 auto;
		min-width: 0; /* allow the flex item to shrink so wide content wraps instead of overflowing */
		box-sizing: border-box;
		padding: 1.5em 1.5em 3em;
	}

	@media (min-width: 900px) {
		.dash {
			flex-direction: row;
		}

		.sidebar {
			width: 220px;
			flex-shrink: 0;
			position: sticky;
			top: 0;
			height: 100vh;
			overflow-y: auto;
		}

		nav {
			flex-direction: column;
			flex: 1;
			overflow-x: visible;
		}

		.account {
			flex-direction: column;
			align-items: stretch;
		}
	}
</style>