The start menu is not working

components/taskbar.js

@@ -110,33 +110,53 @@ class CustomTaskbar extends HTMLElement {
         setInterval(() => this.updateClock(), 60000);
 
         this.shadowRoot.getElementById('start-button').addEventListener('click', () => {
+        const existingStartMenu = document.querySelector('custom-window[id="start-menu"]');
+        
+        if (existingStartMenu) {
+            windowManager.closeWindow('start-menu');
+        } else {
             windowManager.createWindow({
                 id: 'start-menu',
                 title: 'Start Menu',
                 content: `
                     <div class="p-4 grid grid-cols-3 gap-4">
-                        <div class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+                        <a href="#" class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded" onclick="windowManager.createWindow({
+                            id: 'about',
+                            title: 'About Me.txt',
+                            content: document.querySelector('custom-window[id=\\'about\\']').innerHTML,
+                            icon: 'user',
+                            initialPosition: { x: 100, y: 100 }
+                        }); windowManager.closeWindow('start-menu'); return false;">
                             <i data-feather="user" class="w-8 h-8 mb-2"></i>
                             <span>About</span>
-                        </div>
-                        <div class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+                        </a>
+                        <a href="#" class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded" onclick="windowManager.createWindow({
+                            id: 'projects',
+                            title: 'Projects Explorer',
+                            content: document.querySelector('custom-window[id=\\'projects\\']').innerHTML,
+                            icon: 'folder',
+                            initialPosition: { x: 300, y: 150 }
+                        }); windowManager.closeWindow('start-menu'); return false;">
                             <i data-feather="folder" class="w-8 h-8 mb-2"></i>
                             <span>Projects</span>
-                        </div>
-                        <div class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+                        </a>
+                        <a href="#" class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
                             <i data-feather="mail" class="w-8 h-8 mb-2"></i>
                             <span>Contact</span>
-                        </div>
-                        <div class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+                        </a>
+                        <a href="#" class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
                             <i data-feather="settings" class="w-8 h-8 mb-2"></i>
                             <span>Settings</span>
-                        </div>
+                        </a>
                     </div>
                 `,
                 icon: 'grid',
-                initialPosition: { x: 50, y: window.innerHeight - 200 }
+                initialPosition: { x: 50, y: window.innerHeight - 250 },
+                width: 400,
+                height: 300
             });
-        });
+        }
+});
 
         feather.replace();
     }

components/window.js

@@ -32,10 +32,10 @@ class CustomWindow extends HTMLElement {
             <style>
                 :host {
                     position: absolute;
-                    width: 500px;
+                    width: var(--window-width, 500px);
                     max-width: 90vw;
-                    min-height: 300px;
-                    background-color: rgba(255, 255, 255, 0.9);
+                    min-height: var(--window-min-height, 300px);
+background-color: rgba(255, 255, 255, 0.9);
                     border-radius: 8px;
                     overflow: hidden;
                     display: flex;

script.js

@@ -81,17 +81,29 @@ class WindowManager {
         this.windows = [];
         this.zIndexCounter = 10;
     }
-
     createWindow(options) {
+        const existingWindow = document.querySelector(`custom-window[id="${options.id}"]`);
+        if (existingWindow) {
+            this.bringToFront(existingWindow);
+            return;
+        }
+
         const windowElement = document.createElement('custom-window');
         windowElement.setAttribute('id', options.id);
         windowElement.setAttribute('title', options.title);
         windowElement.setAttribute('icon', options.icon);
         windowElement.setAttribute('initial-x', options.initialPosition.x);
         windowElement.setAttribute('initial-y', options.initialPosition.y);
-        windowElement.innerHTML = options.content;
         
-        document.querySelector('desktop-shell').appendChild(windowElement);
+        if (options.width) {
+            windowElement.style.width = `${options.width}px`;
+        }
+        if (options.height) {
+            windowElement.style.minHeight = `${options.height}px`;
+        }
+        
+        windowElement.innerHTML = options.content;
+document.querySelector('desktop-shell').appendChild(windowElement);
         this.windows.push({
             id: options.id,
             element: windowElement,