97 lines
2.2 KiB
Plaintext
97 lines
2.2 KiB
Plaintext
---
|
|
import { useTranslations, useTranslatedPath } from "../i18n/utils";
|
|
import Logo from "./Logo.astro";
|
|
import ToggleTheme from "@components/ThemeToggle.svelte";
|
|
|
|
function isActive(path: string) {
|
|
return Astro.url.pathname === path;
|
|
}
|
|
|
|
const t = useTranslations(Astro.url);
|
|
const translatePath = useTranslatedPath(Astro.url);
|
|
|
|
const paths = [
|
|
{
|
|
link: translatePath("/blog"),
|
|
text: t("nav.blog"),
|
|
},
|
|
{
|
|
link: translatePath("/projects"),
|
|
text: t("nav.projects"),
|
|
},
|
|
{
|
|
link: translatePath("/photos"),
|
|
text: t("nav.photos"),
|
|
},
|
|
{
|
|
link: translatePath("/videos"),
|
|
text: t("nav.videos"),
|
|
},
|
|
];
|
|
---
|
|
|
|
<ul class="flex my-4 h-12 bg-dark">
|
|
<li><a href="#main-content" class="skip-link">Skip to main content</a></li>
|
|
<li
|
|
class="border-none bg-transparent my-2 mr-4 logo grid place-content-center"
|
|
>
|
|
<a
|
|
href={translatePath("/")}
|
|
class="text-neutral h-9 flex items-center justify-center lowercase"
|
|
>
|
|
<Logo />
|
|
</a>
|
|
</li>
|
|
{
|
|
paths.map(({ link, text }, i) => (
|
|
<li
|
|
class={`
|
|
flex items-center flex-1 border-t-1 border-b-1 border-neutral
|
|
${isActive(link) ? "bg-light underline" : "bg"}
|
|
${i === 0 ? "rounded-bl-md border-l-1" : "border-l-1"}
|
|
${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""}
|
|
`}
|
|
>
|
|
<a
|
|
class="text-neutral w-full h-full flex items-center justify-center lowercase"
|
|
href={link}
|
|
data-astro-prefetch
|
|
>
|
|
{text}
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
<li class="w-8 h-6 flex justify-right items-center h-full">
|
|
<ToggleTheme client:load />
|
|
</li>
|
|
</ul>
|
|
|
|
<style>
|
|
ul > li.logo {
|
|
background: none;
|
|
flex: 0;
|
|
margin-left: 0px;
|
|
--fill: #cb5a5a;
|
|
--background-fill: none;
|
|
}
|
|
/* Visually hide the jump to content button while making it accessible */
|
|
.skip-link {
|
|
position: absolute;
|
|
left: -9999px;
|
|
top: auto;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Make the jump to content button visible when focused */
|
|
.skip-link:focus {
|
|
position: absolute;
|
|
left: 0;
|
|
width: auto;
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
</style>
|