|
|
@@ -3,6 +3,10 @@
|
|
|
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 { logout } from '../lib/auth'; // Você precisa criar esse arquivo
|
|
|
|
|
|
let flagUser = 'admin';
|
|
|
@@ -13,11 +17,11 @@
|
|
|
navItems = [{ name: 'Mesas', path: '/dashboard/tables' }];
|
|
|
} else if (flagUser == 'admin') {
|
|
|
navItems = [
|
|
|
- { name: 'Mesas', path: '/dashboard/tables' },
|
|
|
- { name: 'Produtos', path: '/dashboard/products' },
|
|
|
- { name: 'Relatórios', path: '/dashboard/reports' },
|
|
|
- { name: 'Cozinha', path: '/dashboard/cozinha' },
|
|
|
- { name: 'Gerenciar Usuários', path: '/dashboard/control' }
|
|
|
+ { 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/cozinha', icon: 'kitchen_icon' },
|
|
|
+ { name: 'Gerenciar Usuários', path: '/dashboard/control', icon: 'mananger' }
|
|
|
];
|
|
|
} else if (flagUser == 'kitchen') {
|
|
|
navItems = [{ name: 'Cozinha', path: '/dashboard/cozinha' }];
|
|
|
@@ -38,12 +42,10 @@
|
|
|
</script>
|
|
|
|
|
|
<div class="flex h-screen bg-gray-900 text-white">
|
|
|
- <!-- Sidebar Desktop -->
|
|
|
<div class="hidden w-64 flex-col border-r border-gray-700 bg-gray-800 md:flex">
|
|
|
- <div class="ml-4 flex h-16 items-center justify-center border-b border-gray-700">
|
|
|
- <!-- <img src="/icons/layers.svg" alt="Logo" class="w-8 h-8 mr-2" /> -->
|
|
|
- <div class="mr-2 h-8 w-8 rounded bg-emerald-500"></div>
|
|
|
- <h1 class="text-xl font-semibold">Bar Management System</h1>
|
|
|
+ <div class=" flex h-16 items-center justify-center border-b border-gray-700">
|
|
|
+ <img src={beer_green} 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">
|
|
|
@@ -56,8 +58,11 @@
|
|
|
}`}
|
|
|
on:click={() => goto(item.path)}
|
|
|
>
|
|
|
- <!-- <img src="/icons/${item.name.toLowerCase()}.svg" class="w-6 h-6" alt={item.name} /> -->
|
|
|
- <div class="h-6 w-6 rounded bg-gray-500"></div>
|
|
|
+ <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}
|
|
|
@@ -68,16 +73,14 @@
|
|
|
class="flex w-full items-center justify-center rounded-lg px-4 py-2 text-sm text-red-400 transition-colors hover:bg-gray-700"
|
|
|
on:click={handleLogout}
|
|
|
>
|
|
|
- <!-- <img src="/icons/logout.svg" class="w-5 h-5 mr-2" alt="Logout" /> -->
|
|
|
- <div class="mr-2 h-5 w-5 rounded bg-red-500"></div>
|
|
|
+ <img src={logout_icon} class="mr-2 h-5 w-5" alt="Logout" />
|
|
|
<span>Sair</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- Conteúdo + Header Mobile -->
|
|
|
+ <!-- Header Mobile -->
|
|
|
<div class="flex flex-1 flex-col">
|
|
|
- <!-- Mobile Header -->
|
|
|
<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"
|
|
|
>
|
|
|
@@ -87,17 +90,14 @@
|
|
|
on:click={() => (isMobileMenuOpen = !isMobileMenuOpen)}
|
|
|
>
|
|
|
{#if isMobileMenuOpen}
|
|
|
- <!-- <img src="/icons/close.svg" class="w-6 h-6" alt="Fechar" /> -->
|
|
|
- <div class="h-6 w-6 rounded bg-gray-400"></div>
|
|
|
+ <img src={close_icon} class="h-6 w-6" alt="Fechar" />
|
|
|
{:else}
|
|
|
- <!-- <img src="/icons/menu.svg" class="w-6 h-6" alt="Menu" /> -->
|
|
|
- <div class="h-6 w-6 rounded bg-gray-400"></div>
|
|
|
+ <img src={menu_icon} class="h-6 w-6" alt="Menu" />
|
|
|
{/if}
|
|
|
</button>
|
|
|
<div class="flex items-center">
|
|
|
- <!-- <img src="/icons/layers.svg" class="w-7 h-7 mr-2 text-emerald-500" alt="Logo" /> -->
|
|
|
- <div class="mr-2 h-7 w-7 rounded bg-emerald-500"></div>
|
|
|
- <h1 class="text-lg font-semibold">Bar Management System</h1>
|
|
|
+ <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>
|
|
|
@@ -115,8 +115,11 @@
|
|
|
}`}
|
|
|
on:click={() => navigate(item.path)}
|
|
|
>
|
|
|
- <!-- <img src="/icons/${item.name.toLowerCase()}.svg" class="w-6 h-6" alt={item.name} /> -->
|
|
|
- <div class="h-6 w-6 rounded bg-gray-500"></div>
|
|
|
+ <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}
|
|
|
@@ -124,8 +127,7 @@
|
|
|
class="flex items-center rounded-lg px-4 py-3 text-sm text-red-400 transition-colors hover:bg-gray-700"
|
|
|
on:click={handleLogout}
|
|
|
>
|
|
|
- <!-- <img src="/icons/logout.svg" class="w-5 h-5 mr-2" alt="Logout" /> -->
|
|
|
- <div class="mr-2 h-5 w-5 rounded bg-red-500"></div>
|
|
|
+ <img src={logout_icon} class="mr-2 h-5 w-5" alt="Logout" />
|
|
|
<span>Sair</span>
|
|
|
</button>
|
|
|
</nav>
|
gdias
