public-spaces.de/src/routes/+layout.svelte

<script lang="ts">
	import { Menu, X } from 'lucide-svelte';
	import Logo from '../assets/logo/LOGO-public-spaces.svg';
	import '../app.scss';
	import type { LayoutData } from './$types';

	export let data: LayoutData;

	let menuOpen = false;
</script>

<a href="#navigation" class="sr-only sr-only-focusable a11y-jump">Zur Navigation Springen</a>
<a href="#content" class="sr-only sr-only-focusable a11y-jump">Zum Inhalt Springen</a>
<div class="primary">
	<nav id="navigation">
		<div>
			<div class="logo-container">
				<a href="/" class="logo-link" title="Public Spaces e.V.">
					<img
						src={Logo}
						alt="Public Spaces Logo"
						style={data.isHome ? 'opacity: 0; transform: translate(20%, 50%)' : ''}
					/>
					<span class="sr-only">Public Spaces e.V.</span>
				</a>
			</div>
			<div class={'offscreen-nav' + (menuOpen ? ' active' : '')}>
				<!--<a
					href="/posts"
					on:click={() => {
						menuOpen = false;
					}}>Beiträge</a
				>-->
				<!--<a
					href="/about"
					on:click={() => {
						menuOpen = false;
					}}>Über Uns</a
				>-->
				<a
					href="/contact"
					on:click={() => {
						menuOpen = false;
					}}>Kontakt</a
				>
				<a
					href="/donate"
					on:click={() => {
						menuOpen = false;
					}}>Spenden</a
				>
			</div>
			<div class="offscreen-nav-button">
				<button
					on:click={() => {
						menuOpen = !menuOpen;
					}}
				>
					{#if !menuOpen}
						<Menu size={35} />
					{/if}
					{#if menuOpen}
						<X size={35} />
					{/if}
				</button>
			</div>
		</div>
	</nav>
	<div class="main" role="main" id="content">
		<slot />
	</div>
	<footer>
		<div class="grid">
			<div class="primary-links">
				<a href="/imprint">Impressum</a>
				<a href="/data_protection">Datenschutz</a>
				<a href="/statute">Satzung</a>
			</div>
			<!--<div class="border" />
			<div class="socials">
			</div>
			<div class="border" />
			<div class="supporters">
				<span class="title">Unterstützer des Vereins</span>
			</div>-->
		</div>
		<div class="copy-notice">
			&copy; {new Date().getFullYear()}, Public Spaces e.V.
		</div>
		<span class="design-attribution">Web-Design von <a href="https://kevink.dev" rel="noopener" target="_blank">Kevin Kandlbinder</a></span>
	</footer>
</div>

<style lang="scss">
	.primary {
		@include contentGrid;
		padding-top: var(--nav-space);

		.main {
			grid-column: full-start/full-end;
			min-height: calc(100vh - 200px);
		}

		footer {
			margin-top: 4em;
			background-color: var(--color-dark-surface);
			color: var(--color-dark-surface-text);
			grid-column: full-start/full-end;
			@include contentGrid;

			.grid {
				grid-column: wide-start/wide-end;
				display: grid;
				//grid-template-columns: 1fr 1px 1fr 1px 1fr;
				grid-template-columns: 1fr;
				gap: var(--gap);

				@media (max-width: 700px) {
					grid-template-columns: 1fr;
				}

				> .border {
					width: 1px;
					margin: 10px 0;
					background-color: currentColor;
					opacity: 0.25;
				}

				> :not(.border) {
					padding: var(--gap);
				}

				.primary-links {
					display: flex;
					flex-direction: column;
					align-items: center;

					> a {
						color: var(--color-dark-surface-text-dim);
					}
				}

				.supporters {
					.title {
						color: var(--color-dark-surface-text-dim);
					}
				}

				.socials {
					display: flex;
					justify-content: center;

					a {
						padding: var(--padding);
						text-decoration: none;
						background-color: var(--color-surface);
						margin: var(--padding);
						border-radius: var(--border-radius);
						display: flex;
						align-items: center;
						justify-content: center;

						:global(svg) {
							width: 32px;
							height: 32px;
							fill: currentColor;
						}
					}
				}
			}

			.copy-notice {
				text-align: center;
				padding: var(--gap);
				padding-bottom: 10px;
			}

			.design-attribution {
				text-align: center;
				padding: var(--gap);
				opacity: .5;
				font-size: .9em;
				padding-top: 0;

				a {
					color: inherit;
				}
			}
		}

		nav {
			@include contentGrid;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 200;
			overflow: visible;
			@include glassSurface;

			> div {
				display: flex;

				.logo-container {
					margin-right: auto;

					.logo-placeholder,
					img {
						transition: opacity 0.25s, transform 0.25s;
						width: 100px;
						height: 45px;
						//background-color: var(--color-placeholder);
						//border-radius: var(--border-radius);
					}
				}

				.offscreen-nav-button {
					width: 0;
					pointer-events: none;
					opacity: 0;

					transition: width 0.25s, opacity 0.25s;

					> button {
						height: 100%;
						padding: 0 var(--gap);
						font: inherit;
						color: inherit;
						border: none;
						cursor: pointer;
						background-color: transparent;
					}
				}

				@media (max-width: 700px) {
					.offscreen-nav-button {
						display: block;
						z-index: 300;
						pointer-events: auto;
						width: fit-content;
						opacity: 1;
					}

					.offscreen-nav {
						//display: none;
						position: fixed;
						top: 0;
						left: 0;
						width: 100%;
						z-index: 195;
						display: flex;
						flex-direction: column;
						padding-top: 110px;
						font-size: 1.5em;

						overflow: hidden;
						pointer-events: none;
						height: 0;
						opacity: 0;

						transition: height 0.25s, opacity 0.25s;

						@include glassSurface;

						&.active {
							overflow: auto;
							pointer-events: auto;
							height: 100vh;
							opacity: 1;
						}

						> a {
							display: flex;
							justify-content: center;
						}
					}
				}

				> div {
					display: flex;

					> a {
						display: flex;
						align-items: center;
						padding: var(--padding);
						text-decoration: none;

						&.logo-link {
							margin-right: auto;
						}
					}
				}
			}
		}
	}

	.a11y-jump:focus,
	.a11y-jump:active {
		padding: var(--gap) !important;
		background-color: var(--color-background);
		z-index: 9999;
	}
</style>