48 lines
1.4 KiB
Svelte
48 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
Navbar,
|
|
NavbarBrand,
|
|
NavbarToggler,
|
|
NavItem,
|
|
Nav,
|
|
NavLink,
|
|
Collapse,
|
|
} from "@sveltestrap/sveltestrap";
|
|
|
|
let isOpen: boolean = $state(false);
|
|
let theme = $state(localStorage.getItem("theme") ?? "light");
|
|
const toggleTheme = () => {
|
|
theme = theme === "light" ? "dark" : "light";
|
|
document.body.setAttribute("data-bs-theme", theme);
|
|
localStorage.setItem("theme", theme);
|
|
};
|
|
</script>
|
|
|
|
<Navbar class="border-bottom" container="xxl" expand="md" color="dark-subtle">
|
|
<NavbarBrand href="/">AlquilaFacil</NavbarBrand>
|
|
<div>
|
|
<button
|
|
class="badge btn"
|
|
onclick={toggleTheme}
|
|
style="background-color: cadetblue;"
|
|
>
|
|
{#if theme === "light"}
|
|
<img src="/toggle-left.svg" alt="" />
|
|
{:else}
|
|
<img src="/toggle-right.svg" alt="" />
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
|
<Collapse {isOpen} navbar expand="md">
|
|
<Nav class="ms-auto" navbar>
|
|
<NavItem>
|
|
<NavLink href="/">Login</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink href="/Info">Preguntas Frecuentes</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
</Collapse>
|
|
</Navbar>
|