---
import { twitter, facebook } from "@matthiesenxyz/astro-ghostcms/api";
import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
export type Props = {
  settings: Settings;
};
const { settings } = Astro.props as Props;
---

<header
  id="gh-head"
  class={`gh-head ${settings.cover_image ? "has-cover" : ""} js-header`}
>
  <nav class="gh-head-inner inner gh-container">
    <div class="gh-head-brand">
      <a class="gh-head-logo" href="/">
        {settings.logo && <img src={settings.logo} alt={settings.title} />}
        {!settings.logo && settings.title}
      </a>
      <a class="gh-burger" role="button">
        <div class="gh-burger-box">
          <div class="gh-burger-inner"></div>
        </div>
      </a>
    </div>
    <div class="gh-head-menu">
      <ul class="nav">
        {settings.navigation.map(({ label, url }) => (
          <li class="nav__item">
            <a href={url}>{label}</a>
          </li>
        ))}
      </ul>
    </div>
    <div class="gh-head-actions">
      <div class="gh-social">
        {settings.facebook && (
          <a
            class="gh-social-facebook"
            href={facebook(settings.facebook)}
            title="Facebook"
            target="_blank"
            rel="noopener"
          >
            <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" />
            </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" viewBox="0 0 32 32">
              <path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z" />
            </svg>
          </a>
        )}
      </div>
    </div>
  </nav>
</header>

