Add navigation prevention while in Edit mode to Avatar menu options in Header

client/src/components/layout/Canvas/Canvas.jsx

@@ -12,7 +12,7 @@ import SettingsCanvas from "./views/SettingsCanvas"
 import { DashboardCanvas } from "./views/DashboardCanvas";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
-export default function Canvas({ isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView, darkMode }) {
+export default function Canvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView, darkMode }) {
   const recipe = useRecipe({ key: "canvas" });
   const styles = recipe();
 
@@ -30,6 +30,7 @@ export default function Canvas({ isEditable, setIsEditable, isDelete, setIsDelet
                     setOriginalLayout={ setOriginalLayout }
                     onLayoutChange={ onLayoutChange }
                     onChangeView={ onChangeView }
+                    onCancel={ onCancel }
                     isEditable={ isEditable }
                     setIsEditable={ setIsEditable }
                     isDelete={ isDelete }

client/src/components/layout/Canvas/views/DashboardCanvas.jsx

@@ -11,7 +11,7 @@ import { CancelButton } from "../components/CancelButton";
 import { SaveButton } from "../components/SaveButton";
 import DeleteAllButton from "../components/DeleteAllButton";
 
-export function DashboardCanvas({ isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView }) {
+export function DashboardCanvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView }) {
   // const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
   // const [isDelete, setIsDelete] = useState(false);
   const [newCounter, setNewCounter] = useState(3);
@@ -55,18 +55,19 @@ export function DashboardCanvas({ isEditable, setIsEditable, isDelete, setIsDele
     setOriginalLayout([]) // Clear backup layout
   }
 
-  const onCancel = () => {
-    console.log("canceling changes...");
-    if (originalLayout.length) { 
-      setLayout(originalLayout.map(item => ({
-        ...item, 
-        static: true
-      })));
-    };
-    setIsEditable(false);
-    setIsDelete(false);
-    setOriginalLayout([]); 
-  }
+  // Lifting up to Dashboard.jsx for prop drilling
+  // const onCancel = () => {
+  //   console.log("canceling changes...");
+  //   if (originalLayout.length) { 
+  //     setLayout(originalLayout.map(item => ({
+  //       ...item, 
+  //       static: true
+  //     })));
+  //   };
+  //   setIsEditable(false);
+  //   setIsDelete(false);
+  //   setOriginalLayout([]); 
+  // }
 
   const onDeleteWidgets = () => {
     console.log("Start deleting widgets...");

client/src/components/layout/Dashboard.jsx

@@ -20,6 +20,19 @@ export default function Dashboard() {
     { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true }
   ]);
 
+  const onCancel = () => {
+    console.log("canceling changes...");
+    if (originalLayout.length) { 
+      setLayout(originalLayout.map(item => ({
+        ...item, 
+        static: true
+      })));
+    };
+    setIsEditable(false);
+    setIsDelete(false);
+    setOriginalLayout([]); 
+  }
+  
   // Prevent navigation while in Edit mode without saving or cancelling
   const handleViewChange = (nextView) => { 
     if (view === "widget" && isEditable) {
@@ -68,6 +81,7 @@ export default function Dashboard() {
             setOriginalLayout={ setOriginalLayout }
             onLayoutChange={( newLayout ) => setLayout( newLayout )}
             onChangeView={ handleViewChange }
+            onCancel={ onCancel }
             isEditable={ isEditable }
             setIsEditable={ setIsEditable }
             isDelete={ isDelete }

client/src/components/layout/Header/UserAvatarMenu.jsx

@@ -1,7 +1,7 @@
 import { Avatar, Menu, Portal, Box } from "@chakra-ui/react"
 
 
-export default function UserAvatarMenu({ view, setView, name, avatar }) {
+export default function UserAvatarMenu({ view, setView, onChangeView, name, avatar }) {
 	return (
 		<Menu.Root>
 			<Menu.Trigger focusRing="none">
@@ -21,10 +21,10 @@ export default function UserAvatarMenu({ view, setView, name, avatar }) {
 				{/* zIndex: overlay = 1300 */}
 				<Menu.Positioner zIndex="overlay"> 
 					<Menu.Content>
-						<Menu.Item value="account" onClick={() => setView("account")}>
+						<Menu.Item value="account" onClick={() => onChangeView("account")}>
 							Account
 						</Menu.Item>
-						<Menu.Item value="settings" onClick={() => setView("settings")}>
+						<Menu.Item value="settings" onClick={() => onChangeView("settings")}>
 							Settings
 						</Menu.Item>
 						<Menu.Item value="logout" onClick={() => console.log("Log out triggered")}>