Добавил описания к терминам, поправил стили

src/components/MyDropMenu.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="navigation-wrapper">
-        <button class="burger-btn" @click="toggleMenu" :class="{ 'is-active': isOpen }" aria-label="Menu">
+        <button class="burger-btn" @click="toggleMenu" aria-label="Menu">
             <span class="line"></span>
             <span class="line"></span>
             <span class="line"></span>
@@ -156,10 +156,6 @@ h1 {
     background-color: transparent !important;
 }
 
-.menu-list-item.is-active {
-    background-color: transparent !important;
-    padding-bottom: 20px;
-}
 
 .menu-content button{
     font-size: 1.2rem;
@@ -172,18 +168,6 @@ h1 {
     transition: all 0.3s ease;
 }
 
-.is-active .line:nth-child(1) {
-    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;
     top: 0;

src/components/UI/ListCard.vue

@@ -55,20 +55,22 @@ const imageSrc = computed(() => props.image || APP_LOGO)
     align-items: center;
     gap: 15px;
     padding: 15px;
+    padding-left: 15px;
     margin: 8px 12px;
     border-radius: 12px;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: background 0.2s ease, padding-left 0.25s ease;
     background: rgba(255, 255, 255, 0.05);
     box-sizing: border-box;
 }
 
 .list-card:hover {
-    background: rgba(35, 170, 227, 0.2);
+    background: rgb(31, 170, 230);
+    padding-left: 6px;
 }
 
 .list-card--active {
-    background: linear-gradient(135deg, #23aae3, #1a6d8f);
+    background:rgb(29, 149, 201);
     box-shadow: 0 4px 15px rgba(35, 170, 227, 0.3);
 }