boursecu_admin/src/components/BasicMobileOverflowMenu.vue

<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>