30f671e1c1
- Set fixed min-width (150px) and max-width (200px) for the dropdown menu to ensure it does not expand too much on smaller screens. - Removed flex-grow from dropdown to prevent it from taking excess space. - Improved flex layout between dropdown, EditModeToggle, and expand icon to ensure proper spacing and alignment.
39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
// /components/EditModeToggle.js
|
|
import React, { useState, useEffect } from "react";
|
|
import EditOffIcon from "@mui/icons-material/EditOff";
|
|
import ModeEditIcon from "@mui/icons-material/ModeEdit";
|
|
import Tooltip from "@mui/material/Tooltip"; // Importiere Tooltip von Material-UI
|
|
|
|
function EditModeToggle() {
|
|
const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true");
|
|
|
|
const toggleEditMode = () => {
|
|
const newEditMode = !editMode;
|
|
setEditMode(newEditMode);
|
|
localStorage.setItem("editMode", newEditMode);
|
|
//Browser neu laden, um die Änderungen anzuwenden
|
|
window.location.reload();
|
|
};
|
|
|
|
useEffect(() => {
|
|
const storedMode = localStorage.getItem("editMode") === "true";
|
|
setEditMode(storedMode);
|
|
}, []);
|
|
|
|
return (
|
|
<div onClick={toggleEditMode} style={{ cursor: "pointer" }}>
|
|
{editMode ? (
|
|
<Tooltip title="Bearbeitungsmodus deaktivieren" placement="top">
|
|
<EditOffIcon />
|
|
</Tooltip>
|
|
) : (
|
|
<Tooltip title="Bearbeitungsmodus aktivieren" placement="top">
|
|
<ModeEditIcon />
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EditModeToggle;
|