diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 81dd79a..6a72390 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -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');
       }
     }
   });