front/src/components/PathSlider.vue - master - renix/TravelGuide

front/src/components/PathSlider.vue

79 строк2 KB

Dolfi-er

Вернула оригинальный дизайн, добавила карточку пути

12 мар 2025, 23:20

12 мар 2025, 23:20582c2f6

<script setup lang="ts">
import { ref } from 'vue';
import Card from './PathCard.vue';

// Import the image directly
import chevronDown from '@/assets/images/chevron-down.svg';

const isOpen = ref(false);

const cards = [
  { id: 1, title: 'Card 1'},
  { id: 2, title: 'Card 2'},
  { id: 3,title: 'Card 3'},
  { id: 4, title: 'Card 4'},
];

const toggleSlider = () => {
  isOpen.value = !isOpen.value;
};
</script>

<template>
  <div class="w-full">
    <div class="flex align-center justify-between w-full bg-[#286A6C] rounded-t-xl">
      <div class="font-amatic p-2 text-white text-[40px] h-full">Мои маршруты</div>
      <button
        @click="toggleSlider"
        class="flex items-center text-white font-semibold px-4 rounded-lg transition-colors duration-200"
      >
        <img
          :src="chevronDown"
          :class="{'rotate-180': isOpen}"
          class="transition-transform duration-200 h-20"
          alt="Toggle"
        />
      </button>
    </div>

    <div v-if="isOpen" class="transition-all duration-300 ease-in-out">
      <div class="bg-[#F1EFEA] rounded-b-xl p-6 shadow-lg">
        <div class="overflow-x-auto no-scrollbar">
          <div class="flex space-x-4 p-4">
            <Card
              v-for="card in cards"
              :id="card.id"
              :title="card.title"
              class="flex-none w-48"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.no-scrollbar {
  overflow-x: auto;
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.5) transparent; /* For Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  height: 8px; /* Height of the horizontal scrollbar */
}

.no-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgb(199, 200, 191); /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}

.no-scrollbar::-webkit-scrollbar-track {
  background: transparent; /* Background of the scrollbar track */
}

.rotate-180 {
  transform: rotate(0deg);
}
</style>