Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128<script lang="ts"> import { resolve } from "$app/paths"; import MenuIcon from "$icon/menu"; import AnimatedLogo from "#lib/components/ui/AnimatedLogo.svelte"; import MobileMenu from "#lib/components/landing/shell/MobileMenu.svelte"; import SiteLink from "#lib/components/landing/shell/SiteLink.svelte"; import { LOGIN, NAV, SIGNUP } from "#lib/components/landing/shell/links.ts"; import Button from "#lib/components/ui/Button.svelte"; import Container from "#lib/components/landing/ui/Container.svelte";
/** * The landing navbar: the logo and the site links on the left, log in * and join on the right, over a hairline that fades out at both ends. It scrolls away with * the page. Below 64rem the links fold into the menu (MobileMenu). */ let menuOpen = $state(false);</script>
<header class="navbar"> <Container class="bar"> <div class="left"> <a class="brand" href={resolve("/")} aria-label="Tangled home"> <AnimatedLogo wordmark class="h-8 lg:h-8.75" /> </a> <nav class="links" aria-label="Main"> {#each NAV as link (link.label)} <SiteLink {link} class="link" /> {/each} </nav> </div> <div class="right"> <Button variant="ghost" size="large" href={resolve(LOGIN)} class="login">Sign in</Button > <Button size="large" href={resolve(SIGNUP)} class="join">Join now</Button> <Button size="large" icon={MenuIcon} class="menu" aria-label="Open menu" aria-expanded={menuOpen} aria-controls="landing-menu" onclick={() => (menuOpen = true)} /> </div> </Container></header>
<MobileMenu id="landing-menu" bind:open={menuOpen} />
<style> .navbar { position: relative; z-index: 10; padding-top: env(safe-area-inset-top, 0px); } .navbar::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--hairline) 10%, var(--hairline) 88%, transparent ); } .navbar :global(.bar) { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.left, .right { display: flex; align-items: center; } .left { align-self: stretch; align-items: stretch; gap: 88px; } .right { gap: 12px; }
.brand { display: flex; align-items: center; padding-top: 2.5px; background: var(--bg); color: var(--text); }
.links { display: flex; align-items: center; gap: 20px; background: var(--bg); } .links :global(.link) { color: var(--muted); font-size: var(--text-body); font-weight: 480; line-height: 1.4; letter-spacing: -0.01em; transition: color 0.15s ease; } .links :global(.link:hover) { color: var(--text); }
@media (width < 64rem) { .links, .right :global(:is(.login, .join)) { display: none; } } @media (width >= 64rem) { .right :global(.menu) { display: none; } }</style>