@cullsin/lnc-menu 3.0.14 → 3.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cullsin/lnc-menu",
-  "version": "3.0.14",
+  "version": "3.0.15",
   "description": "Reusable SideMenu component for MedGenome LNC platform using MUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,8 +17,7 @@
   },
   "dependencies": {
     "@mui/icons-material": "^5.14.0",
-    "@mui/material": "^5.14.0",
-    "react-router-dom": "^7.6.2"
+    "@mui/material": "^5.14.0"
   },
   "devDependencies": {
     "cpy-cli": "^5.0.0",

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export { default as SideMenu } from './src/SideMenu';
-import './src/sidemenu.scss';

package/dist/index.js

@@ -1,2 +0,0 @@
-export { default as SideMenu } from './src/SideMenu';
-import './src/sidemenu.scss'; // consumer must support SCSS

package/dist/src/SideMenu.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { NavigateFunction } from "react-router-dom";
-interface SideMenuProps {
-    useDrawer: () => {
-        isDrawerOpen: boolean;
-        toggleDrawer: () => void;
-    };
-    SampleMgmtIcon: React.ElementType;
-    navigate: NavigateFunction;
-}
-declare function SideMenu({ useDrawer, SampleMgmtIcon, navigate }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
-export default SideMenu;

package/dist/src/SideMenu.js

@@ -1,113 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
-import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
-import RecentActorsOutlinedIcon from "@mui/icons-material/RecentActorsOutlined";
-import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
-import Drawer from "@mui/material/Drawer";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import * as React from "react";
-import { useLocation } from "react-router-dom"; // Import useLocation
-function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
-    const [selectedMainMenu, setSelectedMainMenu] = React.useState(null); // Track selected main menu
-    const [selectedSubMenuPath, setSelectedSubMenuPath] = React.useState(null);
-    const [openMenuIndex, setOpenMenuIndex] = React.useState(null);
-    const { isDrawerOpen, toggleDrawer } = useDrawer();
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const location = useLocation(); // Get the current location object
-    // Effect to set initial selection based on URL
-    React.useEffect(() => {
-        const currentPath = location.pathname;
-        menuItems.forEach((mainItem) => {
-            if (mainItem.subMenu) {
-                const matchingSubMenu = mainItem.subMenu.find((subItem) => subItem.path === currentPath);
-                if (matchingSubMenu) {
-                    setSelectedMainMenu(mainItem.text);
-                    setSelectedSubMenuPath(matchingSubMenu.path);
-                    return;
-                }
-            }
-        });
-    }, [location.pathname]); // Re-run when the path changes
-    const handleMenuOpen = (event, index) => {
-        setAnchorEl(event.currentTarget);
-        setOpenMenuIndex(index); // Keep track of which menu to open
-    };
-    const handleMenuClose = () => {
-        setAnchorEl(null);
-        setOpenMenuIndex(null);
-    };
-    const handleSubMenuItemClick = (path, parentText) => {
-        setSelectedMainMenu(parentText);
-        setSelectedSubMenuPath(path); // Set based on path for unique identification
-        handleMenuClose();
-        if (isDrawerOpen) {
-            toggleDrawer();
-        }
-        // Use navigate for client-side routing instead of window.location.href
-        navigate(path);
-    };
-    const menuItems = [
-        {
-            text: "Home",
-            icon: _jsx(DashboardOutlinedIcon, {}),
-            subMenu: [{ text: "Dashboard", path: "/super-site/dashboard" }],
-        },
-        {
-            text: "Patient Management",
-            icon: _jsx(RecentActorsOutlinedIcon, {}),
-            subMenu: [
-                { text: "Patient", path: "/patient/patient-listing" },
-                { text: "Family", path: "/patient/family-listing" },
-            ],
-        },
-        {
-            text: "Sample Management",
-            icon: _jsx(SampleMgmtIcon, {}),
-            subMenu: [
-                { text: "Dashboard", path: "/sample/sample-dashboard" },
-                { text: "Sample Listing", path: "/sample/sample-listing" },
-                {
-                    text: "Single Sample Analysis",
-                    path: "/sample/single-sample-analysis",
-                },
-            ],
-        },
-        { text: "Reports", icon: _jsx(ArticleOutlinedIcon, {}) },
-    ];
-    return (_jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(AppBar, { sx: { position: "fixed", top: 0 } }), _jsx(Drawer, { open: isDrawerOpen, variant: "permanent", className: "parent-container", sx: {
-                    width: isDrawerOpen ? 230 : 64,
-                    flexShrink: 0,
-                    "& .MuiDrawer-paper": {
-                        width: isDrawerOpen ? 230 : 64,
-                        transition: "width 0.3s ease",
-                        top: "64px",
-                        bottom: "0",
-                        borderRight: "1px solid #B1BECB",
-                    },
-                }, children: _jsx(List, { children: menuItems.map((item, index) => (_jsxs(React.Fragment, { children: [_jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: selectedMainMenu === item.text ? "selected" : "", onClick: (event) => {
-                                    if (item.subMenu) {
-                                        handleMenuOpen(event, index);
-                                    }
-                                    else if (item.onClick) {
-                                        item.onClick();
-                                        setSelectedMainMenu(item.text);
-                                    }
-                                }, children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }), item.subMenu && anchorEl && openMenuIndex === index && (_jsxs(Menu, { className: "app-menu-item", anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, anchorOrigin: {
-                                    vertical: "top",
-                                    horizontal: "left",
-                                }, transformOrigin: {
-                                    vertical: "top",
-                                    horizontal: "left",
-                                }, PaperProps: {
-                                    style: {
-                                        marginLeft: isDrawerOpen ? 230 : 65,
-                                    },
-                                }, children: [_jsx("span", { className: "submenu-title", children: !isDrawerOpen ? item.text : "" }), item.subMenu.map((subItem) => (_jsx(MenuItem, { selected: selectedSubMenuPath === subItem.path, onClick: () => handleSubMenuItemClick(subItem.path, item.text), children: subItem.text }, subItem.text)))] }))] }, index))) }) })] }));
-}
-export default SideMenu;

