diff --git a/assets/css/main.css b/assets/css/main.css
index c5323e9..41a289c 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -19,6 +19,9 @@
--taskbar-item-text-color: #ffffff;
--taskbar-item-border-color: rgba(255, 255, 255, 0.2);
+ --start-menu-background: var(--window-background);
+ --start-menu-border-color: var(--window-border-color);
+
/* Shadows */
--shadow-window: 0 10px 30px rgba(0, 0, 0, 0.2);
--shadow-button: 0 4px 10px rgba(0, 0, 0, 0.2);
@@ -31,6 +34,7 @@
/* Z-Indexes */
--z-window-base: 100;
--z-taskbar: 9999;
+ --z-start-menu: 10000;
--z-resizer: 1;
}
@@ -50,6 +54,9 @@
--taskbar-item-background-active: rgba(0, 0, 0, 0.15);
--taskbar-item-text-color: #000000;
--taskbar-item-border-color: rgba(0, 0, 0, 0.1);
+
+ --start-menu-background: var(--window-background);
+ --start-menu-border-color: var(--window-border-color);
}
diff --git a/components/Desktop.vue b/components/Desktop.vue
index 208c57b..f71f82b 100644
--- a/components/Desktop.vue
+++ b/components/Desktop.vue
@@ -2,8 +2,8 @@
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useWindowsStore } from '../stores/windows';
-import { useSettingsStore } from '../stores/settings';
import { useUIStore } from '../stores/ui';
+import { useSettingsStore } from '../stores/settings'; // Import settings store
import Window from './Window.vue';
import Taskbar from './Taskbar.vue';
import SnapPreview from './SnapPreview.vue';
@@ -11,23 +11,37 @@ import StartMenu from './StartMenu.vue';
import type { SnapType } from '../composables/useDraggable';
const windowsStore = useWindowsStore();
-const settingsStore = useSettingsStore();
const uiStore = useUIStore();
+const settingsStore = useSettingsStore();
const { orderedWindows } = storeToRefs(windowsStore);
-const { createWindow, snapWindow } = windowsStore;
-const { toggleTheme } = settingsStore;
+const { isStartMenuOpen } = storeToRefs(uiStore); // Get start menu state
+const { createWindow, snapWindow, closeAllWindows } = windowsStore;
const { closeStartMenu } = uiStore;
+const { toggleTheme } = settingsStore;
const snapPreview = ref<{ x: number; y: number; width: number; height: number; } | null>(null);
+// --- Start Menu Event Handlers ---
+function handleMenuAction(action: () => void) {
+ action();
+ closeStartMenu();
+}
+
+function handleAbout() { handleMenuAction(() => console.log('About clicked')); }
+function handleSettings() { handleMenuAction(() => console.log('Settings clicked')); }
+function handleSignOut() { handleMenuAction(() => console.log('Sign Out clicked')); }
+function handleToggleTheme() { handleMenuAction(toggleTheme); }
+function handleCloseAllWindows() { handleMenuAction(closeAllWindows); }
+// --------------------------------
+
function handleSnapPreview(snapType: SnapType) {
if (!snapType) {
snapPreview.value = null;
return;
}
- const taskbarHeight = 48;
+ const taskbarHeight = 22;
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight - taskbarHeight;
@@ -68,15 +82,19 @@ function handleDesktopClick() {
/>