frontend/src/lib/components/Header.svelte

<script>
	import { onMount } from 'svelte';

	let { 
		title = '', 
		oncollapse = () => {},
		children
	} = $props();

	let clockText = $state('');

	onMount(() => {
		function updateClock() {
			const now = new Date();
			clockText = now.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' });
		}

		updateClock();
		const interval = setInterval(updateClock, 30000);
		return () => clearInterval(interval);
	});
</script>

<header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-3 lg:px-4 sticky top-0 z-30">
	<div class="flex items-center gap-2">
		<button
			onclick={oncollapse}
			class="text-gray-500 hover:text-gray-800 transition-colors p-2.5 rounded-lg hover:bg-gray-100 -ml-1"
		>
			<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
			</svg>
		</button>
		{#if title}
			<h1 class="text-lg font-semibold text-gray-800 truncate">{title}</h1>
		{/if}
	</div>

	<div class="flex items-center gap-3">
		<div class="text-sm text-gray-500 font-mono">{clockText}</div>
		{@render children?.()}
	</div>
</header>