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>