From 7b51b59b40e204bad52cf75af0715145b24dff77 Mon Sep 17 00:00:00 2001
From: alisagerasimova <alisa.gerasimova2008@mail.ru>
Date: Wed, 25 Feb 2026 21:17:21 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BF=D1=80=D0=B5=D0=B4=D0=B2=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B8=D1=82=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BC=D0=BC=D0=B8=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- сделала панель навигации
---
 src/App.vue                   |   2 +-
 src/components/MyDropMenu.vue | 130 ++++++++++++++++++++++++++--------
 2 files changed, 101 insertions(+), 31 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 59a5661..8b3bda9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -123,7 +123,7 @@ function copyAndToast(text) {
       <button @click="cleanResult">Очистить</button>
       <button @click="cleanResult">Отменить</button>
     </div>
-    <!-- <MyDropMenu/> -->
+    <MyDropMenu/>
   </div>
 
 
diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index de86a3a..1d7a56d 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -1,11 +1,37 @@
 <template>
-  <div class="dropdown">
-    <button @click="toggleDropdown">☰ Меню</button>
-    <ul v-show="isOpen" class="dropdown-menu-left">
-      <li><a href="#">Пункт 1</a></li>
-      <li><a href="#">Пункт 2</a></li>
-      <li><a href="#">Пункт 3</a></li>
-    </ul>
+  <div class="navigation-wrapper">
+    <!-- Кнопка Бургер -->
+    <button 
+      class="burger-btn" 
+      @click="toggleMenu" 
+      :class="{ 'is-active': isOpen }"
+      aria-label="Menu"
+    >
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+    </button>
+
+    <!-- Затемнение заднего фона (Overlay) -->
+    <transition name="fade">
+      <div v-if="isOpen" class="overlay" @click="closeMenu"></div>
+    </transition>
+
+    <!-- Выпадающая панель -->
+    <transition name="slide">
+      <aside v-if="isOpen" class="side-panel">
+        <div class="menu-header">
+          <h3>Навигация</h3>
+        </div>
+        
+        <nav class="menu-content">
+          <a href="https://clover.coex.tech/ru/simple_offboard.html" target="_blank">COEX Автономный полет</a>
+          <slot>
+            <p class="placeholder">Здесь будут ваши ссылки...</p>
+          </slot>
+        </nav>
+      </aside>
+    </transition>
   </div>
 </template>
 
@@ -14,35 +40,79 @@ import { ref } from 'vue';
 
 const isOpen = ref(false);
 
-function toggleDropdown() {
+const toggleMenu = () => {
   isOpen.value = !isOpen.value;
-}
+};
+
+const closeMenu = () => {
+  isOpen.value = false;
+};
+
+// Экспортируем методы, если захотим управлять меню извне
+defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
 </script>
 
-<style>
-.dropdown-menu-left {
-  position: absolute;
+<style scoped>
+.burger-btn {
+  position: fixed; /* Она всегда на одном месте при скролле */
+  top: 20px;
+  left: 20px;
+  z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 40px;      
+  height: 30px;
+  background: rgba(255, 255, 255, 0.508); 
+  border: 1px solid #383838;    
+  cursor: pointer;
+  padding: 5px;
+}
+
+.line {
+  width: 100%;
+  height: 4px;
+  background-color: #383838; /* Ярко-красный цвет для теста */
+  transition: all 0.3s ease;
+}
+
+/* Анимация бургера в крестик */
+.is-active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
+.is-active .line:nth-child(2) { opacity: 0; }
+.is-active .line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
+
+/* Боковая панель */
+.side-panel {
+  position: fixed;
+  top: 0;
   left: 0;
-  top: 100%;
-  background: #fff;
-  border: 1px solid #ccc;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  min-width: 150px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-  transform: translateX(-100%);
-  transition: transform 0.3s ease;
+  width: 300px;
+  height: 100vh;
+  background: white;
+  z-index: 1000;
+  padding: 80px 20px 20px;
 }
 
-.dropdown-menu-left li a {
-  display: block;
-  padding: 10px 15px;
-  text-decoration: none;
-  color: #333;
+/* Затемнение фона */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999;
 }
 
-.dropdown-menu-left li a:hover {
-  background: #f0f0f0;
+/* Анимации появления */
+.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
+.slide-enter-from, .slide-leave-to { transform: translateX(-100%); }
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+
+.placeholder {
+  color: #00e44c; 
+  /* цвет текста */
+  font-style: italic;
 }
-</style>
\ No newline at end of file
+</style>