(feat) sidebar (#77)

* added sidebar

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

* Sidebar is collapsable

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

* Sidebar state is now synced with localstorage

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

* Changed sidebar communciation to use load functions

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

* Moved Sidebar into component

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

* Added profile page

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

* redirect signed in users to /projects + after sign in

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

* added lang postcss to style stags using @apply

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

* added localStorageWritable to sidebar

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

* fixed bug where themeselector navigated to profile page

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

---------

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

Author: benjaminstrasser

src/components/sidebar/index.ts

@@ -0,0 +1,9 @@
+import Sidebar from './sidebar.svelte'
+
+export type NavigationElement = {
+	name: string
+	icon: ConstructorOfATypedSvelteComponent
+	route: string
+}
+
+export { Sidebar }

src/components/sidebar/sidebar.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { NavigationElement } from '.'
+	import { page } from '$app/stores'
+	import { ThemeSelector } from '$components/ui/theme-selector'
+
+	import ChevronLeft from 'lucide-svelte/icons/chevron-left'
+	import ChevronRight from 'lucide-svelte/icons/chevron-right'
+	import { localStorageWritable } from '$lib/utils/localstorage-writable'
+
+	export let sidebarElements: NavigationElement[] = []
+
+	const collapsedSidebar = localStorageWritable('collapsedSidebar', false)
+</script>
+
+<div
+	class:collapsedSidebar={$collapsedSidebar}
+	class="duration-400 flex h-full w-80 flex-none flex-col bg-secondary text-secondary-foreground transition-all ease-in-out"
+>
+	<!-- Top Section -->
+	<div class="m-8 mb-6 mr-0 flex items-center text-2xl">
+		<div>⌘</div>
+		<div class="ml-2 overflow-hidden whitespace-nowrap" class:collapsedElement={$collapsedSidebar}>
+			Tiny-TMS
+		</div>
+		<button
+			on:click={() => ($collapsedSidebar = !$collapsedSidebar)}
+			class="ml-auto mr-2 cursor-pointer rounded-full hover:bg-primary-foreground"
+		>
+			{#if $collapsedSidebar}
+				<ChevronRight />
+			{:else}
+				<ChevronLeft />
+			{/if}
+		</button>
+	</div>
+
+	<div class="mx-4 flex-grow">
+		{#each sidebarElements as element}
+			<a
+				href={element.route}
+				class="flex cursor-pointer rounded-lg border border-transparent p-4 hover:border-primary"
+				class:selected={$page.url.pathname.endsWith(element.route)}
+			>
+				<svelte:component this={element.icon} class="min-h-6 min-w-6"></svelte:component>
+				<div
+					class="ml-2 overflow-hidden whitespace-nowrap"
+					class:collapsedElement={$collapsedSidebar}
+				>
+					{element.name}
+				</div>
+			</a>
+		{/each}
+	</div>
+
+	<div class="m-4 mt-auto flex items-center justify-between">
+		<a class="flex items-center" href="/profile">
+			<div class="ml-4 mr-2.5 min-h-8 min-w-8 rounded-full bg-yellow-300"></div>
+			<div class:collapsedElement={$collapsedSidebar} class="overflow-hidden whitespace-nowrap">
+				My Account
+			</div>
+		</a>
+		<div class:collapsedElement={$collapsedSidebar} class="overflow-hidden">
+			<ThemeSelector />
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.collapsedElement {
+		display: none;
+	}
+
+	.collapsedSidebar {
+		@apply w-[90px];
+	}
+	.selected {
+		@apply bg-primary-foreground;
+	}
+</style>

src/components/ui/theme-selector/theme-selector.svelte

@@ -51,7 +51,7 @@
 	</label>
 </div>
 
-<style lang="css">
+<style lang="postcss">
 	input[type='radio']:checked + label {
 		@apply border border-primary;
 	}

src/routes/(auth)/+layout.svelte

@@ -48,5 +48,7 @@
 		</div>
 	</div>
 
-	<div class="my-auto w-1/2"><slot></slot></div>
+	<div class="my-auto w-1/2">
+		<slot />
+	</div>
 </div>

src/routes/(auth)/login/+page.server.ts

@@ -9,7 +9,7 @@ import { dev } from '$app/environment'
 
 export const load: PageServerLoad = async ({ locals: { user } }) => {
 	if (user) {
-		throw redirect(302, '/')
+		throw redirect(302, '/projects')
 	}
 
 	return {

src/routes/(auth)/login/login-form.svelte

@@ -14,13 +14,13 @@
 
 	const form = superForm(data, {
 		validators: zodClient(loginSchema),
-		async onUpdated({ form }) {
+		async onUpdate({ form }) {
 			if (form.message) {
 				if ($page.status >= 400) {
 					toast.error(form.message)
 				} else {
 					toast.success(form.message)
-					await goto('/guarded')
+					await goto('/projects')
 				}
 			}
 		}

src/routes/(auth)/signup/+page.server.ts

@@ -7,7 +7,7 @@ import { redirect } from '@sveltejs/kit'
 
 export const load: PageServerLoad = async (event) => {
 	if (event.locals.user) {
-		throw redirect(302, '/')
+		throw redirect(302, '/projects')
 	}
 
 	return {

src/routes/(authenticated)/+layout.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Sidebar } from '$components/sidebar'
+	import { page } from '$app/stores'
+</script>
+
+<div class="flex h-full">
+	<Sidebar sidebarElements={$page.data.sidebarElements} />
+	<slot />
+</div>

src/routes/(authenticated)/+layout.ts

@@ -0,0 +1,16 @@
+import List from 'lucide-svelte/icons/list'
+import type { LayoutLoad } from './$types'
+
+export const load: LayoutLoad = () => {
+	const sidebarElements = [
+		{
+			name: 'My Projects',
+			route: '/projects',
+			icon: List
+		}
+	]
+
+	return {
+		sidebarElements
+	}
+}

src/routes/(authenticated)/profile/+page.svelte

@@ -0,0 +1 @@
+Profile