From 082d6e5082cd823eeabbbaa7b9a5464f4027d385 Mon Sep 17 00:00:00 2001
From: Yro Boros <morpex1698@mail.ru>
Date: Tue, 3 Mar 2026 19:30:14 +1000
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B1=D0=BE=D1=87=D0=B8=D0=B9=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=BE=D0=B5=D0=BA=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/main.css            |  4 +++
 src/components/My_naw.vue      | 53 +++++++++++++++++-----------------
 src/components/ThemeToggle.vue |  2 +-
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 6a54645..ed14fc6 100644
--- a/src/assets/main.css
+++ b/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;
diff --git a/src/components/My_naw.vue b/src/components/My_naw.vue
index bf7314a..47dadd1 100644
--- a/src/components/My_naw.vue
+++ b/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>
 
diff --git a/src/components/ThemeToggle.vue b/src/components/ThemeToggle.vue
index 625ba12..7297dfb 100644
--- a/src/components/ThemeToggle.vue
+++ b/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 ? 'Переключить на светлую тему' : 'Переключить на темную тему'"
     >