---
import SidebarLink from './SidebarLink.astro';
import Blazestar from './Blazestar.astro';
import NotesLinks from './NotesLinks.astro';
import SocialLinks from './SocialLinks.astro';
---

<header>
	<nav>
    <h1><Blazestar /></h1>
		<div class="internal-links">
			<SidebarLink href="/">Home</SidebarLink>
			<SidebarLink href="/blog">Blog</SidebarLink>
			<SidebarLink href="/about">About</SidebarLink>
      <NotesLinks />
		</div>
		<div class="social-links">
      <SocialLinks />
		</div>
	</nav>
</header>
<style>
	header {
		margin: 0;
		padding: 0 1em;
	}

	h1 {
		margin-bottom: 0.5em;
    font-size: 1.5em;
	}

	h1 a,
	h1 a.active {
		text-decoration: none;
	}

	nav {
		display: flex;
    flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
    gap: 16px;
    a {
      color: var(--color-light-text);
      text-decoration: none;

      &:hover {
        color: var(--color-accent);
      }

      &.active {
        text-decoration: none;
      }
    }
  }
  .internal-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
</style>