Переделал панель с кнопками #11

src/components/MyDropMenu.vue

@@ -20,7 +20,12 @@
                 </div>
 
                 <nav class="menu-content">
-                    <custom-button @click="openInfoCard(item)" v-for="item in informationForDirectory">{{ item.title }}</custom-button>
+                    <custom-button
+                        @click="openInfoCard(item)"
+                        v-for="item in informationForDirectory"
+                    >
+                        {{ item.title }}
+                    </custom-button>
                 </nav>
             </aside>
         </transition>
@@ -48,6 +53,7 @@ import {ref} from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
 import informationForDirectory from "../data/informationForDirectory";
+import {useEventListener} from "@vueuse/core";
 
 const isOpen = ref(false);
 const isModalVisible = ref(false);
@@ -72,6 +78,14 @@ function openInfoCard(obj) {
     infoCard.value = obj
 }
 
+const handleKeydown = (event) => {
+    if (event.code === "Escape" && isOpen.value) {
+        event.preventDefault();
+        closeMenu();
+    }
+};
+useEventListener("keydown", handleKeydown);
+
 // Экспортируем методы, если захотим управлять меню извне
 defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>
@@ -138,6 +152,17 @@ h1 {
     overflow-y: scroll;
     overflow: auto;
     border-right: white 2px solid;
+
+    //background: rgba(255, 255, 255, 0.2);
+    //backdrop-filter: blur(10px);
+    //-webkit-backdrop-filter: blur(10px);
+    //box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    //border-right: 2px solid rgba(255, 255, 255, 0.18);
+    /*
+        Эффект жидкого стекла
+        Оставил для обсуждения
+        Не удалять!
+    */
 }
 
 /* Затемнение фона */