counter/src/lib/layout/SideBar.svelte

<script>
	import { page } from '$app/stores';
	import { goto } from '$app/navigation';
	import { get } from 'svelte/store';
	import { onMount } from 'svelte';
	import beer_green from '$lib/assets/beer_green.svg';
	import logout_icon from '$lib/assets/logout_icon.svg';
	import close_icon from '$lib/assets/close_icon.svg';
	import menu_icon from '$lib/assets/menu_icon.svg';
	import { browser } from '$app/environment';
	import { logo_id } from '$lib/utils/store';
	let flag = null;
	let company;

	if (browser) {
		flag = localStorage.getItem('flag');
		company = localStorage.getItem('company');
	}
	$: navItems = [];

	let isMobileMenuOpen = false;
	onMount(() => {
		if (flag == 'waiter') {
			navItems = [{ name: 'Mesas', path: '/dashboard/tables', icon: 'table_bar' }];
		} else if (flag == 'admin') {
			navItems = [
				{ name: 'Mesas', path: '/dashboard/tables', icon: 'table_bar' },
				{ name: 'Produtos', path: '/dashboard/products', icon: 'product_sell' },
				{ name: 'Relatórios', path: '/dashboard/reports', icon: 'report_icon' },
				{ name: 'Cozinha', path: '/dashboard/kitchen', icon: 'kitchen_icon' },
				{ name: 'Gerenciar Usuários', path: '/dashboard/mananger', icon: 'mananger' }
			];
		} else if (flag == 'kitchen') {
			navItems = [{ name: 'Cozinha', path: '/dashboard/kitchen', icon: 'kitchen_icon' }];
		} else if (flag == 'cashier') {
			navItems = [
				{ name: 'Mesas', path: '/dashboard/tables', icon: 'table_bar' },
				{ name: 'Relatórios', path: '/dashboard/reports', icon: 'report_icon' },
				{ name: 'Cozinha', path: '/dashboard/kitchen', icon: 'kitchen_icon' }
			];
		}

		switch (company) {
			case '1':
				logo_id.set(
					'https://i.postimg.cc/bNNBcTZj/Whats-App-Image-2025-07-29-at-19-59-16-removebg-preview.png'
				);
				break;
		}
	});

	function handleLogout() {
		localStorage.removeItem('flag');
		localStorage.removeItem('token');
		goto('/login');
	}

	function navigate(path) {
		goto(path);
		isMobileMenuOpen = false;
	}

	$: currentPath = get(page).url.pathname;
</script>

<div class="flex h-screen bg-gray-900 text-white">
	<div class="hidden w-64 flex-col border-r border-gray-700 bg-gray-800 md:flex">
		<div class=" flex h-16 items-center justify-center border-b border-gray-700">
			<img src={$logo_id} alt="Logo" class="mr-2 h-8 w-8" />
			<h1 class="text-xl font-semibold">Bar do Ferlin</h1>
		</div>
		<div class="flex flex-1 flex-col overflow-y-auto">
			<nav class="flex-1 space-y-2 px-2 py-4">
				{#each navItems as item}
					<button
						class={`flex cursor-pointer items-center rounded-lg px-4 py-3 text-sm transition-colors ${
							currentPath === item.path
								? 'bg-gray-700 text-white'
								: 'text-gray-300 hover:bg-gray-700'
						}`}
						onclick={() => goto(item.path)}
					>
						<img
							src="../src/lib/assets/{item.icon.toLowerCase()}.svg"
							class="h-6 w-6"
							alt={item.name}
						/>
						<span class="ml-3">{item.name}</span>
					</button>
				{/each}
			</nav>
		</div>
		<div class="border-t border-gray-700 p-4">
			<button
				class="flex w-full cursor-pointer items-center justify-center rounded-lg px-4 py-2 text-sm text-red-400 transition-colors hover:bg-gray-700"
				onclick={handleLogout}
			>
				<img src={logout_icon} class="mr-2 h-5 w-5" alt="Logout" />
				<span>Sair</span>
			</button>
		</div>
	</div>

	<!-- Header Mobile -->
	<div class="flex flex-1 flex-col">
		<header
			class="sticky top-0 z-10 flex h-16 items-center justify-between border-b border-gray-700 bg-gray-800 px-6 md:hidden"
		>
			<div class="flex items-center">
				<button
					class="mr-4 rounded-md p-1 text-gray-400 hover:text-white"
					onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
				>
					{#if isMobileMenuOpen}
						<img src={close_icon} class="h-6 w-6" alt="Fechar" />
					{:else}
						<img src={menu_icon} class="h-6 w-6" alt="Menu" />
					{/if}
				</button>
				<div class="flex items-center">
					<img src={beer_green} class="mr-2 h-7 w-7 text-emerald-500" alt="Logo" />
					<h1 class="text-lg font-semibold">Bar do Ferlin</h1>
				</div>
			</div>
		</header>

		<!-- Mobile Menu -->
		{#if isMobileMenuOpen}
			<div class="absolute inset-x-0 top-16 z-20 border-b border-gray-700 bg-gray-800 md:hidden">
				<nav class="flex flex-col space-y-2 p-4">
					{#each navItems as item}
						<button
							class={`flex items-center rounded-lg px-4 py-3 text-sm transition-colors ${
								currentPath === item.path
									? 'bg-gray-700 text-white'
									: 'text-gray-300 hover:bg-gray-700'
							}`}
							onclick={() => navigate(item.path)}
						>
							<img
								src="../src/lib/assets/{item.icon.toLowerCase()}.svg"
								class="h-6 w-6"
								alt={item.name}
							/>
							<span class="ml-3">{item.name}</span>
						</button>
					{/each}
					<button
						class="flex cursor-pointer items-center rounded-lg px-4 py-3 text-sm text-red-400 transition-colors hover:bg-gray-700"
						onclick={handleLogout}
					>
						<img src={logout_icon} class="mr-2 h-5 w-5" alt="Logout" />
						<span>Sair</span>
					</button>
				</nav>
			</div>
		{/if}

		<!-- Main Content -->
		<main class="flex-1 overflow-y-auto bg-gray-900 p-6 px-4 sm:px-6">
			<slot />
		</main>
	</div>
</div>