modified: src/App.vue

change hamgurger menu into begushiybashkir site

begushiybashkir/bbvue/src/App.vue

@@ -3,7 +3,7 @@
     <header class="app-header">
       <div class="container header-container">
         <!-- Логотип -->
-        <router-link to="/">
+        <router-link to="/" class="logo-link">
           <div class="logo">
             <div class="logo-box">
               <img src="./assets/logo/Logo.png" alt="Little logo begushiy bashkir" class="little-logo">
@@ -27,8 +27,19 @@
           </button>
 
           <!-- Выпадающее меню -->
-          <div class="dropdown-menu" :class="{ 'active': isMobileMenuOpen }">
+          <div class="dropdown-menu" :class="{ 'active': isMobileMenuOpen }" ref="dropdownMenu">
             <nav class="dropdown-nav">
+              <div class="mobile-menu-header">
+                <div class="mobile-logo">
+                  <img src="./assets/logo/Logo.png" alt="Little logo begushiy bashkir" class="little-logo">
+                  <span>Бегущий Башкир</span>
+                </div>
+                <button class="close-menu" @click="closeMobileMenu" aria-label="Закрыть меню">
+                  ×
+                </button>
+              </div>
+              
+              <div class="dropdown-nav-content">
                 <router-link to="/" class="dropdown-nav-link" @click="closeMobileMenu">
                   🏠 Главная
                 </router-link>
@@ -60,6 +71,7 @@
                 <router-link to="/login" class="dropdown-nav-link accent" @click="closeMobileMenu">
                   🔐 Войти
                 </router-link>
+              </div>
             </nav>
           </div>
         </div>
@@ -69,7 +81,7 @@
     <!-- Оверлей для мобильных -->
     <div class="mobile-overlay" :class="{ 'active': isMobileMenuOpen }" @click="closeMobileMenu"></div>
 
-    <main class="main-content">
+    <main class="main-content" :class="{ 'menu-open': isMobileMenuOpen }">
       <router-view />
     </main>
 
