You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.1 KiB
79 lines
2.1 KiB
5 months ago
|
<!--
|
||
|
|
Bottom-tab navigation for the product surface (Discover, Matches,
|
||
|
|
Profile, Safety). Sticks to the bottom on mobile, becomes a centered
|
||
|
|
pill on desktop. The visual styling lives in the Nexo design system
|
||
|
|
(`.nx-tabbar` / `.nx-tab`); this file only owns the data and active
|
||
|
|
state derivation.
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
import { page } from '$app/state';
|
||
|
|
import { goto } from '$app/navigation';
|
||
|
|
import { getNexoContext } from '../_lib/context';
|
||
|
|
|
||
|
|
const nexo = getNexoContext();
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
{ href: '/dating/discover', label: 'Descubre', icon: '✦' },
|
||
|
|
{ href: '/dating/matches', label: 'Matches', icon: '♡' },
|
||
|
|
{ href: '/dating/profile', label: 'Perfil', icon: '◔' },
|
||
|
|
{ href: '/dating/safety', label: 'Seguridad', icon: '⚐' }
|
||
|
|
] as const;
|
||
|
|
|
||
|
|
function isCurrent(href: string): boolean {
|
||
|
|
return page.url.pathname === href || page.url.pathname.startsWith(`${href}/`);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function logout() {
|
||
|
|
try {
|
||
|
|
await nexo.api.logout();
|
||
|
|
} finally {
|
||
|
|
nexo.setSession({ authenticated: false });
|
||
|
|
await goto('/dating/login', { replaceState: true });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<nav class="nx-tabbar appnav-frame" aria-label="Nexo">
|
||
|
|
{#each items as item (item.href)}
|
||
|
|
<a
|
||
|
|
class="nx-tab"
|
||
|
|
href={item.href}
|
||
|
|
aria-current={isCurrent(item.href) ? 'page' : undefined}
|
||
|
|
>
|
||
|
|
<span class="ico" aria-hidden="true">{item.icon}</span>
|
||
|
|
<span class="label">{item.label}</span>
|
||
|
|
</a>
|
||
|
|
{/each}
|
||
|
|
<button type="button" class="nx-tab logout" onclick={logout}>
|
||
|
|
<span class="ico" aria-hidden="true">⏻</span>
|
||
|
|
<span class="label">Salir</span>
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* The primitives' .nx-tabbar uses 4 columns; we have 5 cells once
|
||
|
|
"Salir" is added, so override the grid here. */
|
||
|
|
.appnav-frame {
|
||
|
|
grid-template-columns: repeat(5, 1fr);
|
||
|
|
max-width: 36rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.ico {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
.logout {
|
||
|
|
opacity: 0.65;
|
||
|
|
}
|
||
|
|
.logout:hover {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
/* Desktop replaces this bottom tab bar with the layout's left
|
||
|
|
rail. Hiding here keeps the page chrome from doubling up. */
|
||
|
|
@media (min-width: 1024px) {
|
||
|
|
.appnav-frame {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|