<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 flex sm:justify-between flex-col"
  >
    <div class="">
      <!-- Фиксированный левый блок -->
      <div v-if="currentPage === 'rezylt'" class="flex sm:flex-col">
        <button
          @click="ValueRezylt"
          class="bg-gray-600 w-full text-white min-w-30 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-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
        >
          Избранное
        </button>
      </div>

      <div v-if="currentPage === 'setings'" 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-600 sm:mt-3 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
        >
          Настройка
        </button>

        <button
          @click="Valuestatus"
          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>
      </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>
    </div>
    <!-- Переключатель темы -->
     <div class="hidden  sm:block"><ThemeToggle /></div>
    
  </div>
</template>

<script setup>
import ThemeToggle from "./ThemeToggle.vue";

const props = defineProps({
  currentPage: String,
});

// Макросы Vue 3.3+ не требуют явного импорта
const emit = defineEmits(["update"]);

function ValueSeting() {
  emit("update", "setings");
}

function ValueRezylt() {
  emit("update", "rezylt");
}

function Valuestatus() {
  emit("update", "status");
}
</script>
