(feat) sidebar

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

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

@@ -0,0 +1 @@
+Projects

src/routes/(authenticated)/projects/[id]/+layout.ts

@@ -0,0 +1,40 @@
+import ArrowBigLeft from 'lucide-svelte/icons/arrow-big-left'
+import ClipboardType from 'lucide-svelte/icons/clipboard-type'
+import FileKey from 'lucide-svelte/icons/file-key'
+import Languages from 'lucide-svelte/icons/languages'
+import Settings from 'lucide-svelte/icons/settings'
+import type { LayoutLoad } from './$types'
+
+export const load: LayoutLoad = () => {
+	const sidebarElements = [
+		{
+			name: 'My Projects',
+			route: '/projects',
+			icon: ArrowBigLeft
+		},
+		{
+			name: 'Translations',
+			route: 'translations',
+			icon: ClipboardType
+		},
+		{
+			name: 'Keys',
+			route: 'keys',
+			icon: FileKey
+		},
+		{
+			name: 'Languages',
+			route: 'languages',
+			icon: Languages
+		},
+		{
+			name: 'Settings',
+			route: 'settings',
+			icon: Settings
+		}
+	]
+
+	return {
+		sidebarElements
+	}
+}

src/routes/(authenticated)/projects/[id]/keys/+page.svelte

@@ -0,0 +1 @@
+keys

src/routes/(authenticated)/projects/[id]/languages/+page.svelte

@@ -0,0 +1 @@
+languages

src/routes/(authenticated)/projects/[id]/settings/+page.svelte

@@ -0,0 +1 @@
+settings

src/routes/(authenticated)/projects/[id]/translations/+page.svelte

@@ -0,0 +1 @@
+Translation

src/routes/+layout.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <main class="h-screen w-screen">
-	<slot></slot>
+	<slot />
 
 	<Toaster />
 </main>