redi/astro_autoservices
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Мобильное меню появляется после скролла

Browse source
This commit is contained in:
Web-serfer 2026-05-11 21:55:57 +05:00
parent 2896cc2182
commit dd1a0d6dab
1 changed files with 8 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/Navbar.astro
View file

@ -36,7 +36,7 @@ const navItems = [
</div>
</nav>
<div id="mobile-bottom-bar" class="fixed bottom-2 left-2 right-2 xs:bottom-3 xs:left-3 xs:right-3 md:hidden z-40">
<div id="mobile-bottom-bar" class="fixed bottom-2 left-2 right-2 xs:bottom-3 xs:left-3 xs:right-3 md:hidden z-40 transition-all duration-300 translate-y-full opacity-0">
<div class="bg-white/90 backdrop-blur-xl rounded-xl xs:rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.12)] border border-gray-200/50 px-1.5 py-2 xs:px-2 xs:py-2.5">
<div class="flex justify-between items-center gap-0.5 xs:gap-1">
{navItems.map((item) => (
@ -78,6 +78,7 @@ const navItems = [
const navLinks = desktopNav.querySelectorAll('.nav-link');
const mobileNavItems = document.querySelectorAll('.mobile-nav-item');
const scrollProgress = document.getElementById('scroll-progress')!;
const mobileBottomBar = document.getElementById('mobile-bottom-bar')!;
let isScrolled = false;
@ -101,6 +102,9 @@ const navItems = [
link.classList.remove('text-white');
link.classList.add('text-[#1a1a1a]');
});
// Показать мобильное меню с анимацией
mobileBottomBar.classList.remove('translate-y-full', 'opacity-0');
mobileBottomBar.classList.add('translate-y-0', 'opacity-100');
} else {
navbar.classList.add('bg-transparent', 'py-5');
navbar.classList.remove('bg-white/90', 'backdrop-blur-md', 'shadow-sm', 'py-3');
@ -112,6 +116,9 @@ const navItems = [
link.classList.add('text-white');
link.classList.remove('text-[#1a1a1a]');
});
// Скрыть мобильное меню
mobileBottomBar.classList.add('translate-y-full', 'opacity-0');
mobileBottomBar.classList.remove('translate-y-0', 'opacity-100');
}
}
});