mirror of
https://github.com/bunny-lab-io/Borealis.git
synced 2025-07-27 08:58:29 -06:00
92 lines
2.7 KiB
JavaScript
92 lines
2.7 KiB
JavaScript
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Node_Configuration_Sidebar.jsx
|
|
import React from "react";
|
|
import { Box, Typography, IconButton } from "@mui/material";
|
|
import { Settings as SettingsIcon } from "@mui/icons-material";
|
|
|
|
export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen }) {
|
|
return (
|
|
<>
|
|
{/* Top-right gear icon */}
|
|
<IconButton
|
|
onClick={() => setDrawerOpen(true)}
|
|
size="small"
|
|
sx={{
|
|
position: "absolute",
|
|
top: 8,
|
|
right: 8,
|
|
zIndex: 1500,
|
|
bgcolor: "#2a2a2a",
|
|
color: "#58a6ff",
|
|
border: "1px solid #444",
|
|
"&:hover": { bgcolor: "#3a3a3a" }
|
|
}}
|
|
>
|
|
<SettingsIcon fontSize="small" />
|
|
</IconButton>
|
|
|
|
{/* Dim overlay when drawer is open */}
|
|
{drawerOpen && (
|
|
<Box
|
|
onClick={() => setDrawerOpen(false)}
|
|
sx={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: "rgba(0,0,0,0.4)",
|
|
zIndex: 10
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Right-Side Node Configuration Panel */}
|
|
<Box
|
|
onClick={() => setDrawerOpen(false)}
|
|
sx={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
opacity: drawerOpen ? 1 : 0,
|
|
pointerEvents: drawerOpen ? "auto" : "none",
|
|
transition: "opacity 0.6s ease",
|
|
zIndex: 10
|
|
}}
|
|
/>
|
|
|
|
{/* Animated right drawer panel */}
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
width: 400,
|
|
bgcolor: "#121212",
|
|
color: "#ccc",
|
|
borderLeft: "1px solid #333",
|
|
padding: 2,
|
|
zIndex: 11,
|
|
overflowY: "auto",
|
|
transform: drawerOpen ? "translateX(0)" : "translateX(100%)",
|
|
transition: "transform 0.3s ease"
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<Typography variant="h6" sx={{ mb: 2, color: "#0475c2" }}>
|
|
Node Configuration Panel
|
|
</Typography>
|
|
<p style={{ fontSize: "0.85rem", color: "#aaa" }}>
|
|
This sidebar will be used to configure nodes in the future.
|
|
</p>
|
|
<p style={{ fontSize: "0.85rem", color: "#aaa" }}>
|
|
The idea is that this area will allow for more node configuration controls to be dynamically-populated by the nodes to allow more complex node documentation and configuration.
|
|
</p>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|