interview-demo-code/frontend/spa/src/components/Dock.vue

<template>
  <div class="dock dock-lg select-none">
    <RouterLink
        :to="{name: 'home'}"
        :class="{'dock-active': route.name === 'home'}"
        @click="onDockItemClick"
    >
      <svg class="dock-icon size-[1.5em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt">
          <polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10"
                    stroke-width="2"></polyline>
          <path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor"
                stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
          <line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square"
                stroke-miterlimit="10" stroke-width="2"></line>
        </g>
      </svg>
      <span class="dock-label">Главная</span>
    </RouterLink>

    <RouterLink
        :to="{name: 'categories'}"
        :class="{'dock-active': route.name === 'categories'}"
        @click="onDockItemClick"
    >
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="dock-icon size-7">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/>
      </svg>
      <span class="dock-label">Каталог</span>
    </RouterLink>

    <RouterLink
        :to="{name: 'search'}"
        :class="{'dock-active': route.name === 'search'}"
        @click="onDockItemClick"
    >
      <svg class="dock-icon size-[1.5em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
           stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
      </svg>
      <span class="dock-label">Поиск</span>
    </RouterLink>

    <RouterLink
        v-if="settings.product_interaction_mode === 'order'"
        :to="{name: 'cart'}"
        :class="{'dock-active': route.name === 'cart'}"
        @click="onDockItemClick"
    >
      <div class="indicator">
        <span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
        <svg class="dock-icon size-[1.5em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
        </svg>
      </div>
      <span class="dock-label">Корзина</span>
    </RouterLink>

    <RouterLink
        :to="{name: 'account'}"
        :class="{'dock-active': route.name === 'account'}"
        @click="onDockItemClick"
    >
      <div v-if="tgData?.user?.photo_url" class="dock-icon w-7 h-7 rounded-full overflow-hidden">
        <img :src="tgData?.user?.photo_url" alt="avatar" class="w-full h-full object-cover"/>
      </div>
      <div v-else class="dock-icon bg-primary text-primary-content w-7 h-7 rounded-full flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
        </svg>
      </div>
      <span class="dock-label">Профиль</span>
    </RouterLink>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import {useCartStore} from "@/stores/CartStore.js";
import {useSettingsStore} from "@/stores/SettingsStore.js";
import {useTgData} from "@/composables/useTgData.js";

const route = useRoute();
const cart = useCartStore();
const settings = useSettingsStore();
const tgData = useTgData();
const haptic = window.Telegram.WebApp.HapticFeedback;

function onDockItemClick(event) {
  haptic.selectionChanged();
  
  // Находим иконку в кликнутом элементе
  const icon = event.currentTarget.querySelector('.dock-icon');
  if (icon) {
    icon.classList.add('dock-icon-clicked');
    setTimeout(() => {
      icon.classList.remove('dock-icon-clicked');
    }, 200);
  }
}
</script>

<style scoped>
.dock {
  position: fixed;
  left: 0;
  right: 0;

  height: var(--dock-height);
  bottom: calc(
      var(--tg-content-safe-area-inset-bottom, 0px)
      + var(--tg-safe-area-inset-bottom, 0px)
  );
  padding-bottom: 0;

  display: flex;
  align-items: center;
  justify-content: space-around;

  background: var(--color-base-100);
  z-index: 50;
}

.dock-icon {
  transition: transform 0.2s ease-out;
  transform-origin: center;
}

.dock-icon-clicked {
  animation: dock-icon-bounce 0.2s ease-out;
}

@keyframes dock-icon-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
</style>