feat: redesign mobile menu with improved structure and styles
This commit is contained in:
@ -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 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="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 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="flex gap-4 justify-center mt-2">
|
||||
<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"
|
||||
>
|
||||
<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" />
|
||||
</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());
|
||||
menuBtn.setAttribute('aria-expanded', isOpen.toString());
|
||||
menuPanel.classList.toggle('open', isOpen);
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
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>
|
||||
Reference in New Issue
Block a user