jleibl.net/src/components/layout/MobileMenu.astro

---
import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";

const navItems = [
  { label: "About", href: "#about" },
  { label: "Work", href: "#work" },
  { label: "Blog", href: "#blog" },
  { label: "Contact", href: "#contact" },
];
---

<div class="mobile-menu">
  <button
    id="menu-btn"
    class="menu-btn"
    aria-label="Toggle mobile menu"
    aria-expanded="false"
    aria-controls="mobile-menu-panel"
  >
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </button>

  <div id="mobile-menu-panel" class="menu-panel">
    <div class="menu-content">
      <nav class="menu-nav">
        {
          navItems.map((item) => (
            <a href={item.href} class="menu-item">
              {item.label}
            </a>
          ))
        }
      </nav>

      <div class="menu-footer">
        <a href="mailto:jleibl@proton.me" class="contact-button">
          <span class="icon-wrapper">
            <FaEnvelope className="w-5 h-5" />
          </span>
          <span>Contact Me</span>
        </a>

        <div class="social-links">
          <a
            href="https://github.com/AtomicWasTaken"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="GitHub profile"
          >
            <FaGithub className="w-5 h-5" />
          </a>
          <a
            href="https://www.linkedin.com/in/janmarlonleibl/"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="LinkedIn profile"
          >
            <FaLinkedin className="w-5 h-5" />
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const menuBtn = document.getElementById("menu-btn");
    const menuPanel = document.getElementById("mobile-menu-panel");
    const menuItems = document.querySelectorAll(".menu-item");

    function toggleMenu() {
      if (!menuBtn || !menuPanel) return;

      const isOpen = menuBtn.classList.toggle("active");

      menuBtn.setAttribute("aria-expanded", isOpen.toString());
      menuPanel.classList.toggle("open", isOpen);

      document.body.style.overflow = isOpen ? "hidden" : "";
    }

    menuBtn?.addEventListener("click", toggleMenu);

    menuItems.forEach((item) => {
      item.addEventListener("click", toggleMenu);
    });

    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape" && menuPanel?.classList.contains("open")) {
        toggleMenu();
      }
    });
  });
</script>

<style>
  .mobile-menu {
    position: relative;
    z-index: 100;
  }

  .menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    position: relative;
    z-index: 101;
    transition: background-color 0.3s ease;
  }

  .menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .menu-btn .bar {
    display: block;
    width: 20px;
    height: 2px;
    background-color: white;
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  .menu-btn.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-btn.active .bar:nth-child(2) {
    opacity: 0;
  }

  .menu-btn.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 100;
  }

  .menu-panel.open {
    visibility: visible;
    opacity: 1;
  }

  .menu-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-top: 80px;
  }

  .menu-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
  }

  .menu-item {
    display: block;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: 500;
    color: white;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
  }

  .menu-footer {
    margin-top: auto;
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-weight: 500;
    transition: background-color 0.2s ease;
  }

  .contact-button:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
  }

  .social-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
  }

  .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    color: white;
    transition: background-color 0.2s ease;
  }

  .social-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
</style>