add the menu screen

src/lib/component/Menu.svelte

@@ -0,0 +1,78 @@
+<script>
+	import Header from '$lib/layout/Header.svelte';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+
+	let categoriaSelecionada = null;
+	let cardapio = [];
+	let token = null;
+	let company = null;
+	let categories = [];
+	let products = [];
+
+	if (browser) {
+		token = localStorage.getItem('token');
+		company = Number(localStorage.getItem('company'));
+	}
+
+	function filtrarCategoria(categoria) {
+		categoriaSelecionada = categoriaSelecionada === categoria ? null : categoria;
+	}
+
+	
+
+	onMount(() => {
+		const params = new URLSearchParams(window.location.search);
+		const id = params.get('id'); 
+			
+		if (id) {
+		  fetch(`https://dev2.mixtech.dev.br/menu/get/${id}`)
+		    .then(res => res.json())
+		    .then(data => {
+		      console.log(data.data);
+			  cardapio = data.data 
+			})
+			.catch(err => console.error("Erro ao buscar o cardapio:', err"));
+		} else {
+		  console.log('ID não encontrado na URL');
+		}
+	});
+</script>
+
+<Header />
+<div class="flex flex-nowrap justify-center gap-4 overflow-x-auto bg-gray-700 p-5">
+	{#each cardapio as secao}
+		<button
+			class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors duration-200
+			{categoriaSelecionada === secao.categoria ? 'text-white bg-violet-700' : 'bg-gray-600 text-gray-100'}"
+			on:click={() => filtrarCategoria(secao.categoria)}
+		>
+			{secao.categoria}
+		</button>
+	{/each}
+</div>
+
+<main class="flex min-h-screen bg-gray-800">
+	<div class="flex flex-1 items-start justify-center bg-gray-700 pt-5">
+		<div class="h- w-full max-w-370 rounded-2xl bg-gray-800 p-8 shadow-lg">
+			<h1 class="mb-8 text-center text-3xl font-bold text-gray-200">Cardápio</h1>
+
+			{#each cardapio.filter((secao) => !categoriaSelecionada || secao.categoria === categoriaSelecionada) as secao}
+				<div class="mb-6">
+					<h2 class="mb-3 text-center text-xl font-semibold text-gray-200">{secao.categoria}</h2>
+					{#each secao.produtos as item}
+						<div class="mb-2 rounded-lg bg-gray-700 px-4 py-2">
+							<div class="flex items-start justify-between">
+								<div class="flex-1">
+									<span class="block font-medium text-gray-200">{item.nome}</span>
+									<p class="mt-1 text-sm text-gray-400">{item.descricao}</p>
+								</div>
+								<span class="ml-4 text-sm whitespace-nowrap text-gray-300">{item.preco}</span>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</div>
+</main>

src/lib/layout/Header.svelte

@@ -0,0 +1,16 @@
+<script>
+
+</script>
+
+<div class="flex justify-between items-center p-6 bg-gray-900 w-full">
+  <!-- Esquerda: Logo -->
+  <p class="text-lg font-bold text-white">Logo</p>   
+
+  <!-- Centro: Titulo--> 
+  <div class="absolute left-1/2 transform -translate-x-1/2">
+    <p class="text-2xl font-bold text-white">BardoDu</p>
+  </div>
+
+  <!-- Direita: --> 
+  <p class="text-sm text-gray-300 hover:text-white transition">Contato</p>
+</div>

src/routes/+page.svelte

@@ -1,2 +1,5 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script>
+    import Menu from "$lib/component/Menu.svelte";
+</script>
+
+<Menu />