123 lines
2.7 KiB
Vue
123 lines
2.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { useUIStore } from '../stores/ui';
|
||
|
|
import { storeToRefs } from 'pinia';
|
||
|
|
|
||
|
|
const uiStore = useUIStore();
|
||
|
|
const { isStartMenuOpen } = storeToRefs(uiStore);
|
||
|
|
|
||
|
|
// Mock data for app list
|
||
|
|
const apps = [
|
||
|
|
{ name: 'File Explorer', icon: '📁' },
|
||
|
|
{ name: 'Web Browser', icon: '🌐' },
|
||
|
|
{ name: 'Settings', icon: '⚙️' },
|
||
|
|
{ name: 'Calculator', icon: '🧮' },
|
||
|
|
{ name: 'Notepad', icon: '📝' },
|
||
|
|
];
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<transition name="start-menu-fade">
|
||
|
|
<div v-if="isStartMenuOpen" class="start-menu">
|
||
|
|
<div class="user-profile">
|
||
|
|
<div class="avatar"></div>
|
||
|
|
<span>Daniel</span>
|
||
|
|
</div>
|
||
|
|
<ul class="app-list">
|
||
|
|
<li v-for="app in apps" :key="app.name" class="app-item">
|
||
|
|
<span class="icon">{{ app.icon }}</span>
|
||
|
|
<span class="name">{{ app.name }}</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="power-controls">
|
||
|
|
<button class="power-btn">Power Off</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.start-menu-fade-enter-active,
|
||
|
|
.start-menu-fade-leave-active {
|
||
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.start-menu-fade-enter-from,
|
||
|
|
.start-menu-fade-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.start-menu {
|
||
|
|
position: fixed;
|
||
|
|
top: 52px; /* Taskbar height + a small gap */
|
||
|
|
left: 4px;
|
||
|
|
width: 320px;
|
||
|
|
height: 450px;
|
||
|
|
background: var(--taskbar-background);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 1px solid var(--taskbar-item-border-color);
|
||
|
|
z-index: calc(var(--z-taskbar) - 1); /* Below taskbar, but above other UI */
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
color: var(--taskbar-item-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-profile {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 16px;
|
||
|
|
border-bottom: 1px solid var(--taskbar-item-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #ccc;
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-list {
|
||
|
|
list-style: none;
|
||
|
|
padding: 8px;
|
||
|
|
margin: 0;
|
||
|
|
flex-grow: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px 12px;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-item:hover {
|
||
|
|
background-color: var(--taskbar-item-background-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-item .icon {
|
||
|
|
font-size: 20px;
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.power-controls {
|
||
|
|
padding: 12px;
|
||
|
|
border-top: 1px solid var(--taskbar-item-border-color);
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.power-btn {
|
||
|
|
background: var(--taskbar-item-background);
|
||
|
|
color: var(--taskbar-item-text-color);
|
||
|
|
border: 1px solid var(--taskbar-item-border-color);
|
||
|
|
padding: 8px 16px;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|