avansando más
This commit is contained in:
@@ -87,7 +87,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Navbar container="xxl" expand="md" color="dark-subtle">
|
||||
<Navbar class="border-bottom" container="xxl" expand="md" color="dark-subtle">
|
||||
<NavbarBrand href="/">AlquilaFacil</NavbarBrand>
|
||||
<div class="d-flex gap-2">
|
||||
<div class="badge" style="background-color: turquoise;" use:links>
|
||||
|
||||
@@ -1,38 +1,47 @@
|
||||
<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);
|
||||
};
|
||||
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 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>
|
||||
|
||||
Reference in New Issue
Block a user