simplex-chat/website/src/_includes/nav.html

<header>
    <nav class="container">
        <div class="flex items-center gap-[16px] h-full">
            <a href="/">
                <img alt="simplex logo" class="logo" src="/img/simplex.svg" />
            </a>

            <div class="hidden lg:flex gap-[16px]">
                <a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
                    href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
                <a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
                    href="/#comparison">Comparison</a>
                <a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
            </div>
        </div>

        <div class="flex gap-4">
            <div class="nav__buttons">
                <div class="github">
                    <a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
                        data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
                </div>

                <div class="donate d-none-576">
                    <a href="https://opencollective.com/simplex-chat" target="_blank">
                        <span class="button">Donate</span></a>
                </div>
            </div>

            <div class="toggle self-stretch">
                <label class="toggle-btn"><span></span></i></label>
            </div>
        </div>
    </nav>

    <div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
        <a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
            href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
        <a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
            href="/#comparison">Comparison</a>
        <a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
            href="/blog">Blog</a>
    </div>
</header>

<script>
    const toggleBtn = document.querySelector(".toggle-btn")

    toggleBtn.addEventListener("click", () => {
        if (toggleBtn.classList.contains("active-toggle-btn")) {
            console.log("unchecked")
            document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
            toggleBtn.classList.remove("active-toggle-btn")
        } else {
            console.log("checked")
            document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
            toggleBtn.classList.add("active-toggle-btn")
        }
    })
</script>

<style>
    header {
        overflow: hidden;
    }

    /* ====== NAV TOGGLE BUTTON ====== */
    .toggle {
        display: none;
    }

    .toggle-btn {
        height: 100%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-btn span {
        width: 20px;
        height: 2px;
        background-color: #062d56;
        position: relative;
    }

    .toggle-btn span::after,
    .toggle-btn span::before {
        content: "";
        width: 100%;
        height: 100%;
        background-color: #062d56;
        position: absolute;
        left: 0;
    }

    span::before {
        top: -8px;
    }

    span::after {
        top: 8px;
    }

    /* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
    .active-toggle-btn span {
        background-color: transparent;
    }

    .active-toggle-btn span::before {
        top: 0;
        transform: rotate(45deg);
        background-color: #062d56;
    }

    .active-toggle-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #062d56;
    }

    .mobile-nav {
        display: none;
        transform: translateX(-100%);
        transition: transform 0.5s ease-out;
    }

    .mobile-nav-active {
        display: block;
        transform: translateX(0%);
        transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
    }

    @media (max-width: 1024px) {
        .toggle {
            display: inline-block;
        }
    }
</style>