Initial commit

src/components/Header.astro

@@ -0,0 +1,65 @@
+---
+import Navigation from '../components/Navigation.astro'
+import { SkipLinks } from 'accessible-astro-components'
+import { Icon } from 'astro-icon/components'
+---
+
+<header>
+  <SkipLinks />
+  <Navigation>
+    <li class="menu-item">
+      <a href="/">Home</a>
+    </li>
+    <li class="menu-item">
+      <a href="/blog/">Blog</a>
+    </li>
+    <li class="menu-item has-dropdown">
+      <button aria-haspopup="true" aria-expanded="false">Example Pages</button>
+      <ul class="dropdown-menu">
+        <li class="submenu-item">
+          <a href="/mdx-page/">MDX Page</a>
+        </li>
+        <li class="submenu-item">
+          <a href="/markdown-page/">Markdown Page</a>
+        </li>
+        <li class="submenu-item">
+          <a href="/accessible-components">Accessible Components</a>
+        </li>
+      </ul>
+    </li>
+    <li class="menu-item">
+      <a href="https://accessible-astro.dev" title="external link" rel="external noopener noreferrer">External Link</a>
+    </li>
+    <li class="menu-item type-icon">
+      <a href="https://github.com/markteekman/accessible-astro-starter" title="Go to the GitHub page">
+        <Icon name="ion:logo-github" />
+      </a>
+    </li>
+  </Navigation>
+</header>
+
+<style lang="scss" is:global>
+  @use '../assets/scss/base/outline' as *;
+
+  header {
+    .type-icon a {
+      display: block;
+
+      [data-icon] {
+        height: auto;
+        margin-top: -4px;
+        width: 30px;
+
+        path {
+          fill: var(--action-color);
+        }
+      }
+
+      &:hover {
+        [data-icon] path {
+          fill: var(--action-color-state);
+        }
+      }
+    }
+  }
+</style>