(v0.1.4.4-alpha) Start Menu!

Simple Windows start menu can bbe opened by clicking the windows icon in the taskbar or by pressing metaKeys (win key or cmd key). Clicking anywhere else on the screen causes it to inactivate.

Author: rupnil-codes

README.md

@@ -8,6 +8,7 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [X] Animations in the Lockscreen.
 - [ ] A loading screen on lockscreen after correct pass slowly fade while loading desktop in the back + SOUND.
 - [X] Windows Design + Desktop Design (Done in v0.1.3... & v0.1.4... respectively)
+- [X] Windows start menu does nothing rn. (Done in v0.1.4.4)
 - [X] Minimizing window still takes up the zIndex and prevents from using it.(FIXED IN v0.1.3.3-alpha)
 - [X] Clicking app on task bar checks if it is focussed or not then: if focussed minimize it, else focus it. (v0.1.3.3-alpha)
 - [X] Bug: Closing all apps still makes one of them active (visual) (FIXED: v0.1.3.4-alpha)
@@ -21,3 +22,4 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [X] Make ~~opaque and~~ high zIndex when dragging desktop apps, to overlay the bottom objects. (Done in v0.1.4.3)
 - [X] BUG: In fullscreen clicking the app in taskbar toggles fullscreen, and it becomes not fullscreen. (Fixed in v0.1.4.3)
 - [X] BUG: Closing on fullscreen saves the state. On the opening again it starts in fullscreen. (Fixed in v0.1.4.3(1))
+- [ ] QOL: drag the window, even outside the bounding box, or the window keeping padding of like 1rem.

src/routes/desktop.jsx

@@ -1,13 +1,29 @@
 import '../styles/routes/desktop.css';
-import { Wifi, Volume2, Bell } from 'lucide-react';
+import { Wifi, Volume2, Bell, Search } from 'lucide-react';
 import AppWindow, { INITIAL_Z, getNextZ } from '../core/WindowManager.jsx';
-import { createRef, useRef, useState, useMemo } from "react";
+import {createRef, useRef, useState, useMemo, useEffect} from "react";
 import { APP_REGISTRY } from "../data/Apps.js";
 
 import Draggable from 'react-draggable';
 import { motion, AnimatePresence } from "framer-motion";
 
 function Desktop() {
+    const [isStartMenuActive, setIsStartMenuActive] = useState(false);
+
+    const startMenuRef = useRef(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (isStartMenuActive && startMenuRef.current && !startMenuRef.current.contains(event.target)) {
+                if (!event.target.closest('#start-menu-icon')) {
+                    setIsStartMenuActive(false);
+                }
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isStartMenuActive]);
+
     const [iconPositions, setIconPositions] = useState({
         explorer: { col: 1, row: 1 },
         vscode: { col: 1, row: 2 },
@@ -149,9 +165,30 @@ function Desktop() {
         }));
     }
 
+    useEffect(() => {
+        const handleKey = (e) => {
+            if (e.metaKey) {
+                e.preventDefault();
+
+                setIsStartMenuActive(!isStartMenuActive);
+            }
+        };
+
+        window.addEventListener("keydown", handleKey);
+        return () => window.removeEventListener("keydown", handleKey);
+    });
+
     return (
-        <div className="desktop" onMouseDown={() => setSelectedIcon(null)}>
-            <div className="desktop-grid" style={{ position: 'absolute', inset: 0, display: 'grid', zIndex: 1 }}>
+        <div className="desktop" onMouseDown={() => {
+            setSelectedIcon(null);
+        }}>
+            <div
+                className="desktop-grid"
+                style={{ position: 'absolute', inset: 0, display: 'grid', zIndex: 1 }}
+                onClick={() => {
+                    setIsStartMenuActive(false);
+                }}
+            >
                 {Object.keys(iconPositions).map((id) => (
                     <Draggable
                         key={id}
@@ -213,6 +250,16 @@ function Desktop() {
                 ) : null
             )}
 
+            <div
+                ref={startMenuRef}
+                className={`start-menu ${isStartMenuActive ? "active" : ""}`}
+            >
+                <div className={"start-search"}>
+                    <Search className={"start-search-icon"} />
+                    <input className={"start-search-bar"} type={"text"}/>
+                </div>
+            </div>
+
             <div className={`taskbar ${ isAnyFullScreen ? 'is-fullscreen' : ''}`} onClick={(e) => e.stopPropagation()}>
                 <div className="apps">
                     <AnimatePresence mode="popLayout">
@@ -223,11 +270,13 @@ function Desktop() {
                             exit={{ opacity: 0, width: 0, scale: 0.5 }}
                             transition={{ type: "spring", stiffness: 300, damping: 30 }}
                             className="app-item"
+                            onClick={() => setIsStartMenuActive(!isStartMenuActive)}
                         >
-                            <div className="taskbar-app" id="start-menu">
+                            <div className="taskbar-app" id="start-menu-icon">
                                 <img className={"taskbar-app-icon"} src={"/assets/icons/Windows.svg"} draggable="false" alt="icon" />
                             </div>
                         </motion.div>
+
                         {taskbarApps.map(id => (
                             <motion.div
                                 key={id}

src/styles/routes/desktop.css

@@ -203,8 +203,68 @@
     pointer-events: none;
 }
 
-.start-menu{
-    background-image: url("../../assets/icons/Windows.svg");
+.start-menu {
+    bottom: 3.5rem;
+    left: calc(50vw - 25rem/2);
+
+    z-index: 10000;
+
+    position: fixed;
+    height: 28rem;
+    width: 25rem;
+
+    /*min-width: 25rem;*/
+    opacity: 0.5;
+
+    /*background-color: var(--gray);*/
+
+    backdrop-filter: blur(2rem) brightness(0.2);
+    transition: 0.5s var(--hover-animation-type);
+
+    border-top: 1px solid var(--border);
+    border-radius: var(--radius);
+
+    transform: translateY(200%);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /*justify-content: center;*/
+}
+.start-menu.active {
+    transform: translateY(0%);
+    opacity: 1;
+}
+
+.start-search {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1.5rem;
+    height: 2.1rem;
+    width: 85%;
+
+    background: var(--background);
+
+    border-radius: 200rem;
+
+    border: 1px solid var(--border);
+
+    /*padding: 0.25rem;*/
+}
+
+.start-search-icon {
+    margin-left: 0.6rem;
+    margin-right: 0.25rem;
+}
+
+.start-search-bar{
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
 }
 
 .taskbar-app-icon {