83 lines
3.9 KiB
Plaintext
83 lines
3.9 KiB
Plaintext
---
|
|
import { facebook, getSettings, invariant, twitter } from "@matthiesenxyz/astro-ghostcms/api";
|
|
const settings = await getSettings();
|
|
invariant(settings, 'Settings not found');
|
|
import Container from "./container.astro";
|
|
import { Astronav, MenuItems, MenuIcon } from "astro-navbar";
|
|
|
|
---
|
|
|
|
<Container>
|
|
<header class="flex flex-col lg:flex-row justify-between items-center my-5">
|
|
<Astronav>
|
|
<div class="flex w-full lg:w-auto items-center justify-between">
|
|
<a href="/" class="text-lg">
|
|
{settings.icon && <img src={settings.icon} width="64" class="flex-1 inline">}
|
|
<span class="font-bold flex-2 text-ctp-blue">{settings.title}</span>
|
|
</a>
|
|
<div class="block lg:hidden">
|
|
<MenuIcon class="w-4 h-4 text-ctp-pink" />
|
|
</div>
|
|
</div>
|
|
<MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
|
|
<ul class="flex flex-col lg:flex-row lg:gap-3">
|
|
{ settings.navigation.map(({ label, url }) => (
|
|
<li>
|
|
<a href={url}
|
|
class="flex lg:px-3 py-2 items-center text-ctp-teal hover:text-ctp-green">
|
|
<span> {label}</span>
|
|
</a>
|
|
</li>
|
|
)) }
|
|
</ul>
|
|
<div class="lg:hidden flex items-center mt-3 gap-4">
|
|
{ settings.facebook && (
|
|
<a
|
|
class=""
|
|
href={facebook(settings.facebook)}
|
|
title="Facebook"
|
|
target="_blank"
|
|
rel="noopener"
|
|
> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-ctp-blue bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/> </svg>
|
|
</a>
|
|
)}
|
|
{settings.twitter && (
|
|
<a
|
|
class="gh-social-twitter"
|
|
href={twitter(settings.twitter)}
|
|
title="Twitter"
|
|
target="_blank"
|
|
rel="noopener"
|
|
><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-ctp-subtext1 bi bi-twitter-x" viewBox="0 0 16 16"> <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/> </svg>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</MenuItems>
|
|
</Astronav>
|
|
<div>
|
|
<div class="hidden lg:flex items-center gap-4">
|
|
{ settings.facebook && (
|
|
<a
|
|
class=""
|
|
href={facebook(settings.facebook)}
|
|
title="Facebook"
|
|
target="_blank"
|
|
rel="noopener"
|
|
><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-ctp-blue bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/> </svg>
|
|
</a>
|
|
)}
|
|
{settings.twitter && (
|
|
<a
|
|
class="gh-social-twitter"
|
|
href={twitter(settings.twitter)}
|
|
title="Twitter"
|
|
target="_blank"
|
|
rel="noopener"
|
|
><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-ctp-subtext1 bi bi-twitter-x" viewBox="0 0 16 16"> <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/> </svg>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</Container>
|