605 lines
18 KiB
TypeScript
605 lines
18 KiB
TypeScript
import React, { useState } from "react";
|
|
|
|
const MenuBar = () => {
|
|
const [activeMenu, setActiveMenu] = useState<string | null>(null);
|
|
const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
|
|
|
|
// State to track selection for all menu items
|
|
const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(
|
|
{}
|
|
);
|
|
|
|
// Function to toggle selection for a specific item
|
|
const toggleSelection = (itemName: string) => {
|
|
setSelectedItems((prev) => ({
|
|
...prev,
|
|
[itemName]: !prev[itemName], // Toggle the selection state
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<div className="menu-bar">
|
|
{/* Top-level menu buttons */}
|
|
<div className="menu-buttons">
|
|
{/* File Menu */}
|
|
<div
|
|
className="menu-button-container"
|
|
onMouseEnter={() => setActiveMenu("File")}
|
|
onMouseLeave={() => {
|
|
setActiveMenu(null);
|
|
setActiveSubMenu(null);
|
|
}}
|
|
>
|
|
<div className="menu-button">
|
|
File
|
|
<span className="dropdown-icon">▾</span>
|
|
</div>
|
|
|
|
{/* File Dropdown */}
|
|
{activeMenu === "File" && (
|
|
<div className="dropdown-menu">
|
|
{/* New File */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("New File")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["New File"] && "✓ "}
|
|
New File
|
|
</span>
|
|
<div className="menu-item-right">
|
|
<span className="shortcut">Ctrl + N</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Open Local File */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Open Local File")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Open Local File"] && "✓ "}
|
|
Open Local File
|
|
</span>
|
|
<div className="menu-item-right">
|
|
<span className="shortcut">Ctrl + O</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save Version */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Save Version")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Save Version"] && "✓ "}
|
|
Save Version
|
|
</span>
|
|
</div>
|
|
<div className="split"></div>
|
|
</div>
|
|
|
|
{/* Make a Copy */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Make a Copy")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Make a Copy"] && "✓ "}
|
|
Make a Copy
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Share */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Share")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Share"] && "✓ "}
|
|
Share
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rename */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Rename")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Rename"] && "✓ "}
|
|
Rename
|
|
</span>
|
|
</div>
|
|
<div className="split"></div>
|
|
</div>
|
|
|
|
{/* Import */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Import")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Import"] && "✓ "}
|
|
Import
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Close File */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Close File")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Close File"] && "✓ "}
|
|
Close File
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Edit Menu */}
|
|
<div
|
|
className="menu-button-container"
|
|
onMouseEnter={() => setActiveMenu("Edit")}
|
|
onMouseLeave={() => {
|
|
setActiveMenu(null);
|
|
setActiveSubMenu(null);
|
|
}}
|
|
>
|
|
<div className="menu-button">
|
|
Edit
|
|
<span className="dropdown-icon">▾</span>
|
|
</div>
|
|
|
|
{/* Edit Dropdown */}
|
|
{activeMenu === "Edit" && (
|
|
<div className="dropdown-menu">
|
|
{/* Undo */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Undo")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Undo"] && "✓ "}
|
|
Undo
|
|
</span>
|
|
<div className="menu-item-right">
|
|
<span className="shortcut">Ctrl + Z</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Redo */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Redo")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Redo"] && "✓ "}
|
|
Redo
|
|
</span>
|
|
<div className="menu-item-right">
|
|
<span className="shortcut">Ctrl + Shift + Z</span>
|
|
</div>
|
|
</div>
|
|
<div className="split"></div>
|
|
</div>
|
|
|
|
{/* Undo History */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Undo History")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Undo History"] && "✓ "}
|
|
Undo History
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Redo History */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Redo History")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Redo History"] && "✓ "}
|
|
Redo History
|
|
</span>
|
|
</div>
|
|
<div className="split"></div>
|
|
</div>
|
|
|
|
{/* Find */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Find")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Find"] && "✓ "}
|
|
Find
|
|
</span>
|
|
<div className="menu-item-right">
|
|
<span className="shortcut">Ctrl + F</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Delete */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Delete")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Delete"] && "✓ "}
|
|
Delete
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Select by... */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Select by...")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Select by..."] && "✓ "}
|
|
Select by...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Keymap */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Keymap")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Keymap"] && "✓ "}
|
|
Keymap
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* View Menu */}
|
|
<div
|
|
className="menu-button-container"
|
|
onMouseEnter={() => setActiveMenu("View")}
|
|
onMouseLeave={() => {
|
|
setActiveMenu(null);
|
|
setActiveSubMenu(null);
|
|
}}
|
|
>
|
|
<div className="menu-button">
|
|
View
|
|
<span className="dropdown-icon">▾</span>
|
|
</div>
|
|
|
|
{/* View Dropdown */}
|
|
{activeMenu === "View" && (
|
|
<div className="dropdown-menu">
|
|
{/* Grid */}
|
|
<div
|
|
className={"menu-item-container"}
|
|
onClick={() => toggleSelection("Grid")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Grid"] && "✓ "}
|
|
Grid
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Gizmo */}
|
|
<div
|
|
className="menu-item-container"
|
|
onMouseEnter={() => setActiveSubMenu("View-Gizmo")}
|
|
onMouseLeave={() => setActiveSubMenu(null)}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Gizmo"] && "✓ "}
|
|
Gizmo
|
|
</span>
|
|
<span className="icon">▾</span>
|
|
</div>
|
|
<div className="split"></div>
|
|
|
|
{/* Gizmo Submenu */}
|
|
{activeSubMenu === "View-Gizmo" && (
|
|
<div className="submenu">
|
|
{/* Visibility */}
|
|
<div
|
|
className="submenu-item"
|
|
onClick={() => toggleSelection("Visibility")}
|
|
>
|
|
<span>
|
|
{selectedItems["Visibility"] && "✓ "}
|
|
Visibility
|
|
</span>
|
|
</div>
|
|
|
|
{/* Cube view */}
|
|
<div
|
|
className="submenu-item"
|
|
onClick={() => toggleSelection("Cube view")}
|
|
>
|
|
<span>
|
|
{selectedItems["Cube view"] && "✓ "}
|
|
Cube view
|
|
</span>
|
|
</div>
|
|
|
|
{/* Sphere view */}
|
|
<div
|
|
className="submenu-item"
|
|
onClick={() => toggleSelection("Sphere view")}
|
|
>
|
|
<span>
|
|
{selectedItems["Sphere view"] && "✓ "}
|
|
Sphere view
|
|
</span>
|
|
</div>
|
|
|
|
{/* Custom settings */}
|
|
<div
|
|
className="submenu-item"
|
|
onClick={() => toggleSelection("Custom settings")}
|
|
>
|
|
<span>
|
|
{selectedItems["Custom settings"] && "✓ "}
|
|
Custom settings
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Zoom */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Zoom")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Zoom"] && "✓ "}
|
|
Zoom
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Full Screen */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Full Screen")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Full Screen"] && "✓ "}
|
|
Full Screen
|
|
</span>
|
|
<div className="menu-item-right">
|
|
<span className="shortcut">F11</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Version History Menu */}
|
|
<div
|
|
className="menu-button-container"
|
|
onMouseEnter={() => setActiveMenu("Version history")}
|
|
onMouseLeave={() => {
|
|
setActiveMenu(null);
|
|
setActiveSubMenu(null);
|
|
}}
|
|
>
|
|
<div className="menu-button">
|
|
Version history
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
{/* Export As Menu */}
|
|
<div
|
|
className="menu-button-container"
|
|
onMouseEnter={() => setActiveMenu("Export as...")}
|
|
onMouseLeave={() => {
|
|
setActiveMenu(null);
|
|
setActiveSubMenu(null);
|
|
}}
|
|
>
|
|
<div className="menu-button">
|
|
Export as...
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Apps Menu */}
|
|
<div
|
|
className="menu-button-container"
|
|
onMouseEnter={() => setActiveMenu("Apps")}
|
|
onMouseLeave={() => {
|
|
setActiveMenu(null);
|
|
setActiveSubMenu(null);
|
|
}}
|
|
>
|
|
<div className="menu-button">
|
|
Apps
|
|
<span className="dropdown-icon">▾</span>
|
|
</div>
|
|
|
|
{/* Apps Dropdown */}
|
|
{activeMenu === "Apps" && (
|
|
<div className="dropdown-menu">
|
|
{/* New App */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("New App")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["New App"] && "✓ "}
|
|
New App
|
|
</span>
|
|
</div>
|
|
<div className="split"></div>
|
|
|
|
</div>
|
|
|
|
{/* Work-flow Monitor */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Work-flow Monitor")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Work-flow Monitor"] && "✓ "}
|
|
Work-flow Monitor
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Temperature Visualizer */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Temperature Visualizer")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Temperature Visualizer"] && "✓ "}
|
|
Temperature Visualizer
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* View all */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("View all")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["View all"] && "✓ "}
|
|
View all
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Help Menu */}
|
|
<div
|
|
className="menu-button-container"
|
|
onMouseEnter={() => setActiveMenu("Help")}
|
|
onMouseLeave={() => {
|
|
setActiveMenu(null);
|
|
setActiveSubMenu(null);
|
|
}}
|
|
>
|
|
<div className="menu-button">
|
|
Help
|
|
<span className="dropdown-icon">▾</span>
|
|
</div>
|
|
|
|
{/* Help Dropdown */}
|
|
{activeMenu === "Help" && (
|
|
<div className="dropdown-menu">
|
|
{/* Shortcuts */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Shortcuts")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Shortcuts"] && "✓ "}
|
|
Shortcuts
|
|
</span>
|
|
<div className="menu-item-right">
|
|
<span className="shortcut">Ctrl + Shift + ?</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Manual */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Manual")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Manual"] && "✓ "}
|
|
Manual
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Video Tutorials */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Video Tutorials")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Video Tutorials"] && "✓ "}
|
|
Video Tutorials
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Report a bug */}
|
|
<div
|
|
className="menu-item-container"
|
|
onClick={() => toggleSelection("Report a bug")}
|
|
>
|
|
<div className="menu-item">
|
|
<span>
|
|
{selectedItems["Report a bug"] && "✓ "}
|
|
Report a bug
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MenuBar;
|
|
|
|
|