Fix

2026-05-13 03:06:59 +03:30
parent d2a577f254
commit b8ced45375
142 changed files with 3706 additions and 905 deletions
@@ -0,0 +1,126 @@
+<template>
+  <aside class="sidebar-steps">
+    <div class="sidebar-steps__mobile-logo">
+      <img :src="logoPinkishRed" alt="banu" />
+    </div>
+    <div class="sidebar-steps__panel">
+      <div class="sidebar-steps__logo">
+        <img :src="logoWhite" alt="banu" />
+      </div>
+      <ul class="sidebar-steps__list">
+        <li
+          v-for="tab in tabs"
+          :key="tab.key"
+          class="sidebar-steps__item"
+          :class="{ 'sidebar-steps__item--active': activeTab === tab.key }"
+          @click="emit('update:active-tab', tab.key)"
+        >
+          <SvgIcon :name="tab.icon" :size="22" color="#fff" />
+        </li>
+      </ul>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { gallery } from '@/utils/gallery'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+
+defineProps({
+  tabs: { type: Array, required: true },
+  activeTab: { type: String, default: '' },
+})
+
+const emit = defineEmits(['update:active-tab'])
+
+const logoWhite = gallery.logoWhite
+const logoPinkishRed = gallery.logoPinkishRed
+</script>
+
+<style lang="scss" scoped>
+.sidebar-steps {
+  height: 100%;
+
+  &__mobile-logo {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0.5rem;
+
+    img {
+      height: 2.5rem;
+      object-fit: contain;
+    }
+
+    @media (min-width: 1024px) {
+      display: none;
+    }
+  }
+
+  &__panel {
+    background: var(--color-primary);
+    border-radius: 1rem;
+    padding: 0.75rem;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+    @media (min-width: 1024px) {
+      flex-direction: column;
+      align-items: center;
+      gap: 1.5rem;
+      padding: 1.25rem 0.75rem;
+      border-radius: 1.5rem;
+    }
+  }
+
+  &__logo {
+    display: none;
+
+    @media (min-width: 1024px) {
+      display: flex;
+      justify-content: center;
+      padding-top: 0.5rem;
+    }
+
+    img {
+      height: 3.5rem;
+      object-fit: contain;
+    }
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    flex: 1;
+
+    @media (min-width: 1024px) {
+      flex-direction: column;
+      justify-content: flex-start;
+      gap: 1.25rem;
+      padding-top: 1rem;
+    }
+  }
+
+  &__item {
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+
+    &--active,
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+</style>