---
    import Divider from "../misc/Divider.astro";
    import SocialLinks from "./SocialLinks.astro";
    import ThemeToggle from "../misc/ThemeToggle.astro";
---

<style>
    [data-shown="true"] {
        transform: translateX(0);
    }
</style>

<div id="menu" data-shown=""
    class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 -translate-x-full sm:-translate-x-full md:-translate-x-full lg:translate-x-0 xl:translate-x-0 2xl: transition-all duration-100 z-50">

    <button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden 2xl:hidden">
        <span class="material-symbols-outlined">
            close
        </span>
    </button>

    <a href="/">
        <div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-3 mb-6">
            <img class="rounded-full aspect-square w-full object-cover" src="/img/profile.jpg" alt="">
        </div>
    </a>

    <p class="text-2xl">Thomas Cole</p>
    <p class="font-thin text-sm">Developer, Linux Enthusiast, System Administrator</p>

    <SocialLinks />
    <Divider />

    <ul>
        <li class="flex">
            <a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
                <button class="p-2">Home</button>
            </a>
        </li>
        <li class="flex">
            <a href="/projects/1" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
                <button class="p-2">Projects</button>
            </a>
        </li>
        <li class="flex">
            <a href="/blog/1" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
                <button class="p-2">Blog</button>
            </a>
        </li>
        <li class="flex">
            <a href="/resume" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
                <button class="p-2">Resume/CV</button>
            </a>
        </li>
        <li class="flex">
            <a href="mailto:thomas.patrick.cole@gmail.com"
                class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
                <button class="p-2">Contact</button>
            </a>
        </li>
    </ul>

    <Divider />
    <ThemeToggle />
</div>

<div
    class="h-12 w-full sm:block md:block lg:hidden xl:hidden 2xl:hidden block bg-base-200 text-left transition-all duration-100">

    <button id="menubtn" class="w-12 h-12 m-auto">
        <span class="material-symbols-outlined mt-1">
            menu
        </span>
    </button>

</div>

<script is:inline>
    const btn = document.getElementById("menubtn");
    const menu = document.getElementById("menu");
    const closebtn = document.getElementById("menu-close")

    btn.addEventListener('click', () => {
        menu.dataset.shown = "true";
    });

    closebtn.addEventListener('click', () => {
        menu.dataset.shown = "false";
    })
</script>