jleibl/jleibl.net
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign mobile menu with improved structure and styles

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-03-13 20:57:29 +01:00
parent cc4ce23dcd
commit 1f2304144c
1 changed files with 201 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

311
src/components/layout/MobileMenu.astro
View File

@ -9,67 +9,61 @@ const navItems = [
]; ];
--- ---
<div class="mobile-menu-container"> <div class="mobile-menu">
<button <button
id="menu-toggle" id="menu-btn"
class="p-2 theme-accent rounded-xl flex flex-col justify-center items-center gap-1.5 border theme-border overflow-hidden" class="menu-btn"
aria-label="Toggle mobile menu" aria-label="Toggle mobile menu"
aria-expanded="false" aria-expanded="false"
aria-controls="mobile-nav" aria-controls="mobile-menu-panel"
> >
<span class="block w-5 h-0.5 theme-primary transition-all duration-300 transform bar-1"></span> <span class="bar"></span>
<span class="block w-5 h-0.5 theme-primary transition-all duration-300 transform bar-2"></span> <span class="bar"></span>
<span class="block w-5 h-0.5 theme-primary transition-all duration-300 transform bar-3"></span> <span class="bar"></span>
</button> </button>
<div <div id="mobile-menu-panel" class="menu-panel">
id="mobile-nav" <div class="menu-content">
class="fixed inset-0 z-50 invisible opacity-0 flex flex-col justify-start items-stretch pt-24 nav-glass transition-all duration-300 transform translate-x-full" <nav class="menu-nav">
aria-hidden="true" {navItems.map((item) => (
> <a
<nav class="px-6 sm:px-8 pt-6 pb-12 flex flex-col gap-4"> href={item.href}
{navItems.map((item) => ( class="menu-item"
<a >
href={item.href} {item.label}
class="mobile-nav-item py-3 px-6 theme-secondary text-lg font-medium rounded-xl theme-accent border theme-border transition-all duration-300 hover:theme-primary" </a>
aria-label={`Go to ${item.label} section`} ))}
> </nav>
{item.label}
</a>
))}
</nav>
<div class="px-6 sm:px-8 py-6 mt-auto border-t theme-border flex flex-col gap-5"> <div class="menu-footer">
<a <a
href="mailto:jleibl@proton.me" href="mailto:jleibl@proton.me"
class="flex items-center justify-center gap-2 py-3 bg-white/10 text-white rounded-xl hover:bg-white/15 transition-all duration-300 shadow-sm" class="contact-button"
aria-label="Contact me via email" >
> <span class="icon-wrapper">
<span class="p-1 rounded-lg bg-white/5"> <FaEnvelope className="w-5 h-5" />
<FaEnvelope className="w-5 h-5" /> </span>
</span> <span>Contact Me</span>
<span class="text-base font-medium font-['Instrument_Sans']">Contact Me</span> </a>
</a>
<div class="flex gap-4 justify-center mt-2"> <div class="social-links">
<a <a
href="https://github.com/AtomicWasTaken" href="https://github.com/AtomicWasTaken"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label="GitHub profile" aria-label="GitHub profile"
class="p-3 rounded-xl bg-black/10 hover:bg-black/15 transition-all" >
> <FaGithub className="w-5 h-5" />
<FaGithub className="w-5 h-5 text-white" /> </a>
</a> <a
<a href="https://www.linkedin.com/in/janmarlonleibl/"
href="https://www.linkedin.com/in/janmarlonleibl/" target="_blank"
target="_blank" rel="noopener noreferrer"
rel="noopener noreferrer" aria-label="LinkedIn profile"
aria-label="LinkedIn profile" >
class="p-3 rounded-xl bg-black/10 hover:bg-black/15 transition-all" <FaLinkedin className="w-5 h-5" />
> </a>
<FaLinkedin className="w-5 h-5 text-white" /> </div>
</a>
</div> </div>
</div> </div>
</div> </div>
@ -77,65 +71,29 @@ const navItems = [
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.getElementById('menu-toggle'); const menuBtn = document.getElementById('menu-btn');
const mobileNav = document.getElementById('mobile-nav'); const menuPanel = document.getElementById('mobile-menu-panel');
const mobileNavItems = document.querySelectorAll('.mobile-nav-item'); const menuItems = document.querySelectorAll('.menu-item');
let isMenuOpen = false;
function toggleMenu() { function toggleMenu() {
isMenuOpen = !isMenuOpen; if (!menuBtn || !menuPanel) return;
if (menuToggle) { const isOpen = menuBtn.classList.toggle('active');
menuToggle.setAttribute('aria-expanded', isMenuOpen.toString());
menuToggle.classList.toggle('active', isMenuOpen);
}
if (mobileNav) { menuBtn.setAttribute('aria-expanded', isOpen.toString());
mobileNav.setAttribute('aria-hidden', (!isMenuOpen).toString()); menuPanel.classList.toggle('open', isOpen);
if (isMenuOpen) { document.body.style.overflow = isOpen ? 'hidden' : '';
mobileNav.classList.remove('invisible', 'opacity-0', 'translate-x-full');
mobileNav.classList.add('opacity-100', 'translate-x-0');
document.body.style.overflow = 'hidden';
mobileNavItems.forEach((item, index) => {
setTimeout(() => {
item.classList.add('show');
}, 100 + (index * 50));
});
} else {
mobileNav.classList.remove('opacity-100', 'translate-x-0');
mobileNav.classList.add('opacity-0', 'translate-x-full');
document.body.style.overflow = '';
setTimeout(() => {
if (!isMenuOpen) {
mobileNav.classList.add('invisible');
mobileNavItems.forEach(item => {
item.classList.remove('show');
});
}
}, 300);
}
}
} }
menuToggle?.addEventListener('click', toggleMenu); menuBtn?.addEventListener('click', toggleMenu);
mobileNavItems.forEach(item => { menuItems.forEach(item => {
item.addEventListener('click', () => { item.addEventListener('click', toggleMenu);
toggleMenu();
});
});
document.addEventListener('click', (e) => {
if (isMenuOpen && mobileNav && e.target instanceof Node && !mobileNav.contains(e.target) && e.target !== menuToggle) {
toggleMenu();
}
}); });
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (isMenuOpen && e.key === 'Escape') { if (e.key === 'Escape' && menuPanel?.classList.contains('open')) {
toggleMenu(); toggleMenu();
} }
}); });
@ -143,26 +101,161 @@ const navItems = [
</script> </script>
<style> <style>
#menu-toggle.active .bar-1 { .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); transform: translateY(8px) rotate(45deg);
} }
#menu-toggle.active .bar-2 { .menu-btn.active .bar:nth-child(2) {
opacity: 0; opacity: 0;
} }
#menu-toggle.active .bar-3 { .menu-btn.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg);
} }
.mobile-nav-item { .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; opacity: 0;
transform: translateY(10px); transition: all 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; z-index: 100;
} }
.mobile-nav-item.show { .menu-panel.open {
visibility: visible;
opacity: 1; opacity: 1;
transform: translateY(0); }
.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> </style>