avansando más

This commit is contained in:
2025-04-17 13:24:07 -03:00
parent 6fb6ade153
commit c1a27baedd
15 changed files with 477 additions and 262 deletions

View File

@@ -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>

View File

@@ -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>