Рабочий проект

src/assets/main.css

@@ -1,5 +1,9 @@
 @import "tailwindcss";
 
+/* Включение dark mode через класс в Tailwind v4 */
+/* stylelint-disable-next-line at-rule-no-unknown */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* Базовые стили для светлой темы */
 body {
   background-color: #f3f4f6;

src/components/My_naw.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 w-full sm:w-1/5 sm:h-screen bg-white z-10 pt-5 md:p-5 dark:bg-gray-800"
+    class="sticky top-0 w-full sm:w-1/5 sm:h-screen bg-white z-10 pt-5 md:p-5 dark:bg-gray-800 flex sm:justify-between flex-col"
   >
     <div class="">
       <!-- Фиксированный левый блок -->
@@ -49,32 +49,33 @@
           Избранное
         </button>
       </div>
-      <!-- Переключатель темы -->
-      <ThemeToggle />
-    </div>
-
-    <div v-if="currentPage === 'status'" class="flex sm:flex-col">
-      <button
-        @click="ValueRezylt"
-        class="bg-gray-300 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
-      >
-        Результат
-      </button>
-
-      <button
-        @click="ValueSeting"
-        class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
-      >
-        Настройка
-      </button>
-
-      <button
-        @click="Valuestatus"
-        class="bg-gray-600 sm:mt-3 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
-      >
-        Избранное
-      </button>
+
+      <div v-if="currentPage === 'status'" class="flex sm:flex-col">
+        <button
+          @click="ValueRezylt"
+          class="bg-gray-300 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
+        >
+          Результат
+        </button>
+
+        <button
+          @click="ValueSeting"
+          class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
+        >
+          Настройка
+        </button>
+
+        <button
+          @click="Valuestatus"
+          class="bg-gray-600 sm:mt-3 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
+        >
+          Избранное
+        </button>
+      </div>
     </div>
+    <!-- Переключатель темы -->
+     <div class="hidden  sm:block"><ThemeToggle /></div>
+    
   </div>
 </template>
 

src/components/ThemeToggle.vue

@@ -42,7 +42,7 @@ watch(isDark, applyTheme);
     <!-- Переключатель (toggle switch) -->
     <button
       @click="toggleTheme"
-      class="relative inline-flex h-8 w-14 items-center rounded-full transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      class="relative inline-flex h-8 w-14 items-center rounded-full transition-colors duration-300 cursor-pointer"
       :class="isDark ? 'bg-gray-700' : 'bg-gray-300'"
       :aria-label="isDark ? 'Переключить на светлую тему' : 'Переключить на темную тему'"
     >