Add logout functionality to MenuBar component; clear localStorage and navigate to homepage on logout

app/src/components/ui/menu/menu.tsx

@@ -1,12 +1,14 @@
 import React, { useState } from "react";
 import { ArrowIcon } from "../../icons/ExportCommonIcons";
 import { toggleTheme } from "../../../utils/theme";
+import { useNavigate } from "react-router-dom";
 
 interface MenuBarProps {
   setOpenMenu: (isOpen: boolean) => void; // Function to update menu state
 }
 
 const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
+  const navigate = useNavigate();
   const [activeMenu, setActiveMenu] = useState<string | null>(null);
   const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
 
@@ -23,13 +25,19 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
     }));
   };
 
-  function handleThemeChange(){
+  function handleThemeChange() {
     toggleTheme();
     window.location.reload();
   }
 
   const savedTheme: string | null = localStorage.getItem("theme") ?? "light";
 
+
+  const handleLogout = () => {
+    localStorage.clear(); // 1. Clear all localStorage
+    navigate('/');        // 2. Redirect to homepage
+  };
+
   return (
     <div
       className="menu-bar"
@@ -539,6 +547,9 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
             </div>
           )}
         </div>
+        <div className="menu-button-container" onClick={handleLogout}>
+          <div className="menu-button">Log out</div>
+        </div>
       </div>
     </div>
   );

app/src/modules/scene/controls/selectionControls/moveControls.tsx

@@ -49,7 +49,7 @@ function MoveControls({
     "Ctrl" | "Shift" | "Ctrl+Shift" | ""
   >("");
   const email = localStorage.getItem("email");
-  const organization = email!.split("@")[1].split(".")[0];
+  const organization = email?.split("@")[1].split(".")[0] ?? null;
 
   const updateBackend = (
     productName: string,
@@ -308,7 +308,7 @@ function MoveControls({
                 }
               );
 
-            if (event) {
+            if (event && organization) {
               updateBackend(
                 selectedProduct.productName,
                 selectedProduct.productId,

app/src/modules/scene/controls/selectionControls/rotateControls.tsx

@@ -22,7 +22,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
     const itemsData = useRef<Types.FloorItems>([]);
 
     const email = localStorage.getItem('email')
-    const organization = (email!.split("@")[1]).split(".")[0];
+    const organization = (email?.split("@")[1])?.split(".")[0] ?? null;
 
     const updateBackend = (
         productName: string,
@@ -214,7 +214,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                             rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                         })
 
-                        if (event) {
+                        if (event && organization) {
                             updateBackend(
                                 selectedProduct.productName,
                                 selectedProduct.productId,

app/src/styles/layout/sidebar.scss

@@ -1278,6 +1278,9 @@
     }
   }
   .toggle-sidebar-ui-button {
+    svg{
+      transform: scaleX(-1);
+    }
     .tooltip {
       right: 56px;
       &::after {