1
0
Files
tideshift-website/src/components/old/Header.astro
T

75 lines
1.6 KiB
Plaintext

---
import { Image } from "astro:assets";
import { getRelativeLocaleUrl } from "astro:i18n";
import logo from "../assets/ci/icon-only.svg";
const isEnglish = Astro.currentLocale === "en";
---
<header>
<a href="/" class="hoverable hoverable--diff">
<span class="sr-only">Back to home</span>
<Image
class="icon"
src={logo}
loading="eager"
alt="Tideshift Digital logo mark"
/>
</a>
<nav>
<ul>
<li>
<a class="hoverable" href="/blog">Blog</a>
</li>
<li>
<a class="hoverable" href="/imprint">Imprint</a>
</li>
<li>
<a class="hoverable" href="/privacy">Privacy policy</a>
</li>
<!-- <li>
<a
class:list={['hoverable', { active: isEnglish }]}
href={getRelativeLocaleUrl("en", "")}>EN</a
>
</li>
<li>
<a
class:list={['hoverable',{ active: !isEnglish }]}
href={getRelativeLocaleUrl("de", "")}>DE</a
>
</li> -->
</ul>
</nav>
</header>
<style>
header {
display: flex;
justify-content: space-between;
}
.icon {
width: 60px;
height: auto;
}
ul {
display: flex;
list-style: none;
gap: 1em;
}
ul {
& a {
color: var(--clr-ts-light);
text-decoration: none;
&.active {
text-decoration: underline;
}
}
}
</style>