package/dist/src/sidemenu.scss

@@ -1,161 +0,0 @@
-//overwritten the default MUI css
-
-.MuiBox-root .MuiList-root {
-  background: linear-gradient(to bottom, #1e2f97, #0b1659) !important;
-  color: #fff;
-  height: 100%;
-  bottom: 0; // Ensure drawer stretches till bottom
-  padding: 20px 0;
-}
-
-.MuiList-root {
-  .MuiListItem-root {
-    padding: 15px;
-    &.selected {
-      padding: 7px;
-
-      .MuiListItemIcon-root {
-        background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
-        color: #1e2f97;
-        padding: 10px;
-        min-width: 25px;
-        border-top-left-radius: 5px;
-        border-bottom-left-radius: 5px;
-
-        &:only-of-type {
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
-        }
-      }
-
-      .MuiListItemText-root {
-        span {
-          background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
-          padding: 10px 0;
-          min-width: 25px;
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
-        }
-      }
-    }
-
-    &:hover:not(.selected) {
-      padding: 5px 7px;
-
-      .MuiListItemIcon-root {
-        background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
-        color: #1e2f97;
-        padding: 10px;
-        min-width: 25px;
-        border-top-left-radius: 5px;
-        border-bottom-left-radius: 5px;
-
-        &:only-of-type {
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
-        }
-      }
-
-      .MuiListItemText-root {
-        span {
-          background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
-          padding: 10px 0;
-          min-width: 25px;
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
-        }
-        .MuiTypography-root {
-          color: #1e2f97;
-        }
-      }
-    }
-
-    .MuiListItemIcon-root {
-      color: #fff;
-      min-width: 30px;
-      cursor: pointer;
-    }
-
-    .MuiListItemText-root {
-      margin-top: 0;
-      margin-bottom: 0;
-      .MuiTypography-root {
-        font: 14px/24px "OpenSans-SemiBold";
-        color: #fff;
-        cursor: pointer;
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
-.app-menu-item {
-  .MuiList-root {
-    &.MuiMenu-list {
-      background: linear-gradient(to bottom, #586d81, #3e4f60) !important;
-      color: #fff;
-      width: 200px;
-      padding: 10px;
-      position: relative;
-      overflow: visible;
-      .submenu-title {
-        text-transform: uppercase;
-        font: 12px / 18px "OpenSans-Regular";
-        color: #efffff;
-        padding: 0 0 5px 10px;
-        display: block;
-      }
-      .MuiMenuItem-root {
-        &.Mui-focusVisible {
-          background-color: transparent;
-        }
-
-        &:hover {
-          font: 16px/24px "OpenSans-SemiBold";
-          background: #374451;
-          border-radius: 6px;
-        }
-      }
-    }
-  }
-}
-
-ul.MuiList-root {
-  &:has(.submenu-title) {
-    &::before {
-      content: "";
-      position: absolute;
-      top: 15px;
-      left: -8px;
-      width: 0;
-      height: 0;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-      border-right: 8px solid #516578;
-      z-index: 2;
-    }
-  }
-}
-
-.MuiPopover-root {
-  .MuiPaper-root {
-    overflow: visible;
-    position: relative;
-    width: max-content;
-  }
-}
-
-.MuiList-root.MuiMenu-list {
-  border-radius: 5px;
-}
-
-#more-menu {
-  .MuiPaper-root {
-    .MuiMenu-list {
-      color: #1e2f97;
-      .MuiMenuItem-root {
-        font-size: 14px;
-      }
-    }
-  }
-}