---
import Header from "./Header.astro";
---

<aside transition:persist>
    <Header/>
    <nav>
        <ul>
            <li><a href="/">landing</a></li>
            <li><a href="/about">about</a></li>
            <li><a href="/socials">socials</a></li>
            <li><a href="/projects">projects</a></li>
        </ul>
    </nav>
</aside>
<style>
    aside {
        position: sticky;
        top: 0;
        left: 0;
        height: 100vh;

        color: #eeeeee;
        background-color: #181818;
    }

    /* mobile */
    @media screen and (max-width: 600px) {
        aside {
            position: initial;
            height: auto;
        }
    }

    nav ul {
        padding-left: 1em;
        margin: 1.5em;
        
        white-space: nowrap;
    }

    nav li {
        list-style-type: "/ ";
    }
</style>