Hoya26/frontend/src/routes/+layout.svelte

<script lang="ts">
	import "../app.css";
	import { onMount } from "svelte";
	import { isTauri } from "@tauri-apps/api/core";
	import CustomTabBar from "$lib/components/CustomTabBar.svelte";
	import CameraScreen from "$lib/components/CameraScreen.svelte";
	import { page } from "$app/stores";
	import { goto } from "$app/navigation";
	import Icon from "@iconify/svelte";

	let { children } = $props();
	let isApp = $state(false);
	let isMobile = $state(false);
	let isCameraActive = $state(false);
	let recentItems = $state([
		{
			id: 101,
			title: "Plastic Bottle",
			date: new Date().toLocaleString(),
			impact: "High",
			imageUri: null,
		},
		{
			id: 102,
			title: "Aluminum Can",
			date: new Date(Date.now() - 86400000).toLocaleString(),
			impact: "Low",
			imageUri: null,
		},
	]);

	function handleScanComplete(item: any) {
		recentItems = [item, ...recentItems];
		isCameraActive = false;
	}

	onMount(() => {
		const checkMobile = () => {
			isMobile = window.innerWidth < 768;
		};
		isApp = isTauri();

		checkMobile();
		window.addEventListener("resize", checkMobile);

		if (isApp) {
			document.body.classList.add("platform-native");
		} else {
			document.body.classList.add("platform-web");
		}

		const handleScan = () => {
			isCameraActive = true;
		};
		window.addEventListener("scan", handleScan);
		return () => {
			window.removeEventListener("scan", handleScan);
			window.removeEventListener("resize", checkMobile);
		};
	});

	function addRecentItem(item: any) {
		recentItems = [item, ...recentItems];
	}

	const navLinks = [
		{ name: "Home", route: "/", icon: "ri:home-4-line" },
		{ name: "Goal", route: "/goal", icon: "ri:flag-2-line" },
		{ name: "Chat", route: "/chat", icon: "ri:chat-3-line" },
		{ name: "Report", route: "/report", icon: "ri:alarm-warning-line" },
	];
</script>

<svelte:head>
	<title>Ethix - Truth in every scan</title>
	<meta
		name="description"
		content="Scan products to reveal their true environmental impact. Join the community of eco-conscious shoppers making a difference."
	/>
	<link rel="icon" href="/ethix-logo.png" />
</svelte:head>

{#if isMobile}
	<div class="mobile-container">
		<main class="app-container">
			<div class="content-wrapper">
				{@render children()}
			</div>
		</main>
		<CustomTabBar currentRoute={$page.route.id || "/"} />
	</div>
{:else}
	<nav class="desktop-nav">
		<div class="nav-container">
			<a href="/" class="logo-container">
				<div class="logo-icon">
					<img
						src="/ethix-logo.png"
						alt="Ethix Logo"
						class="logo-img"
					/>
				</div>
				<div class="logo-text-wrapper">
					<span class="logo-text">Ethix</span>
					<span class="logo-subtitle">Truth in every scan</span>
				</div>
			</a>
			<div class="nav-links">
				{#each navLinks as link}
					<a
						href={link.route}
						class="nav-link"
						class:active={$page.route.id === link.route}
					>
						<Icon icon={link.icon} width="20" />
						<span>{link.name}</span>
					</a>
				{/each}
				<a href="/catalogue" class="catalogue-button">
					<Icon icon="ri:search-line" width="20" />
					<span>Browse Catalogue</span>
				</a>
			</div>
		</div>
	</nav>

	<main class="app-container">
		<div class="content-wrapper">
			{@render children()}
		</div>
	</main>
{/if}

{#if isCameraActive}
	<CameraScreen
		onClose={() => (isCameraActive = false)}
		onScanComplete={handleScanComplete}
	/>
{/if}

<style>
	:global(body) {
		margin: 0;
		font-family:
			"Circular",
			"Inter",
			-apple-system,
			BlinkMacSystemFont,
			sans-serif;
		background-color: #0c0c0c;
		color: white;
		overflow-x: hidden;
		overflow-y: auto;
		min-height: 100vh;
	}

	.mobile-container {
		height: 100vh;
		overflow-y: auto;
		background-color: #051f18;
	}

	.app-container {
		min-height: 100vh;
		padding: 10px;
		padding-bottom: 70px;
		box-sizing: border-box;
	}

	:global(.platform-web button) {
		border-radius: 4px;
		padding: 8px 16px;
	}

	:global(.platform-native button) {
		border-radius: 20px;
		padding: 12px 24px;
		font-size: 1.1rem;
	}
	:global(*) {
		box-sizing: border-box;
	}

	.desktop-nav {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		overflow: visible;
		background: transparent;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		box-shadow: none;
		z-index: 100;
	}

	.nav-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24px 40px;
		max-width: 1400px;
		margin: 0 auto;
		width: 100%;
		position: relative;
		z-index: 10;
		pointer-events: auto;
	}

	.logo-container {
		display: flex;
		align-items: center;
		gap: 16px;
		text-decoration: none;
		transition: transform 0.2s;
	}

	.logo-container:hover {
		transform: scale(1.02);
	}

	.logo-icon {
		width: 56px;
		height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.logo-text-wrapper {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.logo-text {
		font-size: 24px;
		font-weight: 900;
		color: #1a1a1a;
		line-height: 1;
		letter-spacing: -0.5px;
	}

	.logo-subtitle {
		font-size: 11px;
		font-weight: 600;
		color: #4b5563;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	.nav-links {
		display: flex;
		align-items: center;
		gap: 32px;
	}

	.nav-link {
		display: flex;
		align-items: center;
		gap: 8px;
		text-decoration: none;
		color: #1a1a1a;
		font-weight: 700;
		font-size: 16px;
		padding: 8px 16px;
		border-radius: 20px;
		transition: all 0.2s;
	}

	.nav-link:hover {
		background: rgba(255, 255, 255, 0.5);
		color: #166534;
	}

	.nav-link.active {
		background: white;
		color: #166534;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.catalogue-button {
		background: #22c55e;
		color: #000000;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 12px 24px;
		border-radius: 30px;
		text-decoration: none;
		font-weight: 700;
		transition: transform 0.2s;
		box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
	}

	.catalogue-button:hover {
		transform: translateY(-2px);
		background: #16a34a;
		color: white;
	}

	.logo-img {
		width: 48px;
		height: 48px;
		object-fit: contain;
	}
</style>