@cullsin/lnc-menu 1.0.0

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/src/SideMenu.d.ts

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

package/dist/src/SideMenu.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+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 DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
+import RecentActorsOutlinedIcon from "@mui/icons-material/RecentActorsOutlined";
+import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
+import { useNavigate } from "react-router-dom";
+import Tooltip from "@mui/material/Tooltip";
+function SideMenu({ useDrawer, SampleMgmtIcon }) {
+    const navigate = useNavigate();
+    const [selectedMainMenu, setSelectedMainMenu] = React.useState(null); // Track selected main menu
+    const { isDrawerOpen, toggleDrawer } = useDrawer();
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const handleMenuOpen = (event, index) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMenuClose = () => {
+        setAnchorEl(null);
+    };
+    const handleSubMenuItemClick = (path, parentText) => {
+        setSelectedMainMenu(parentText); // Set the main menu selected when a submenu item is clicked
+        handleMenuClose();
+        if (isDrawerOpen) {
+            toggleDrawer();
+        }
+        navigate(path);
+    };
+    const menuItems = [
+        { text: "Dashboard", icon: _jsx(DashboardOutlinedIcon, {}) },
+        {
+            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, {}) },
+        { 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: [_jsx(Tooltip, { title: item.text, arrow: true, placement: "bottom", disableHoverListener: isDrawerOpen, children: _jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: selectedMainMenu === item.text ? "selected" : "", onClick: (event) => {
+                                        if (item.subMenu) {
+                                            handleMenuOpen(event, index);
+                                            setSelectedMainMenu(item.text); // Set selected when main menu is clicked
+                                        }
+                                        else if (item.onClick) {
+                                            item.onClick();
+                                            setSelectedMainMenu(item.text); // Set selected when a menu is clicked
+                                        }
+                                    }, children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }), item.subMenu && anchorEl && (_jsxs(Menu, { 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, { onClick: () => handleSubMenuItemClick(subItem.path, item.text), children: subItem.text }, subItem.text)))] }))] }, index))) }) })] }));
+}
+export default SideMenu;

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@cullsin/lnc-menu",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@mui/icons-material": "^5.0.0",
+    "@mui/material": "^5.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0",
+    "sass": "^1.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.3"
+  },
+  "license": "MIT"
+}