Вынес термины в выпадающее меню

src/components/MyDropMenu.vue

@@ -1,34 +1,49 @@
 <template>
     <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">
+            <aside v-show="isOpen" class="side-panel scroll-strip">
                 <div class="menu-header">
                     <h1>SkyVue</h1>
                 </div>
 
-                <nav class="menu-content">
-                    <custom-button
-                        @click="openInfoCard(item)"
-                        v-for="item in informationForDirectory"
-                    >
-                        {{ item.title }}
-                    </custom-button>
-                </nav>
+                <el-menu
+                    class="menu-content"
+                    background-color="transparent"
+                    text-color="#ffffff"
+                    active-text-color="#23aae3"
+                >
+                    <el-sub-menu index="terms">
+                        <template #title>
+                            <span class="menu-content__group-title">Термины</span>
+                        </template>
+                        <el-menu-item
+                            v-for="(item, index) in informationForDirectory"
+                            :key="item.title"
+                            :index="`term-${index}`"
+                            class="terms-menu-item"
+                            @click="openInfoCard(item)"
+                        >
+                            <ListCard
+                                :title="item.title"
+                                :subtitle="getSubtitle(item.body)"
+                                :active="isModalVisible && infoCard.title === item.title"
+                            />
+                        </el-menu-item>
+                    </el-sub-menu>
+                </el-menu>
             </aside>
         </transition>
+
         <MyDialog isSuccess v-model:show="isModalVisible" @close="handleOkBtn">
             <template #header>
                 <strong>{{ infoCard.title }}</strong>
@@ -39,8 +54,7 @@
             <template #footer>
                 <div class="navigation-wrapper__footer">
                     <custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
-                    <custom-button :to="infoCard.hrefToDoc" title="Посмотреть в официальной документации">Документация
-                    </custom-button>
+                    <custom-button :to="infoCard.hrefToDoc" title="Посмотреть в официальной документации">Документация</custom-button>
                     <custom-button @click="handleOkBtn">ОК</custom-button>
                 </div>
             </template>
@@ -49,16 +63,22 @@
 </template>
 
 <script setup>
-import {ref} from 'vue';
+import { ref } from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
+import ListCard from '@/components/UI/ListCard.vue'
 import informationForDirectory from "../data/informationForDirectory";
-import {useEventListener} from "@vueuse/core";
+import { useEventListener } from "@vueuse/core";
 
 const isOpen = ref(false);
 const isModalVisible = ref(false);
 const infoCard = ref({})
 
+function getSubtitle(body) {
+    if (!body) return ''
+    return body.length > 72 ? `${body.slice(0, 72)}…` : body
+}
+
 function handleOkBtn() {
     isModalVisible.value = false
     isOpen.value = true
@@ -86,8 +106,7 @@ const handleKeydown = (event) => {
 };
 useEventListener("keydown", handleKeydown);
 
-// Экспортируем методы, если захотим управлять меню извне
-defineExpose({open: () => (isOpen.value = true), close: closeMenu});
+defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
 </script>
 
 <style scoped>
@@ -112,20 +131,46 @@ h1 {
 }
 
 .menu-content {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+    border-right: none;
+}
+
+.menu-content__group-title {
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.menu-content :deep(.el-sub-menu__title) {
+    border-radius: 10px;
+}
+
+.menu-content :deep(.el-sub-menu__title:hover) {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.terms-menu-item {
+    height: auto;
+    line-height: normal;
+    padding: 0;
+    margin-bottom: 4px;
+    white-space: normal;
+}
+
+.terms-menu-item :deep(.list-card) {
+    margin: 0;
+    width: 100%;
+}
+
+.terms-menu-item.is-active {
+    background-color: transparent !important;
 }
 
 .line {
     width: 100%;
     height: 4px;
     background-color: #383838;
-    /* Ярко-красный цвет для теста */
     transition: all 0.3s ease;
 }
 
-/* Анимация бургера в крестик */
 .is-active .line:nth-child(1) {
     transform: translateY(6px) rotate(45deg);
 }
@@ -138,23 +183,20 @@ h1 {
     transform: translateY(-6px) rotate(-45deg);
 }
 
-/* Боковая панель */
 .side-panel {
     position: fixed;
     top: 0;
     left: 0;
     width: 25%;
+    min-width: 280px;
     height: 100%;
     background-image: radial-gradient(#23aae3e2, #222222);
     color: white;
     z-index: 2;
-    padding: 0 20px 20px;
-    overflow-y: scroll;
-    overflow: auto;
+    padding: 0 12px 20px;
     border-right: white 2px solid;
 }
 
-/* Затемнение фона */
 .overlay {
     position: fixed;
     top: 0;
@@ -177,7 +219,6 @@ main {
     width: 100%;
 }
 
-/* Анимации появления */
 .slide-enter-active,
 .slide-leave-active {
     transition: transform 0.39s ease;

src/renderer.js

@@ -1,3 +1,8 @@
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import 'dayjs/locale/ru'
+import ru from 'element-plus/es/locale/lang/ru'
+
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
@@ -9,5 +14,6 @@ import ContextMenu from '@imengyu/vue3-context-menu'
 
 const app = createApp(App)
 app.use(router)
+app.use(ElementPlus, { locale: ru })
 app.use(ContextMenu)
 app.mount('#app')