change responsive]

2026-05-31 11:51:52 +03:30
parent 06568c5858
commit 023b8ee5be
124 changed files with 6296 additions and 4233 deletions
@@ -0,0 +1,167 @@
+<template>
+  <div ref="menuRef" class="mobile-overflow-menu">
+    <button
+      type="button"
+      class="mobile-overflow-menu__trigger"
+      :class="{ 'mobile-overflow-menu__trigger--active': open }"
+      @click="toggleMenu"
+    >
+      <span class="mobile-overflow-menu__icon-wrap">
+        <BaseIcon icon="vuesax-linear:menu" :size="menuIconSize" />
+      </span>
+      <span class="mobile-overflow-menu__label">منو</span>
+    </button>
+
+    <div v-if="open" class="mobile-overflow-menu__panel">
+      <button
+        v-for="item in items"
+        :key="String(item.name)"
+        type="button"
+        class="mobile-overflow-menu__panel-item"
+        @click="handleSelect(item)"
+      >
+        <span class="mobile-overflow-menu__panel-label">{{ item.meta?.title ?? item.name }}</span>
+        <BaseIcon
+          v-if="item.meta?.icon"
+          :icon="item.meta.icon as string"
+          :size="menuIconSize"
+          class="mobile-overflow-menu__panel-icon"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseIcon from '@core/components/BaseIcon'
+import { menuIconSize } from '@root/config'
+import { onClickOutside } from '@vueuse/core'
+import { ref } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+
+interface Props {
+  items: RouteRecordRaw[]
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'select', item: RouteRecordRaw): void
+}>()
+
+const open = ref(false)
+const menuRef = ref<HTMLElement | null>(null)
+
+onClickOutside(menuRef, () => {
+  open.value = false
+})
+
+function toggleMenu() {
+  open.value = !open.value
+}
+
+function handleSelect(item: RouteRecordRaw) {
+  open.value = false
+  emit('select', item)
+}
+</script>
+
+<style scoped lang="less">
+.mobile-overflow-menu {
+  position: relative;
+  flex: 1;
+}
+
+.mobile-overflow-menu__trigger {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 0;
+  padding: 6px 4px 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  color: #595959;
+
+  &:active {
+    opacity: 0.85;
+  }
+}
+
+.mobile-overflow-menu__trigger--active {
+  color: #1677ff;
+
+  .mobile-overflow-menu__icon-wrap {
+    background: #e6f4ff;
+    color: #1677ff;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 28px;
+    height: 3px;
+    border-radius: 3px 3px 0 0;
+    background: #1677ff;
+  }
+}
+
+.mobile-overflow-menu__icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 32px;
+  border-radius: 10px;
+  color: #292d32;
+}
+
+.mobile-overflow-menu__label {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.mobile-overflow-menu__panel {
+  position: absolute;
+  bottom: calc(100% + 12px);
+  left: 8px;
+  min-width: 220px;
+  background: #f5f5f5;
+  border: 1px solid #e8e8e8;
+  border-radius: 12px;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+  padding: 10px;
+  z-index: 210;
+}
+
+.mobile-overflow-menu__panel-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  padding: 10px 8px;
+  color: #262626;
+  font-size: 18px;
+  cursor: pointer;
+  text-align: right;
+
+  &:active {
+    background: #e9e9e9;
+  }
+}
+
+.mobile-overflow-menu__panel-icon {
+  color: #262626;
+}
+</style>