@@ -93,12 +105,19 @@ export default {
   methods: {
     toggleMobileMenu() {
       this.isMobileMenuOpen = !this.isMobileMenuOpen
+      // Блокируем скролл body когда меню открыто на мобильных
+      if (window.innerWidth <= 767) {
+        document.body.style.overflow = this.isMobileMenuOpen ? 'hidden' : ''
+      }
     },
     closeMobileMenu() {
       this.isMobileMenuOpen = false
+      document.body.style.overflow = ''
     },
     handleClickOutside(event) {
-      if (!event.target.closest('.burger-menu-container') && this.isMobileMenuOpen) {
+      if (!event.target.closest('.burger-menu-container') && 
+          !event.target.closest('.dropdown-menu') && 
+          this.isMobileMenuOpen) {
         this.closeMobileMenu()
       }
     },
@@ -106,11 +125,32 @@ export default {
       if (event.key === 'Escape' && this.isMobileMenuOpen) {
         this.closeMobileMenu()
       }
+    },
+    handleResize() {
+      // Закрываем мобильное меню при переходе на десктоп
+      if (window.innerWidth > 767 && this.isMobileMenuOpen) {
+        this.closeMobileMenu()
+      }
+    },
+    handleTouchMove(event) {
+      // Обработка свайпа для закрытия меню на мобильных
+      if (this.isMobileMenuOpen && window.innerWidth <= 767) {
+        const touch = event.touches[0]
+        const startX = touch.clientX
+        const menu = this.$refs.dropdownMenu
+        
+        if (menu && startX < window.innerWidth * 0.3) {
+          event.preventDefault()
+          this.closeMobileMenu()
+        }
+      }
     }
   },
   mounted() {
     document.addEventListener('click', this.handleClickOutside)
     document.addEventListener('keydown', this.handleEscapeKey)
+    document.addEventListener('touchmove', this.handleTouchMove, { passive: false })
+    window.addEventListener('resize', this.handleResize)
     
     this.$router.afterEach(() => {
       this.closeMobileMenu()
@@ -119,6 +159,9 @@ export default {
   beforeUnmount() {
     document.removeEventListener('click', this.handleClickOutside)
     document.removeEventListener('keydown', this.handleEscapeKey)
+    document.removeEventListener('touchmove', this.handleTouchMove)
+    window.removeEventListener('resize', this.handleResize)
+    document.body.style.overflow = '' // Восстанавливаем скролл при размонтировании
   }
 }
 </script>
@@ -150,7 +193,7 @@ body {
 
 /* Header Styles */
 .app-header {
-  background-color: #2e8b5670;
+  background-color: #2e8b56;
   color: white;
   padding: 1rem 0;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -167,6 +210,11 @@ body {
 }
 
 /* Logo Styles */
+.logo-link {
+  text-decoration: none;
+  color: inherit;
+}
+
 .logo {
   display: flex;
   align-items: center;
@@ -178,8 +226,6 @@ body {
 .logo-box {
   display: flex;
   align-items: center;
-  font-family: 'LogoFont';
-  font-size: 2rem;
 }
 
 .little-logo {
@@ -257,6 +303,10 @@ body {
   transition: all 0.3s ease;
   border: 1px solid #e9ecef;
   margin-top: 10px;
+  max-height: 80vh; /* Ограничиваем высоту на десктопе */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .dropdown-menu.active {
@@ -268,7 +318,54 @@ body {
 .dropdown-nav {
   display: flex;
   flex-direction: column;
+  height: 100%;
+}
+
+.mobile-menu-header {
+  display: none; /* Скрываем на десктопе */
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background: #2e8b57;
+  color: white;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+
+.mobile-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  font-weight: bold;
+}
+
+.mobile-logo .little-logo {
+  width: 2rem;
+  height: 2rem;
+}
+
+.close-menu {
+  display: none; /* Скрываем на десктопе */
+  background: none;
+  border: none;
+  color: white;
+  font-size: 2rem;
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background-color 0.3s ease;
+}
+
+.close-menu:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.dropdown-nav-content {
+  flex: 1;
   padding: 1rem 0;
+  overflow-y: auto; /* Включаем скролл при необходимости */
 }
 
 .dropdown-nav-link {
@@ -280,6 +377,7 @@ body {
   transition: all 0.3s ease;
   font-size: 1rem;
   border-left: 3px solid transparent;
+  white-space: nowrap;
 }
 
 .dropdown-nav-link:hover {
@@ -324,7 +422,7 @@ body {
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
-  z-index: 999;
+  z-index: 998;
 }
 
 .mobile-overlay.active {
@@ -336,6 +434,11 @@ body {
 .main-content {
   min-height: calc(100vh - 140px);
   padding: 2rem 0;
+  transition: filter 0.3s ease;
+}
+
+.main-content.menu-open {
+  filter: blur(2px);
 }
 
 /* Footer */
@@ -363,10 +466,6 @@ body {
     padding: 1.2rem 2rem;
     font-size: 1.1rem;
   }
-
-  .logo {
-    font-size: 1.4rem;
-  }
 }
 
 /* Tablet (768px - 1023px) */
@@ -380,13 +479,8 @@ body {
     font-size: 1.05rem;
   }
 
-  .logo {
-    font-size: 1.3rem;
-  }
-
   .team {
     display: none;
-    /* Скрываем team на планшетах */
   }
 }
 
@@ -397,25 +491,37 @@ body {
     top: 0;
     right: -100%;
     width: 85%;
-    max-width: 350px;
+    max-width: 320px;
     height: 100vh;
     border-radius: 0;
     margin-top: 0;
     transition: right 0.3s ease;
-    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
+    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
+    max-height: 100vh;
+    overflow: hidden;
   }
 
   .dropdown-menu.active {
     right: 0;
   }
 
-  .dropdown-nav {
+  .mobile-menu-header {
-    padding-top: 4rem;
+    display: flex;
-    height: 100%;
+    flex-shrink: 0;
+  }
+
+  .close-menu {
+    display: flex;
+  }
+
+  .dropdown-nav-content {
+    padding: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
   }
 
   .dropdown-nav-link {
-    padding: 1.3rem 1.5rem;
+    padding: 1.4rem 1.5rem;
     font-size: 1.1rem;
     border-left: none;
     border-bottom: 1px solid #f0f0f0;
@@ -429,39 +535,11 @@ body {
   }
 
   .logo {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
   }
 
   .team {
     display: none;
-    /* Скрываем team на мобильных */
-  }
-
-  .little-logo {
-    width: 2.2rem;
-    height: 2.2rem;
-  }
-
-  .container {
-    padding: 0 15px;
-  }
-}
-
-/* Small Mobile (480px and below) */
-@media (max-width: 480px) {
-  .dropdown-menu {
-    width: 100%;
-    max-width: none;
-  }
-
-  .dropdown-nav-link {
-    padding: 1.4rem 1.5rem;
-    font-size: 1.2rem;
-  }
-
-  .logo {
-    font-size: 1.1rem;
-    gap: 0.3rem;
   }
 
   .little-logo {
@@ -469,9 +547,70 @@ body {
     height: 2rem;
   }
 
+  .container {
+    padding: 0 15px;
+  }
+
+  /* Отключаем скролл body когда меню открыто */
+  body.menu-open {
+    overflow: hidden;
+  }
+}
+
+/* Small Mobile (480px and below) */
+@media (max-width: 480px) {
+  .dropdown-menu {
+    width: 90%;
+    max-width: none;
+  }
+
+  .dropdown-nav-link {
+    padding: 1.3rem 1.5rem;
+    font-size: 1rem;
+  }
+
+  .logo {
+    font-size: 1rem;
+    gap: 0.3rem;
+  }
+
+  .little-logo {
+    width: 1.8rem;
+    height: 1.8rem;
+  }
+
   .main-content {
     padding: 1rem 0;
   }
+
+  .mobile-menu-header {
+    padding: 1rem;
+  }
+
+  .mobile-logo {
+    font-size: 0.9rem;
+  }
+
+  .mobile-logo .little-logo {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+}
+
+/* Очень маленькие экраны (360px и меньше) */
+@media (max-width: 360px) {
+  .dropdown-menu {
+    width: 95%;
+  }
+
+  .dropdown-nav-link {
+    padding: 1.2rem 1rem;
+    font-size: 0.95rem;
+  }
+
+  .logo-box:nth-child(2) {
+    display: none; /* Скрываем текст логотипа на очень маленьких экранах */
+  }
 }
 
 /* Large Desktop (1440px and above) */
@@ -486,6 +625,24 @@ body {
   }
 }
 
+/* Стили для скроллбара в меню */
+.dropdown-nav-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.dropdown-nav-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.dropdown-nav-content::-webkit-scrollbar-thumb {
+  background: #2e8b57;
+  border-radius: 2px;
+}
+
+.dropdown-nav-content::-webkit-scrollbar-thumb:hover {
+  background: #26734a;
+}
+
 /* Button Styles */
 .btn {
   display: inline-block;
@@ -540,7 +697,6 @@ body {
     opacity: 0;
     transform: translateY(-10px);
   }
-
   to {
     opacity: 1;
     transform: translateY(0);
@@ -550,4 +706,9 @@ body {
 .dropdown-menu.active {
   animation: slideIn 0.3s ease;
 }
+
+/* Поддержка свайпа */
+.dropdown-menu {
+  touch-action: pan-y;
+}
 </style>