windows/components/StartMenu.vue

<script setup lang="ts">
const { t } = useI18n();

// This component now only emits events and has no internal logic.
const emit = defineEmits([
  'about',
  'settings',
  'toggle-theme',
  'sign-out',
  'close-all-windows'
]);
</script>

<template>
  <div class="start-menu">
    <ul>
      <li @click="emit('about')">{{ t('startMenu.about') }}</li>
      <li class="separator"></li>
      <li @click="emit('settings')">{{ t('startMenu.systemSettings') }}</li>
      <li @click="emit('toggle-theme')">{{ t('startMenu.toggleTheme') }}</li>
      <li class="separator"></li>
      <li @click="emit('sign-out')">{{ t('startMenu.signOut') }}</li>
      <li @click="emit('close-all-windows')">{{ t('startMenu.closeAllWindows') }}</li>
    </ul>
  </div>
</template>

<style scoped>
.start-menu {
  position: fixed;
  top: 26px; /* Adjusted for new 22px taskbar height */
  left: 8px;
  width: 240px;
  background-color: var(--start-menu-background);
  border: 1px solid var(--start-menu-border-color);
  border-radius: 12px;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  padding: 6px;
  color: var(--content-text-color);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease-in-out;
  white-space: nowrap;
}

li:not(.separator):hover {
  background-color: var(--taskbar-item-background-hover);
}

.separator {
  height: 1px;
  background-color: var(--start-menu-border-color);
  margin: 6px 0;
  padding: 0;
  cursor: default;
}
</style>