pet/src/components/TopMenu.vue

<template>
  <div class="top-menu">
    <button class="icon-btn icon-stats" @click="$emit('stats')" title="Stats"></button>
    <button class="icon-btn icon-feed" @click="$emit('feed')" :disabled="disabled" title="Feed"></button>
    <button class="icon-btn icon-play" @click="$emit('play')" :disabled="disabled" title="Play"></button>
    <button class="icon-btn icon-sleep" @click="$emit('sleep')" :disabled="disabled" title="Sleep"></button>
  </div>
</template>

<script setup>
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
});

defineEmits(['stats', 'feed', 'play', 'sleep']);
</script>

<style scoped>
.top-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 12px;
  background: rgba(155, 188, 15, 0.05);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.icon-btn {
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
}

.icon-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Stats Icon (Bar Chart) */
.icon-stats::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    -6px 4px 0 #333, -6px 2px 0 #333, -6px 0px 0 #333,
    -2px 4px 0 #333, -2px 2px 0 #333, -2px 0px 0 #333, -2px -2px 0 #333,
    2px 4px 0 #333, 2px 2px 0 #333, 2px 0px 0 #333, 2px -2px 0 #333, 2px -4px 0 #333,
    6px 4px 0 #333, 6px 2px 0 #333;
}

/* Feed Icon (Apple/Food) */
.icon-feed::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ff4444;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    -2px -6px 0 #228822,
    -4px -2px 0 #ff4444, -2px -2px 0 #ff4444, 0px -2px 0 #ff4444, 2px -2px 0 #ff4444,
    -4px 0px 0 #ff4444, -2px 0px 0 #ff4444, 0px 0px 0 #ff4444, 2px 0px 0 #ff4444, 4px 0px 0 #ff4444,
    -4px 2px 0 #ff4444, -2px 2px 0 #ff4444, 0px 2px 0 #ff4444, 2px 2px 0 #ff4444, 4px 2px 0 #ff4444,
    -2px 4px 0 #ff4444, 0px 4px 0 #ff4444, 2px 4px 0 #ff4444;
}

/* Play Icon (Ball/Game) */
.icon-play::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #4444ff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    -2px -4px 0 #4444ff, 0px -4px 0 #4444ff, 2px -4px 0 #4444ff,
    -4px -2px 0 #4444ff, -2px -2px 0 #4444ff, 0px -2px 0 #4444ff, 2px -2px 0 #4444ff, 4px -2px 0 #4444ff,
    -4px 0px 0 #4444ff, -2px 0px 0 #4444ff, 0px 0px 0 #4444ff, 2px 0px 0 #4444ff, 4px 0px 0 #4444ff,
    -4px 2px 0 #4444ff, -2px 2px 0 #4444ff, 0px 2px 0 #4444ff, 2px 2px 0 #4444ff, 4px 2px 0 #4444ff,
    -2px 4px 0 #4444ff, 0px 4px 0 #4444ff, 2px 4px 0 #4444ff;
}

/* Sleep Icon (Moon) */
.icon-sleep::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffcc00;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0px -6px 0 #ffcc00, 2px -6px 0 #ffcc00,
    -2px -4px 0 #ffcc00, 0px -4px 0 #ffcc00, 2px -4px 0 #ffcc00, 4px -4px 0 #ffcc00,
    -2px -2px 0 #ffcc00, 0px -2px 0 #ffcc00, 4px -2px 0 #ffcc00,
    -2px 0px 0 #ffcc00, 0px 0px 0 #ffcc00, 4px 0px 0 #ffcc00,
    -2px 2px 0 #ffcc00, 0px 2px 0 #ffcc00, 4px 2px 0 #ffcc00,
    -2px 4px 0 #ffcc00, 0px 4px 0 #ffcc00, 2px 4px 0 #ffcc00, 4px 4px 0 #ffcc00,
    0px 6px 0 #ffcc00, 2px 6px 0 #ffcc00;
}
</style>