w/src/lib/components/ui/NavBar.svelte
2024-12-25 12:47:26 +05:00

60 lines
1.9 KiB
Svelte

<script>
import ThemeSwitch from "./ThemeSwitch.svelte";
import Button from "./Button.svelte";
// /** @type {'tables' | 'viewes'} */
export let current_page = "";
/** @type {any} */
export let db_scheme = {};
export let is_view_open = false;
export let check_access = (name) => false;
export let is_logedin = false;
export let is_loaded = false;
export let on_logout = () => {};
</script>
<div
class="w-full h-[80px] mb-2 pr-4 text-xl flex-initial
flex justify-between items-center
bg-[var(--w-bg-second)] dark:bg-[#111]"
>
<div class="flex">
{#if is_logedin && is_loaded}
{#each Object.entries(db_scheme) as page_name}
{#if check_access(page_name[0])}
<button
on:click={() => {
is_view_open = false;
current_page = page_name[0];
}}
class="m-4 mx-2 p-4
{current_page === page_name[0]
? 'bg-[#d8efff] dark:bg-[#114040]'
: 'bg-[var(--w-button-bg)] dark:bg-black text-[var(--w-accent-text)] dark:text-[var(--b-accent-text)]'}
border-2 border-[var(--w-border)] dark:border-[var(--b-border)]"
>
{page_name[0]}
</button>
{/if}
{/each}
{/if}
</div>
<div class="space-x-4 flex justify-center items-center">
<ThemeSwitch></ThemeSwitch>
{#if is_logedin && is_loaded}
<Button
on_click={on_logout}
class_name={"!text-black hover:!text-white dark:!text-white bg-[var(--w-red)] dark:bg-[var(--b-red)]"}
>
Выход
</Button>
{/if}
</div>
</div>