Initial commit on new branch

src/components/Sidebar/Sidebar.js

@@ -0,0 +1,140 @@
+import { useState, useEffect } from "react";
+import { Link, useLocation } from "react-router-dom";
+import PropTypes from "prop-types";
+import { Sidebar as ProSidebar, Menu, MenuItem, SubMenu } from "react-pro-sidebar";
+import { fetchMenuItems } from "../../APIServices/MenuAPI";
+import routes from "routes.js";
+import "../Sidebar/Sidebar.css";
+
+const Sidebar = (props) => {
+  const [menuItems, setMenuItems] = useState([]);
+  const [collapsed, setCollapsed] = useState(false);
+  const [error, setError] = useState("");
+  const location = useLocation();
+
+  useEffect(() => {
+    loadMenuItems();
+  }, []);
+
+  const loadMenuItems = async () => {
+    try {
+      const respdata = await fetchMenuItems();
+      const data = respdata.data;
+      if (Array.isArray(data)) {
+        const dynamicRoutes = mapMenuToRoutes(data);
+        setMenuItems(dynamicRoutes);
+      } else if (data && typeof data === "object") {
+        const dynamicRoutes = mapMenuToRoutes([data]);
+        setMenuItems(dynamicRoutes);
+      } else {
+        console.error("Invalid menu data format:", data);
+        setError("Invalid menu data format.");
+      }
+    } catch (err) {
+      console.error("Error fetching menu items:", err);
+      setError(err.message || "Failed to fetch menu items.");
+    }
+  };
+
+  const mapMenuToRoutes = (menuArray) => {
+    if (!Array.isArray(menuArray)) {
+      console.error('Expected an array for menuArray, received:', menuArray);
+      return [];
+    }
+
+    return menuArray.map(menu => ({
+      path: menu.path || '#',
+      name: menu.name || menu.menuName || '',
+      icon: menu.icon || 'bi bi-grid',
+      submenu: Array.isArray(menu.submenu) ? mapMenuToRoutes(menu.submenu) : []
+    }));
+  };
+
+  const toggleSidebar = () => {
+    setCollapsed(!collapsed);
+    if (props.onSidebarToggle) {
+      props.onSidebarToggle(!collapsed);
+    }
+  };
+
+  const renderMenuItems = () => {
+    const allRoutes = [...routes, ...menuItems];
+
+    return allRoutes.map((route, key) => {
+      if (route.submenu && route.submenu.length > 0) {
+        return (
+          <SubMenu
+            key={key}
+            label={route.name}
+            icon={<i className={route.icon} />}
+          >
+            {route.submenu.map((submenu, subKey) => (
+              <MenuItem
+                key={`${key}-${subKey}`}
+                component={<Link to={submenu.path} />}
+                icon={<i className={submenu.icon || "bi bi-grid"} />}
+              >
+                {submenu.name}
+              </MenuItem>
+            ))}
+          </SubMenu>
+        );
+      }
+
+      return (
+        <MenuItem
+          key={key}
+          component={<Link to={route.path} />}
+          icon={<i className={route.icon || "bi bi-grid"} />}
+        >
+          {route.name}
+        </MenuItem>
+      );
+    });
+  };
+
+  const { logo } = props;
+
+  return (
+    <div className="sidebar-wrapper">
+      <ProSidebar
+        collapsed={collapsed}
+        className="app-sidebar"
+        backgroundColor="white"
+        width="220px"
+        collapsedWidth="30px"
+      >
+        <div className="sidebar-header">
+          {/* {logo && (
+            <Link to={logo.innerLink} className="logo-container">
+              <img alt={logo.imgAlt} className="navbar-brand-img" src={logo.imgSrc} />
+            </Link>
+          )} */}
+          <button
+            className="sidebar-toggle-btn"
+            type="button"
+            onClick={toggleSidebar}
+            title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          >
+            <i className={`bi ${collapsed ? "bi-chevron-right" : "bi-chevron-left"}`} />
+          </button>
+        </div>
+
+        <Menu>
+          {renderMenuItems()}
+        </Menu>
+      </ProSidebar>
+    </div>
+  );
+};
+
+Sidebar.defaultProps = {
+  logo: {},
+};
+
+Sidebar.propTypes = {
+  logo: PropTypes.object,
+  onSidebarToggle: PropTypes.func,
+};
+
+export default Sidebar;