104 lines
2.9 KiB
Vue
104 lines
2.9 KiB
Vue
<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>
|