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 8cbd6fdb8c
commit d44cd74d14
1 changed files with 201 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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