---
import MainLogo from "../logos/MainLogo.astro";
import Anchor from "../buttons/Anchor.astro";
import NavLink from "./NavLink.astro";

const { id, ...rest } = Astro.props;
---

<slot name="diatas-header" />
<header class:list={["header"]} {...rest}>
    <div class="header-wrapper">
        <MainLogo />

        <div class="navigation">
            <NavLink Dropdown
                >عن المعهد
                <div slot="dropdown">
                    <NavLink link="/tentang/yayasan">المؤسسة</NavLink>
                    <NavLink link="/tentang/kerjasama-pendidikan">التعاون التعليمي</NavLink>
                    <NavLink link="/tentang/dakwah-sosial">الدعوة والمجتمع</NavLink>
                    <NavLink link="/tentang/upz">وحدة خدمة الزكاة</NavLink>
                </div>
            </NavLink>
            <NavLink Dropdown
                >المدرسة
                <div slot="dropdown">
                    <NavLink link="/sekolah/sdtq">المرحلة الابتدائية </NavLink>
                    <NavLink link="/sekolah/smp">المرحلة المتوسطة</NavLink>
                    <NavLink link="/sekolah/sma">المرحلة الثانوية</NavLink>
                    <NavLink link="/sekolah/jamiyatul-lughoh">جمعية اللغة لمعهد الوافي</NavLink>
                    <NavLink link="/sekolah/jamiyatul-quran">جمعية القرآن الكريم </NavLink>
                    <NavLink link="https://alwafi.ac.id" target="_blank">المعهد العالي<i class="ri-external-link-line"></i></NavLink>
                </div>
            </NavLink>
            <NavLink link="/overseas/program-overseas">
                الدراسة في الخارج
            </NavLink>
            <NavLink link="/alumni/biro-bekal">
                الخريجون ومكتب بيكال
            </NavLink>
            <NavLink link="https://arabic.al-wafi.sch.id/news">الأخبار <i class="ri-external-link-line"></i></NavLink>
            <Anchor type="primary" isDaftar>pendaftaran</Anchor>
        </div>

        <div class="menu-toggle">
            <span></span>
            <span></span>
            <span></span>
        </div>

        <div class="overlay"></div>
    </div>
</header>

<script type="module">
    let menuToggle = document.querySelector(".menu-toggle");
    let navigation = document.querySelector(".navigation");
    let overlayMenu = document.querySelector(".overlay");

    menuToggle.onclick = function () {
        menuToggle.classList.toggle("active");
        navigation.classList.toggle("active");
        overlayMenu.classList.toggle("active");
    };
</script>

<style type="text/css">
    header {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        background-color: var(--color-surface-01);
        box-shadow: var(--shadow-smooth-00);
        z-index: 100;

        .header-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: var(--width-full);
            margin: 0 auto;
            padding: var(--space-04);
        }

        .overlay {
            display: none;
        }

        .navigation {
            display: flex;
            align-items: center;
        }

        .menu-toggle {
            --_size: 45px;
            position: relative;
            width: var(--_size);
            height: var(--_size);
            right: var(--space-04);
            border-radius: 10px;
            display: none;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            z-index: 110;

            & span {
                position: absolute;
                width: 40px;
                height: 4px;
                border-radius: 4px;
                background: var(--color-accent-02);
                transition: 0.5s;

                &:nth-child(2) {
                    transform: translateY(-15px);
                    width: 40px;
                    left: 0px;
                }

                &:nth-child(3) {
                    transform: translateY(15px);
                    width: 40px;
                    left: 0px;
                }
            }
        }

        .menu-toggle.active span:nth-child(1) {
            transform: translateX(60px);
        }

        .menu-toggle.active span:nth-child(2) {
            width: 40px;
            transform: translateX(0) rotate(45deg);
            transition-delay: 0.2s;
        }

        .menu-toggle.active span:nth-child(3) {
            width: 40px;
            transform: translateX(0) rotate(-45deg);
            transition-delay: 0.4s;
        }
    }

    @media screen and (max-width: 768px) {

        header {
            overflow: visible;

            .header-wrapper {
                overflow: visible;
            }

            .menu-toggle {
                display: flex;
            }

            .overlay {
                position: fixed;
                display: block;
                top: 0;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 100vh;
                background-color: rgba(0, 0, 0, 0.5);
                visibility: hidden;
                opacity: 0;
                transition: 
                    opacity 0.7s ease,
                    visibility 0.7s ease;
                z-index: 49;
            }
            
            .overlay.active {
                visibility: visible;
                opacity: 1;
            }

            .navigation {
                position: fixed;
                top: 0;
                right: -100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                height: 100%;
                width: 80%;
                padding: 100px var(--space-08);
                gap: var(--space-04);
                border-radius: var(--radius-04);
                background-color: var(--color-surface-01);
                transition: right .3s linear;
                overflow-y: scroll;
                overflow-x: hidden;
                z-index: 50;

                .btn {
                    padding: var(--space-04);
                    min-width: 100%;
                }
            }

            .navigation.active {
                right: 0;
            }

            .nav-item {
                position: relative;
                display: flex;
                flex-direction: column;
                width: 100%;
                height: max-content;
            }

            .navigation-link {
                display: flex;
                align-items: center;
                padding: var(--space-02) var(--space-04);
                width: 100%;
                transition: var(--transition-01);
            }
        }
    }
</style>