73 Zeilen
2.6 KiB
Plaintext
73 Zeilen
2.6 KiB
Plaintext
|
---
|
||
|
|
import Basic from "./Basic.astro";
|
||
|
|
import { Image } from 'astro:assets';
|
||
|
|
import '../styles/button.css';
|
||
|
|
import localLogo from "../images/logo.png"
|
||
|
|
import {l, t} from "astro-i18n";
|
||
|
|
|
||
|
|
const { title } = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<Basic title={title}>
|
||
|
|
<slot name="head" slot="head" />
|
||
|
|
<Fragment>
|
||
|
|
<div>
|
||
|
|
<nav-bar class="h-24 sm:h-12 fixed top-0 left-0 right-0 flex flex-col sm:flex-row items-center justify-evenly sm:justify-between px-4 transition-colors z-10 \
|
||
|
|
before:bg-transparent before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:bg-black before:-z-10 before:scale-y-0 before:transition-transform before:origin-top">
|
||
|
|
<a class="flex items-center" href={l("/")}>
|
||
|
|
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" class="mr-2 p-1 bg-black rounded-full" />
|
||
|
|
<h1 class="text-2xl uppercase font-bold inline-block">
|
||
|
|
{t("navbar.title")}
|
||
|
|
</h1>
|
||
|
|
</a>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<a class="btn btn-gray" href={l("/")}>
|
||
|
|
<span class="btn__text">Start</span>
|
||
|
|
</a>
|
||
|
|
<a class="btn btn-gray" rel="prefetch" href={l("/blog")}>
|
||
|
|
<span class="btn__text">Blog</span>
|
||
|
|
</a>
|
||
|
|
<a class="btn">
|
||
|
|
<span class="btn__text">Login</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</nav-bar>
|
||
|
|
<script>
|
||
|
|
class Navbar extends HTMLElement {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
if (window.scrollY != 0) {
|
||
|
|
this.classList.add("scrolled");
|
||
|
|
} else {
|
||
|
|
this.classList.remove("scrolled");
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onscroll = e => {
|
||
|
|
if (window.scrollY != 0) {
|
||
|
|
this.classList.add("scrolled");
|
||
|
|
} else {
|
||
|
|
this.classList.remove("scrolled");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('nav-bar', Navbar);
|
||
|
|
</script>
|
||
|
|
<main>
|
||
|
|
<slot />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</Fragment>
|
||
|
|
</Basic>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.scrolled {
|
||
|
|
@apply text-white;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
@apply scale-y-100;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|