Предварительный коммит по навигации в боковой панели

src/App.vue

@@ -1,11 +1,12 @@
 <script setup>
 import {ref, onMounted, h} from "vue";
-import izitoast from "./shared/izitoast";
+import izitoast from "@/shared/izitoast";
 import {useEventListener} from "@vueuse/core";
-import MyDialog from "./components/MyDialog.vue";
+import MyDialog from "@/components/MyDialog.vue";
-import MyDropMenu from "./components/MyDropMenu.vue";
+import MyDropMenu from "@/components/MyDropMenu.vue";
-import copyToclipboard from "./shared/copyToclipboard";
+import copyToclipboard from "@/shared/copyToclipboard";
 import ContextMenu from "@imengyu/vue3-context-menu";
+import CustomButton from '@/components/UI/CustomButton.vue'
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
@@ -214,6 +215,7 @@ function deletePointMap(item) {
         item.BgImg = 'images/ArUco-marker.jpg'
     }
 }
+
 function createIcon(src) {
     return h('img', {
         src: src,
@@ -223,6 +225,7 @@ function createIcon(src) {
         }
     })
 }
+
 function onContextMenu(e, item) {
     ContextMenu.showContextMenu({
         theme: 'mac dark',
@@ -293,24 +296,27 @@ function onContextMenu(e, item) {
         </div>
 
         <div class="actions">
-            <button @click="saveResult">Сохранить</button>
+            <custom-button class="actions__btn">Сохранить</custom-button>
-            <button @click="cleanResult">Очистить</button>
+            <custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
-            <button @click="cancel">Отменить</button>
+            <custom-button class="actions__btn" @click="cancel">Отменить</custom-button>
         </div>
         <MyDropMenu/>
     </div>
 
 
-    <MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
+    <MyDialog
-              :is-success=Boolean(listOfTrips.length)>
+        v-model:show="isModalVisible"
+        class="dialogWindow"
+        :is-success=Boolean(listOfTrips.length)
+    >
         <template #header>
             <strong v-if="listOfTrips.length">Код готов!</strong>
             <strong v-else>Код не готов!</strong>
         </template>
-        <template #body>
+        <main>
             <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
             <p v-else>Выстройте маршрут перед сохранением кода.</p>
-        </template>
+        </main>
         <template #footer>
             <div v-if="listOfTrips.length">
                 <button @click="handleDownloadBtn">Скачать код</button>
@@ -324,6 +330,7 @@ function onContextMenu(e, item) {
 <style>
 html {
     background-image: radial-gradient(#383838e2, #222222);
+    font-size: 18px;
 }
 
 :root {
@@ -356,7 +363,6 @@ html {
     transition: background-color 0.3s ease;
 
     color: white;
-    font-size: 18px;
     text-shadow: -1px -1px 0 black,
     1px -1px 0 black,
     -1px 1px 0 black,
@@ -380,19 +386,16 @@ html {
 }
 
 .actions {
-    margin-left: 10px;
+    margin: 3px 0 0 10px;
+
     display: flex;
     flex-direction: column;
+    gap: 10px;
+    width: 150px;
 }
 
 .actions button {
-    border: 2px solid rgb(251, 251, 251);
+    padding: 20px 35px;
-    padding: 15px 30px;
+    //background-color: red;
-    font-size: 15px;
-    background-color: #383838;
-    color: white;
-    cursor: pointer;
-    margin: 5px;
-    transition: 0.3s;
 }
 </style>

src/components/MyDialog.vue

@@ -1,21 +1,22 @@
 <template>
     <transition name="modal-fade">
-        <div class="modal-backdrop" @click="closeModal">
+        <div class="modal-backdrop" v-if="show" @click.stop="$emit('update:show', false)">
             <div class="modal" @click.stop>
                 <header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
                     <slot name="header">
                         <strong>Заголовок по умолчанию</strong>
                     </slot>
-                    <button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
+                    <button class="modal-btn-close" @click.stop="$emit('update:show', false)"
+                            aria-label="Закрыть модальное окно">
                         ×
                     </button>
                 </header>
                 <section class="modal-body">
-                    <slot name="body">Тело по умолчанию</slot>
+                    <slot>Тело по умолчанию</slot>
                 </section>
                 <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
                     <slot name="footer">
-                        <button @click="closeModal">Закрыть</button>
+                        <button @click.stop="$emit('update:show', false)">Закрыть</button>
                     </slot>
                 </footer>
             </div>
@@ -24,17 +25,16 @@
 </template>
 
 <script setup>
-const emit = defineEmits(['close'])
 const props = defineProps({
     isSuccess: {
         type: Boolean,
         required: true
+    },
+    show: {
+        type: Boolean,
+        default: false
     }
 })
-
-function closeModal() {
-    emit('close');
-}
 </script>
 
 <style>
@@ -48,6 +48,7 @@ function closeModal() {
     display: flex;
     justify-content: center;
     align-items: center;
+    z-index: 501;
 }
 
 .modal {

src/components/MyDropMenu.vue

@@ -1,120 +1,220 @@
 <template>
-  <div class="navigation-wrapper">
+    <div class="navigation-wrapper">
-    <!-- Кнопка Бургер -->
+        <!-- Кнопка Бургер -->
-    <button 
+        <button
-      class="burger-btn" 
+            class="burger-btn"
-      @click="toggleMenu" 
+            @click="toggleMenu"
-      :class="{ 'is-active': isOpen }"
+            :class="{ 'is-active': isOpen }"
-      aria-label="Menu"
+            aria-label="Menu"
-    >
+        >
-      <span class="line"></span>
+            <span class="line"></span>
-      <span class="line"></span>
+            <span class="line"></span>
-      <span class="line"></span>
+            <span class="line"></span>
-    </button>
+        </button>
 
-    <!-- Затемнение заднего фона (Overlay) -->
+        <!-- Затемнение заднего фона (Overlay) -->
-    <transition name="fade">
+        <transition name="fade">
-      <div v-if="isOpen" class="overlay" @click="closeMenu"></div>
+            <div v-if="isOpen" class="overlay" @click="closeMenu"></div>
-    </transition>
+        </transition>
 
-    <!-- Выпадающая панель -->
+        <!-- Выпадающая панель -->
-    <transition name="slide">
+        <transition name="slide">
-      <aside v-if="isOpen" class="side-panel">
+            <aside v-if="isOpen" class="side-panel">
-        <div class="menu-header">
+                <div class="menu-header">
-          <h1>SkyVue</h1>
+                    <h1>SkyVue</h1>
-        </div>
+                </div>
-        
+
-        <nav class="menu-content">
+                <nav class="menu-content">
-          <a href="https://clover.coex.tech/ru/simple_offboard.html" target="_blank">COEX Автономный полет</a>
+                    <custom-button @click="openInfoCard(link)" v-for="link in links">{{ link.title }}</custom-button>
-          <slot>
+                </nav>
-            <p class="placeholder">Здесь будут ваши ссылки...</p>
+            </aside>
-          </slot>
+        </transition>
-        </nav>
+        <MyDialog
-      </aside>
+            isSuccess
-    </transition>
+            v-model:show="isModalVisible"
-  </div>
+        >
+            <template #header>
+                <strong>{{ infoCard.title }}</strong>
+            </template>
+            <main>
+                <p>{{ infoCard.body }}</p>
+            </main>
+            <template #footer>
+                <custom-button title="Посмотреть на stepike">Курс</custom-button>
+                <custom-button title="Посмотреть в официальной документации">Документация</custom-button>
+                <custom-button>ОК</custom-button>
+            </template>
+        </MyDialog>
+    </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
+import MyDialog from "@/components/MyDialog.vue";
+import CustomButton from '@/components/UI/CustomButton.vue'
 
 const isOpen = ref(false);
+const isModalVisible = ref(false);
+const infoCard = ref({})
 
 const toggleMenu = () => {
-  isOpen.value = !isOpen.value;
+    isOpen.value = !isOpen.value;
 };
 
 const closeMenu = () => {
-  isOpen.value = false;
+    isOpen.value = false;
 };
 
+function openInfoCard(obj) {
+    isModalVisible.value = true
+    infoCard.value = obj
+}
+
+const links = [
+    {
+        title: 'Что такое ROS?',
+        body: 'ROS — переводится как robot operation system',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '2',
+        body: 'Информация для учащихся 2',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '3',
+        body: 'Информация для учащихся 3',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '4',
+        body: 'Информация для учащихся 4',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '5',
+        body: 'Информация для учащихся 5',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '6',
+        body: 'Информация для учащихся 6',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '7',
+        body: 'Информация для учащихся 7',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '8',
+        body: 'Информация для учащихся 8',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '9',
+        body: 'Информация для учащихся 9',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+    {
+        title: '0',
+        body: 'Информация для учащихся 0',
+        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
+        hrefToCourse: 'https://stepic.org'
+    },
+]
+
 // Экспортируем методы, если захотим управлять меню извне
-defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
+defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>
 
 <style scoped>
 .burger-btn {
-  position: fixed; /* Она всегда на одном месте при скролле */
+    position: fixed; /* Она всегда на одном месте при скролле */
-  top: 20px;
+    top: 20px;
-  left: 20px;
+    left: 20px;
-  z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
+    z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  justify-content: space-around;
+    justify-content: space-around;
-  width: 40px;      
+    width: 40px;
-  height: 30px;
+    height: 30px;
-  background: rgba(255, 255, 255, 0.508); 
+    background: rgba(255, 255, 255, 0.508);
-  border: 1px solid #383838;    
+    border: 1px solid #383838;
-  cursor: pointer;
+    cursor: pointer;
-  padding: 5px;
+    padding: 5px;
 }
-h1{
+
-  text-align: center;
+h1 {
+    text-align: center;
 }
+
 .line {
-  width: 100%;
+    width: 100%;
-  height: 4px;
+    height: 4px;
-  background-color: #383838; /* Ярко-красный цвет для теста */
+    background-color: #383838; /* Ярко-красный цвет для теста */
-  transition: all 0.3s ease;
+    transition: all 0.3s ease;
 }
 
 /* Анимация бургера в крестик */
-.is-active .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+.is-active .line:nth-child(1) {
-.is-active .line:nth-child(2) { opacity: 0; }
+    transform: translateY(6px) rotate(45deg);
-.is-active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
+}
+
+.is-active .line:nth-child(2) {
+    opacity: 0;
+}
+
+.is-active .line:nth-child(3) {
+    transform: translateY(-6px) rotate(-45deg);
+}
 
 /* Боковая панель */
 .side-panel {
-  position: fixed;
+    position: fixed;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
-  width: 300px;
+    width: 300px;
-  height: 100vh;
+    height: 100%;
-  background: white;
+    background: white;
-  z-index: 1000;
+    z-index: 1000;
-  padding: 0 20px 20px;
+    padding: 0 20px 20px;
+    overflow-y: scroll;
 }
 
 /* Затемнение фона */
 .overlay {
-  position: fixed;
+    position: fixed;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
-  width: 100vw;
+    width: 100vw;
-  height: 100vh;
+    height: 100vh;
-  z-index: 999;
+    z-index: 2;
 }
 
 /* Анимации появления */
-.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
+.slide-enter-active, .slide-leave-active {
-.slide-enter-from, .slide-leave-to { transform: translateX(-100%); }
+    transition: transform 0.3s ease;
+}
 
-.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
+.slide-enter-from, .slide-leave-to {
-.fade-enter-from, .fade-leave-to { opacity: 0; }
+    transform: translateX(-100%);
+}
 
-.placeholder {
+.fade-enter-active, .fade-leave-active {
-  color: #00e44c; 
+    transition: opacity 0.3s ease;
-  /* цвет текста */
+}
-  font-style: italic;
+
+.fade-enter-from, .fade-leave-to {
+    opacity: 0;
 }
 </style>

src/components/UI/CustomButton.vue

@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+    isSuccess: {
+        type: Boolean,
+        required: true
+    },
+    to: {
+        type: String,
+        default: null
+    }
+})
+
+</script>
+
+<template>
+    <a v-if="to" :href="props.to" class="btn">
+        <slot/>
+    </a>
+    <button v-else class="btn">
+        <slot/>
+    </button>
+</template>
+
+<style scoped>
+.btn {
+    border: 2px solid white;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 5px;
+    background-color: #383838;
+    color: white;
+    width: 100%;
+    font-size: 17px;
+}
+</style>