frontend/app/components/Taskbar.vue

<template>
  <div class="taskbar">
    <div class="start-section" ref="startMenuRef">
      <button class="start-button" @click="toggleStartMenu">
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiNjMGMwYzAiLz48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iNyIgaGVpZ2h0PSI3IiBmaWxsPSIjMDAwMDgwIi8+PHJlY3QgeD0iMiIgeT0iMTEiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIGZpbGw9IiMwMDAwODAiLz48cmVjdCB4PSIxMSIgeT0iMiIgd2lkdGg9IjciIGhlaWdodD0iNyIgZmlsbD0iIzAwMDA4MCIvPjxyZWN0IHg9IjExIiB5PSIxMSIgd2lkdGg9IjciIGhlaWdodD0iNyIgZmlsbD0iIzAwMDA4MCIvPjwvc3ZnPg==" alt="Start" class="start-icon" />
         <span>{{ t('start') }}</span>
      </button>

      <div v-if="showStartMenu" class="start-menu">
        <div
          v-for="item in menuItems"
          :key="item.labelKey"
          class="menu-item"
          @click="handleMenuClick(item.action)"
        >
          <img :src="item.icon" class="menu-icon" />
          <span>{{ t(item.labelKey) }}</span>
        </div>
      </div>
    </div>
    <div class="task-buttons">
      <button
        v-for="window in minimizedWindows"
        :key="window.id"
        class="task-button"
        @click="restoreMinimizedWindow(window.id)"
      >
        {{ t(window.title) }}
      </button>
    </div>
    <div class="right-section">
      <div class="language-toggle" @click="toggleLanguage">
        <span>{{ locale === 'zh-tw' ? '注音' : 'ABC' }}</span>
      </div>
      <div class="clock">
        <span v-if="isMounted">{{ currentTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useI18n } from 'vue-i18n';

const { t, locale, setLocale } = useI18n();

defineProps({
  minimizedWindows: { type: Array, default: () => [] },
  menuItems: { type: Array, default: () => [] },
});

const emit = defineEmits(['restore-window', 'menu-action']);

const currentTime = ref('');
const isMounted = ref(false);
let timerId = null;
const showStartMenu = ref(false);
const startMenuRef = ref(null); // Ref for the start-section div

const toggleStartMenu = () => {
  showStartMenu.value = !showStartMenu.value;
};

const handleMenuClick = (action) => {
  emit('menu-action', action);
  showStartMenu.value = false;
};

const toggleLanguage = () => {
  const newLocale = locale.value === 'zh-tw' ? 'en' : 'zh-tw';
  locale.value = newLocale;
  setLocale(newLocale);
};

const restoreMinimizedWindow = (id) => {
  emit('restore-window', id);
};

const updateCurrentTime = () => {
  const timeLocale = locale.value === 'zh-tw' ? 'zh-TW' : 'en-US';
  currentTime.value = new Date().toLocaleTimeString(timeLocale);
};

// Function to handle clicks outside the start menu
const handleClickOutside = (event) => {
  if (startMenuRef.value && !startMenuRef.value.contains(event.target)) {
    if (showStartMenu.value) {
      showStartMenu.value = false;
    }
  }
};

watch(locale, updateCurrentTime);

onMounted(() => {
  isMounted.value = true;
  updateCurrentTime();
  timerId = setInterval(updateCurrentTime, 1000);
  document.addEventListener('click', handleClickOutside); // Add event listener
});

onUnmounted(() => {
  if (timerId) {
    clearInterval(timerId);
  }
  document.removeEventListener('click', handleClickOutside); // Remove event listener
});
</script>

<style scoped>
.taskbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #c0c0c0;
  padding: 4px 6px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #808080;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  position: relative;
}

.start-section {
  position: relative;
  display: flex;
  align-items: center;
}

.start-button {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  background-color: #c0c0c0;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  color: black;
}

.start-button:active {
  border-color: #808080 #ffffff #ffffff #808080;
}

.start-icon {
  margin-right: 8px;
  width: 20px;
  height: 20px;
}

.start-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 4px;
  min-width: 200px;
  z-index: 1001;
}

.menu-item {
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  color: black;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-item:hover {
  background-color: #000080;
  color: white;
  border-color: #000080;
}

.menu-icon {
  width: 24px;
  height: 24px;
}

.task-buttons {
  display: flex;
  flex-grow: 1;
  margin-left: 10px;
  gap: 6px;
  overflow-x: auto;
}

.task-button {
  padding: 4px 8px;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background-color: #c0c0c0;
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
  color: black;
  white-space: nowrap;
  flex-shrink: 0;
}

.task-button:active {
  border-color: #ffffff #808080 #808080 #ffffff;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 6px;
}

.language-toggle, .clock {
  padding: 4px 8px;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  font-size: 0.9rem;
  color: black;
  cursor: pointer;
  background-color: #c0c0c0;
}

.language-toggle:active {
  border-color: #ffffff #808080 #808080 #ffffff;
}
</style>