<style lang="scss" is:global>
  .gh-head {
    padding: 1vmin 4vmin;
    font-size: 1.6rem;
    line-height: 1.3em;
    color: #fff;
    background: var(--ghost-accent-color);
  }

  .gh-head a {
    color: inherit;
    text-decoration: none;
  }

  .gh-head-inner {
    display: grid;
    grid-gap: 2.5vmin;
    grid-template-columns: auto auto 1fr;
    grid-auto-flow: row dense;
  }

  /* Brand
/* ---------------------------------------------------------- */

  .gh-head-brand {
    display: flex;
    align-items: center;
    height: 40px;
    max-width: 200px;
    text-align: center;
    word-break: break-all;
  }

  .gh-head-logo {
    display: block;
    padding: 10px 0;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2em;
    letter-spacing: -0.02em;
  }

  .gh-head-logo img {
    max-height: 26px;
  }

  /* Primary Navigation
/* ---------------------------------------------------------- */

  .gh-head-menu {
    display: flex;
    align-items: center;
    font-weight: 500;
  }

  .gh-head-menu .nav {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .gh-head-menu .nav li {
    margin: 0 2.5vmin 0 0;
    padding: 0;
  }

  .gh-head-menu .nav a {
    display: inline-block;
    padding: 5px 0;
    opacity: 0.8;
  }

  .gh-head-menu .nav a:hover {
    opacity: 1;
  }

  /* Secondary Navigation
/* ---------------------------------------------------------- */

  .gh-head-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    text-align: right;
  }

  .gh-head-actions-list {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
  }

  .gh-head-actions-list a:not([class]) {
    display: inline-block;
    margin: 0 0 0 1.5vmin;
    padding: 5px 0;
  }

  .gh-social {
    margin: 0 1.5vmin 0 0;
  }

  .gh-social a {
    opacity: 0.8;
  }

  .gh-social a + a {
    margin-left: 0.8rem;
  }

  .gh-social a:hover {
    opacity: 1;
  }

  .gh-social svg {
    height: 22px;
    width: 22px;
    fill: #fff;
  }

  .gh-social-facebook svg {
    height: 20px;
    width: 20px;
  }

  a.gh-head-button {
    display: block;
    padding: 8px 15px;
    color: var(--color-darkgrey);
    font-weight: 500;
    letter-spacing: -0.015em;
    font-size: 1.5rem;
    line-height: 1em;
    background: #fff;
    border-radius: 30px;
  }

  /* Mobile Menu Trigger
/* ---------------------------------------------------------- */

  .gh-burger {
    position: relative;
    display: none;
    cursor: pointer;
  }

  .gh-burger-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
  }

  .gh-burger-inner {
    width: 100%;
    height: 100%;
  }

  .gh-burger-box::before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    content: "";
    width: 100%;
    height: 1px;
    background: currentcolor;
    transition: transform 300ms cubic-bezier(0.2, 0.6, 0.3, 1),
      width 300ms cubic-bezier(0.2, 0.6, 0.3, 1);
    will-change: transform, width;
  }

  .gh-burger-inner::before,
  .gh-burger-inner::after {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    content: "";
    width: 100%;
    height: 1px;
    background: currentcolor;
    transition: transform 250ms cubic-bezier(0.2, 0.7, 0.3, 1),
      width 250ms cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform, width;
  }

  .gh-burger-inner::before {
    transform: translatey(-6px);
  }
  .gh-burger-inner::after {
    transform: translatey(6px);
  }

  body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
    transform: translatey(-8px);
  }
  body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
    transform: translatey(8px);
  }

  .gh-head-open .gh-burger-box::before {
    width: 0;
    transform: translatex(19px);
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1),
      width 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .gh-head-open .gh-burger-inner::before {
    width: 26px;
    transform: translatex(6px) rotate(135deg);
  }

  .gh-head-open .gh-burger-inner::after {
    width: 26px;
    transform: translatex(6px) rotate(-135deg);
  }

  /* Mobile Menu
/* ---------------------------------------------------------- */
  /* IDs needed to ensure sufficient specificity */

  @media (max-width: 900px) {
    .gh-burger {
      display: inline-block;
    }
    #gh-head {
      transition: all 0.4s ease-out;
      overflow: hidden;
    }
    #gh-head .gh-head-inner {
      height: 100%;
      grid-template-columns: 1fr;
    }
    #gh-head .gh-head-brand {
      position: relative;
      z-index: 10;
      grid-column-start: auto;
      max-width: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      user-select: none;
    }
    .home-template #gh-head .gh-head-brand {
      justify-content: flex-end;
    }
    #gh-head .gh-head-menu {
      align-self: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin: 0 0 10vh 0;
      font-weight: 300;
      font-size: 3.6rem;
      line-height: 1.1em;
    }
    #gh-head .gh-head-menu .nav li {
      margin: 5px 0;
    }
    #gh-head .gh-head-menu .nav a {
      padding: 8px 0;
    }
    #gh-head .gh-head-menu .nav {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #gh-head .gh-head-actions {
      padding: 20px 0;
      justify-content: center;
      text-align: left;
    }
    #gh-head .gh-head-actions a {
      margin: 0 10px;
    }
    /* Hide collapsed content */
    #gh-head .gh-head-actions,
    #gh-head .gh-head-menu {
      display: none;
    }
    /* Open the menu */
    .gh-head-open {
      overflow: hidden;
      height: 100vh;
    }
    .gh-head-open #gh-head {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 3999999;
      overflow-y: scroll;
    }
    .gh-head-open #gh-head .gh-head-inner {
      grid-template-rows: auto 1fr auto;
    }
    .gh-head-open #gh-head .gh-head-actions,
    .gh-head-open #gh-head .gh-head-menu {
      display: flex;
    }
  }

  @media (max-width: 600px) {
    #gh-head .gh-head-menu {
      font-size: 6vmin;
    }
  }

  .home-template .gh-head {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2000;
  }

  .home-template .gh-head.has-cover {
    background: transparent;
  }

  .home-template.gh-head-open .gh-head {
    background: var(--ghost-accent-color);
  }

  .home-template .gh-head-logo {
    display: none;
  }
  .home-template .gh-head-menu {
    margin-left: -2.5vmin;
  }
</style>

<script lang="ts">
  if (!window.handleMenu) {
    window.handleMenu = () => {
      // menu
      const burgerButton = document.querySelector(".gh-burger");
      if (burgerButton) {
        burgerButton.addEventListener("click", () => {
          const body = document.querySelector("body");
          body.classList.toggle("gh-head-open");
        });
      }
    };

    const callback = () => {
      window.handleMenu();
    };

    if (document.readyState === "complete") {
      callback();
    } else {
      document.addEventListener("DOMContentLoaded", callback);
    }
  }
  
</script>