mobile sidebar - collapsable

src/lib/components/Header.svelte

@@ -27,8 +27,10 @@
 
 <div class="header">
 	<div class="left">
-		<!-- <img src="/logo.png" /> -->
-		<h1>schleppe.cloud</h1>
+		<a href="/">
+			<!-- <img src="/logo.png" /> -->
+			<h1>schleppe.cloud</h1>
+		</a>
 	</div>
 
 	<div class="middle crumbs">
@@ -40,7 +42,6 @@
 	</div>
 
 	<div class="right">
-		<span>User profile</span>
 		<User />
 	</div>
 </div>
@@ -52,7 +53,7 @@
 		left: 0;
 
 		display: grid;
-		grid-template-columns: 240px 1fr auto;
+		grid-template-columns: 200px 1fr auto;
 		grid-template-areas: 'logoSection siteAndEnvironment profileAndHelp';
 		align-items: center;
 		background: #1c1819;
@@ -64,7 +65,7 @@
 		font-size: 1rem;
 		z-index: 100;
 
-		&::after {
+		&::before {
 			content: '';
 			position: absolute;
 			width: 100%;
@@ -102,10 +103,11 @@
 		}
 
 		.crumbs {
-			margin-left: 0.6rem;
+			margin-left: 2rem;
 
 			li {
 				display: block;
+				cursor: pointer;
 			}
 
 			.seperator {
@@ -113,6 +115,15 @@
 				padding: 0 0.75rem;
 			}
 		}
+
+		@media screen and (max-width: 750px) {
+			top: -0.25rem;
+			overflow: scroll;
+
+			.crumbs {
+				margin-left: 0;
+			}
+		}
 	}
 
 	:global(.right svg) {

src/lib/components/Sidebar.svelte

@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { derived } from 'svelte/store';
 
+	let mobileNavOpen = $state(false);
 	const pages = [
 		{
 			name: 'Home',
@@ -34,16 +35,37 @@
 	];
 
 	const activePage = derived(page, ($page) => $page.url.pathname);
+	const toggle = () => {
+		mobileNavOpen = !mobileNavOpen;
+
+		// nav opens
+		if (mobileNavOpen) {
+			const index = pages.findIndex((page) => $activePage === page.path);
+			const el: HTMLElement = document.getElementsByTagName('nav')[0].getElementsByTagName('a')[
+				index
+			];
+			if (!el) return;
+
+			setTimeout(() => {
+				el?.scrollIntoViewIfNeeded();
+			}, 300);
+		}
+	};
 </script>
 
-<div class="nav-wrapper">
+<div class={`nav-wrapper ${mobileNavOpen ? 'open' : ''}`}>
 	<nav>
 		{#each pages as page, i (page.name)}
 			{#if i === 0}
-				<a class={$activePage === page.path ? 'highlight' : ''} href={page.path}>{page.name}</a>
+				<a
+					class={$activePage === page.path ? 'highlight' : ''}
+					on:click={() => (mobileNavOpen = false)}
+					href={page.path}>{page.name}</a
+				>
 			{:else}
 				<a
 					class={`${$activePage !== page.path && $activePage.startsWith(page.path) ? 'child' : ''} ${$activePage.startsWith(page.path) ? 'highlight' : ''}`}
+					on:click={() => (mobileNavOpen = false)}
 					href={page.path}>{page.name}</a
 				>
 			{/if}
@@ -51,13 +73,89 @@
 	</nav>
 </div>
 
+<div id="mobile-nav-toggle" class={mobileNavOpen ? 'open' : ''} on:click={toggle}>
+	<span></span>
+	<span></span>
+	<span></span>
+</div>
+
 <style lang="scss">
+	#mobile-nav-toggle {
+		--size: 3rem;
+		--padding: 2rem;
+		position: fixed;
+		z-index: 99;
+		width: var(--size);
+		height: var(--size);
+		border-radius: 50%;
+		right: 1rem;
+		bottom: var(--padding);
+		background-color: var(--color);
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+		transition: all 0.2s ease-in-out;
+
+		@media screen and (min-width: 750px) {
+			display: none;
+		}
+
+		span {
+			width: 50%;
+			border-radius: 4px;
+			height: 3px;
+			background-color: var(--highlight);
+			transition: all 0.2s ease-in-out;
+			opacity: 100%;
+		}
+
+		&.open,
+		&:hover {
+			height: calc(var(--size) + 4px);
+			width: calc(var(--size) + 4px);
+			margin-bottom: -2px;
+			margin-right: -2px;
+		}
+
+		&.open {
+			span {
+				margin-left: 10px;
+			}
+
+			span:nth-child(1) {
+				transform: rotate(45deg);
+				transform-origin: top left;
+			}
+
+			span:nth-child(2) {
+				opacity: 0%;
+				height: 1px;
+			}
+
+			span:nth-child(3) {
+				transform: rotate(-45deg);
+				transform-origin: bottom left;
+			}
+		}
+	}
+
 	.nav-wrapper {
 		--nav-width: 240px;
 		top: 72px;
-		left: 0;
+		right: 0;
 		min-width: var(--nav-width);
 		margin-right: 1rem;
+		transition: all 0.4s ease-in-out;
+		z-index: 99;
+		border-radius: var(--border-radius);
+		border-bottom-right-radius: 0;
+		border-top-right-radius: 0;
+		max-height: 66vh;
+		height: fit-content;
+		background-color: var(--bg);
 
 		@media screen and (max-width: 1460px) {
 			--nav-width: 220px;
@@ -68,12 +166,39 @@
 			margin-left: 0.5rem;
 			margin-right: 0;
 		}
+
+		/* mobile */
+		@media screen and (max-width: 750px) {
+			position: fixed;
+			right: -100%;
+			padding-top: 0;
+			padding: 0.51rem;
+			top: calc(72px + 1rem);
+
+			&.open {
+				right: 0.5rem;
+				right: -1rem;
+
+				background-color: var(--color);
+
+				overflow-y: scroll;
+
+				nav a {
+					color: white;
+
+					&:hover,
+					&.highlight {
+						color: black;
+					}
+				}
+			}
+		}
 	}
 
 	nav {
 		display: flex;
 		flex-direction: column;
-		position: fixed;
+		/* position: fixed; */
 		width: var(--nav-width);
 		gap: 4px;
 		margin-top: 1rem;

src/lib/components/navigation/Tabs.svelte

@@ -59,5 +59,6 @@
 		display: flex;
 		flex-direction: column;
 		margin-bottom: 1.5rem;
+		z-index: 100;
 	}
 </style>