39 lines
1.1 KiB
Svelte
39 lines
1.1 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 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={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>
|