84 lines
1.8 KiB
Vue
84 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia';
|
|
import { useWindowsStore } from '../stores/windows';
|
|
import { useUIStore } from '../stores/ui';
|
|
|
|
const windowsStore = useWindowsStore();
|
|
const uiStore = useUIStore();
|
|
|
|
const { windows } = storeToRefs(windowsStore);
|
|
const { focusWindow } = windowsStore;
|
|
const { toggleStartMenu } = uiStore;
|
|
|
|
function handleTaskbarButtonClick(windowId: string) {
|
|
focusWindow(windowId);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="taskbar">
|
|
<button @click="toggleStartMenu" class="start-button">🚀</button>
|
|
<div class="window-list">
|
|
<button
|
|
v-for="window in windows"
|
|
:key="window.id"
|
|
class="taskbar-item"
|
|
:class="{ 'is-active': window.isFocused }"
|
|
@click="handleTaskbarButtonClick(window.id)"
|
|
>
|
|
{{ window.title }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.taskbar {
|
|
position: fixed;
|
|
top: 0; /* Changed from bottom to top */
|
|
left: 0;
|
|
right: 0;
|
|
height: 48px;
|
|
background-color: var(--taskbar-background);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
z-index: var(--z-taskbar);
|
|
}
|
|
|
|
.start-button {
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
padding: 0 12px;
|
|
color: var(--taskbar-item-text-color);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.window-list {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.taskbar-item {
|
|
background-color: var(--taskbar-item-background);
|
|
color: var(--taskbar-item-text-color);
|
|
border: 1px solid var(--taskbar-item-border-color);
|
|
border-radius: var(--rounded-button);
|
|
padding: 6px 12px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.taskbar-item:hover {
|
|
background-color: var(--taskbar-item-background-hover);
|
|
}
|
|
|
|
.taskbar-item.is-active {
|
|
background-color: var(--taskbar-item-background-active);
|
|
font-weight: bold;
|
|
}
|
|
</style>
|