Initial commit. Working login, example UI with prototype and demo, connections to DB and DAV, local and prod setups.

2025-10-12 22:13:19 +01:00
commit 708b741a32
138 changed files with 7797 additions and 0 deletions
@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { navigating, page } from '$app/stores';
+	import { authStore } from '$lib/stores/auth.svelte';
+
+	// Mobile menu state
+	let mobileMenuOpen: boolean = false;
+
+	function toggleMenu() {
+		mobileMenuOpen = !mobileMenuOpen;
+	}
+
+	// Close mobile menu when navigation starts
+	$: if ($navigating) {
+		mobileMenuOpen = false;
+	}
+</script>
+
+<nav
+	class="fixed left-0 top-0 z-50 w-full border-b border-gray-200"
+	class:frosty-nav={!mobileMenuOpen}
+	class:bg-background={mobileMenuOpen}
+>
+	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+		<div class="flex h-16 items-center justify-between">
+			<!-- Left: Social Icons -->
+			<div class="flex items-center space-x-4">
+				<a
+					href="https://instagram.com"
+					target="_blank"
+					rel="noopener"
+					class="hover:text-primary text-gray-600"
+					aria-label="Instagram"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="feather feather-instagram"
+						><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path
+							d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
+						></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg
+					>
+				</a>
+				<!-- Add more social icons here -->
+			</div>
+
+			<!-- Center: Links -->
+			<div class="hidden space-x-8 md:flex">
+				<a href="/" class="hover:text-primary font-medium text-gray-800">Home</a>
+				{#if !authStore?.isAuthenticated}
+					<a href="/prices" class="hover:text-primary font-medium text-gray-800">Price List</a>
+				{:else}
+					<a href="/book" class="hover:text-primary font-medium text-gray-800"
+						>Book your appointment</a
+					>
+				{/if}
+				<a href="/portfolio" class="hover:text-primary font-medium text-gray-800">Portfolio</a>
+				<a href="/contact" class="hover:text-primary font-medium text-gray-800">Contact</a>
+				{#if authStore?.isAuthenticated}
+					<a href="/account" class="hover:text-primary font-medium text-gray-800">My Account</a>
+				{/if}
+			</div>
+			<div class="hidden items-center md:flex">
+				<!-- if not logged in and not on login page -->
+				{#if !authStore?.isAuthenticated && $page.url.pathname !== '/login'}
+					<Button href="/login">Login</Button>
+				{/if}
+			</div>
+
+			<!-- Mobile: Burger -->
+			<div class="flex items-center md:hidden">
+				<button on:click={toggleMenu} class="focus:outline-none" aria-label="Toggle menu">
+					<svg class="h-6 w-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 6h16M4 12h16M4 18h16"
+						/>
+					</svg>
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<!-- Mobile Menu -->
+	{#if mobileMenuOpen}
+		<div class="bg-background border-b border-gray-200 md:hidden">
+			<div class="space-y-1 px-2 pb-3 pt-2">
+				<a href="/" class="text-primary block rounded px-3 py-2 text-center hover:text-gray-800"
+					>Home</a
+				>
+
+				{#if !authStore?.isAuthenticated}
+					<a
+						href="/prices"
+						class="text-primary block rounded px-3 py-2 text-center hover:text-gray-800"
+						>Price list</a
+					>
+				{:else}
+					<a
+						href="/book"
+						class="text-primary block rounded px-3 py-2 text-center hover:text-gray-800"
+						>Book your appointment</a
+					>
+				{/if}
+
+				<a
+					href="/portfolio"
+					class="text-primary block rounded px-3 py-2 text-center hover:text-gray-800">Portfolio</a
+				>
+				<a
+					href="/contact"
+					class="text-primary block rounded px-3 py-2 text-center hover:text-gray-800">Contact</a
+				>
+
+				{#if !authStore?.isAuthenticated}
+					<Button href="/login" class="mt-2 w-full text-center">Login</Button>
+				{:else}
+					<a
+						href="/Account"
+						class="text-primary block rounded px-3 py-2 text-center hover:text-gray-800"
+						>My Account</a
+					>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</nav>
+
+<style>
+	.frosty-nav {
+		backdrop-filter: saturate(180%) blur(10px);
+	}
+</style>