MID/src/components/RibbonMenu.vue

<script setup lang="ts">
import { ref } from 'vue'
import { 
  ChevronLeft, 
  ChevronRight, 
  FolderOpen, 
  Plus, 
  Copy, 
  Search, 
  Filter,
  RefreshCw,
  Settings,
  HelpCircle,
  Save,
  Eye,
  Edit3,
  Trash2,
  CheckSquare,
  FileText, 
  Layers,
  GitBranch,
  Bell,
  Zap, 
  BarChart3,
  Users,
  Link2, 
  Paperclip,
  MessageSquare
} from 'lucide-vue-next'

interface MenuItem {
  label: string
  active?: boolean
}

interface ToolbarButton {
  icon: any
  label: string
  size?: 'small' | 'medium' | 'large'
}

interface ToolbarGroup {
  title: string
  buttons: ToolbarButton[]
}

const menuItems: MenuItem[] = [
  { label: 'File' },
  { label: 'Welcome', active: true },
  { label: 'Dashboard' },
  { label: 'Items' },
  { label: 'Projects' },
  { label: 'Shortcuts' },
]

const toolbarGroups: ToolbarGroup[] = [
  {
    title: 'Navigation',
    buttons: [
      { icon: ChevronLeft, label: 'Back' },
      { icon: ChevronRight, label: 'Forward' },
      { icon: FolderOpen, label: 'Open' },
      { icon: Plus, label: 'New' },
    ]
  },
  {
    title: 'Edit',
    buttons: [
      { icon: Copy, label: 'Copy' },
      { icon: Edit3, label: 'Edit' },
      { icon: Trash2, label: 'Delete' },
      { icon: Save, label: 'Save' },
    ]
  },
  {
    title: 'View',
    buttons: [
      { icon: Search, label: 'Find' },
      { icon: Filter, label: 'Filter' },
      { icon: Eye, label: 'Preview' },
      { icon: RefreshCw, label: 'Refresh' },
    ]
  },
  {
    title: 'Items',
    buttons: [
      { icon: FileText, label: 'Attributes' },
      { icon: Layers, label: 'Parts' },
      { icon: GitBranch, label: 'Versions' },
      { icon: CheckSquare, label: 'Status' },
    ]
  },
  {
    title: 'Tools',
    buttons: [
      { icon: Zap, label: 'Quick' },
      { icon: BarChart3, label: 'Reports' },
      { icon: Users, label: 'Team' },
      { icon: Settings, label: 'Settings' },
    ]
  },
  {
    title: 'Actions',
    buttons: [
      { icon: Link2, label: 'Links' },
      { icon: Paperclip, label: 'Attach' },
      { icon: MessageSquare, label: 'Notes' },
      { icon: Bell, label: 'Alerts' },
    ]
  }
]

const activeMenu = ref('Welcome')

const setActiveMenu = (label: string) => {
  activeMenu.value = label
}
</script>

<template>
  <div class="ribbon-menu">
    <!-- Main Menu Bar -->
    <div class="menu-bar">
      <div class="menu-items">
        <button
          v-for="item in menuItems"
          :key="item.label"
          :class="['menu-item', { active: activeMenu === item.label }]"
          @click="setActiveMenu(item.label)"
        >
          {{ item.label }}
        </button>
      </div>
      <div class="menu-actions">
        <button class="menu-action-btn" title="Help">
          <HelpCircle :size="14" />
        </button>
        <button class="menu-action-btn" title="Settings">
          <Settings :size="14" />
        </button>
      </div>
    </div>

    <!-- Toolbar -->
    <div class="toolbar">
      <div v-for="group in toolbarGroups" :key="group.title" class="toolbar-group">
        <div class="toolbar-buttons">
          <button
            v-for="(btn, btnIndex) in group.buttons"
            :key="btnIndex"
            class="toolbar-btn"
            :title="btn.label"
          >
            <span class="toolbar-btn-icon">
              <component :is="btn.icon" :size="16" />
            </span>
            <span class="toolbar-btn-label">{{ btn.label }}</span>
          </button>
        </div>
        <span class="toolbar-group-title">{{ group.title }}</span>
      </div>
    </div>

    <!-- Context Bar -->
    <div class="context-bar">
      <div class="context-path">
        <span class="context-label">Navigation:</span>
        <span class="context-value">AMA(1) &gt; Dev database tree(1) &gt; Open Attribute requirement contain...</span>
      </div>
      <div class="context-tabs">
        <button class="context-tab active">Overview</button>
        <button class="context-tab">Edit</button>
        <button class="context-tab">Find</button>
        <button class="context-tab">CM</button>
        <button class="context-tab">Issues and Notes</button>
        <button class="context-tab">Security</button>
        <button class="context-tab">RT</button>
        <button class="context-tab">Extensions</button>
      </div>
    </div>
  </div>
</template>