@cullsin/lnc-menu 3.0.22 → 3.0.91

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export { default as SideMenu } from './src/SideMenu';
+export { getTranslations, en, es } from './src/translations';
+export type { Language, Translations } from './src/translations';
 import './src/sidemenu.scss';

package/dist/index.js

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

package/dist/src/SideMenu.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Location, NavigateFunction } from "react-router-dom";
+import { Language } from "./translations";
 interface SideMenuProps {
     useDrawer: () => {
         isDrawerOpen: boolean;
@@ -8,6 +9,7 @@ interface SideMenuProps {
     SampleMgmtIcon: React.ElementType;
     navigate: NavigateFunction;
     location: Location;
+    language?: Language;
 }
-declare function SideMenu({ useDrawer, SampleMgmtIcon, location }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function SideMenu({ useDrawer, SampleMgmtIcon, location, language }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
 export default SideMenu;

package/dist/src/SideMenu.js

@@ -1,6 +1,4 @@
 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 GroupAddOutlinedIcon from "@mui/icons-material/GroupAddOutlined";
 import AppBar from "@mui/material/AppBar";
@@ -14,44 +12,36 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Tooltip from "@mui/material/Tooltip";
 import * as React from "react";
-function SideMenu({ useDrawer, SampleMgmtIcon, location }) {
+import { getTranslations } from "./translations";
+function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
     const [selectedMainMenu, setSelectedMainMenu] = React.useState(null);
     const [selectedSubMenuPath, setSelectedSubMenuPath] = React.useState(null);
     const [openMenuIndex, setOpenMenuIndex] = React.useState(null);
     const { isDrawerOpen, toggleDrawer } = useDrawer();
     const [anchorEl, setAnchorEl] = React.useState(null);
+    const t = React.useMemo(() => getTranslations(language), [language]);
     const menuItems = React.useMemo(() => [
         {
-            text: "Home",
-            icon: _jsx(DashboardOutlinedIcon, {}),
-            subMenu: [{ text: "Dashboard", path: "/super-site/dashboard" }],
-        },
-        {
-            text: "Patient Management",
+            text: t.menu.patientManagement,
             icon: _jsx(RecentActorsOutlinedIcon, {}),
             subMenu: [
-                { text: "Patient", path: "/patient/patient-listing" },
-                { text: "Family", path: "/patient/family-listing" },
+                { text: t.menu.patient, path: `/patient/${language}/patient-listing` },
+                { text: t.menu.family, path: `/family/${language}/family-listing` },
             ],
         },
         {
-            text: "Sample Management",
+            text: t.menu.sampleManagement,
             icon: _jsx(SampleMgmtIcon, {}),
             subMenu: [
-                { text: "Sample Listing", path: "/sample/sample-listing" }
+                { text: t.menu.sampleListing, path: `/sample/${language}/sample-listing` }
             ],
         },
         {
-            text: "Reports",
-            icon: _jsx(ArticleOutlinedIcon, {}),
-            path: "/variant/",
-        },
-        {
-            text: "Carrier Duo/Trio",
+            text: t.menu.carrierDuoTrio,
             icon: _jsx(GroupAddOutlinedIcon, {}),
-            path: "/carrier-duo-trio/",
+            path: `/carrier-duo-trio/${language}/`,
         },
-    ], [SampleMgmtIcon]);
+    ], [SampleMgmtIcon, t, language]);
     // 🔁 Sync selection with current path
     React.useEffect(() => {
         const currentPath = location.pathname;
@@ -97,9 +87,9 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location }) {
                     "& .MuiDrawer-paper": {
                         width: isDrawerOpen ? 230 : 64,
                         transition: "width 0.3s ease",
-                        top: "64px",
-                        bottom: "0",
+                        height: "100vh",
                         borderRight: "1px solid #B1BECB",
+                        overflowY: "auto",
                     },
                 }, children: _jsx(List, { children: menuItems.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: item.text, placement: "right", disableHoverListener: isDrawerOpen, children: _jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: selectedMainMenu === item.text ? "selected" : "", onClick: (event) => {
                                         if (item.subMenu) {
@@ -121,16 +111,16 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location }) {
                                             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: {
+                                    }, children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }), item.subMenu && anchorEl && openMenuIndex === index && (_jsxs(Menu, { className: `app-menu-item ${!isDrawerOpen ? 'collapsed-menu' : ''}`, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, anchorOrigin: {
                                     vertical: "top",
-                                    horizontal: "left",
+                                    horizontal: "right",
                                 }, transformOrigin: {
                                     vertical: "top",
                                     horizontal: "left",
                                 }, PaperProps: {
                                     style: {
-                                        marginLeft: isDrawerOpen ? 230 : 65,
+                                        marginLeft: 8,
                                     },
-                                }, 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))) }) })] }));
+                                }, children: [!isDrawerOpen && (_jsx("span", { className: "submenu-title", children: 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/src/sidemenu.scss

@@ -0,0 +1,166 @@
+//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;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        margin-bottom: 5px;
+      }
+      .MuiMenuItem-root {
+        &.Mui-focusVisible {
+          background-color: transparent;
+        }
+
+        &:hover {
+          font: 16px/24px "OpenSans-SemiBold";
+          background: #374451;
+          border-radius: 6px;
+        }
+      }
+    }
+  }
+
+  &.collapsed-menu {
+    .MuiList-root {
+      &.MuiMenu-list {
+        &::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;
+      }
+    }
+  }
+}

package/dist/src/translations/en.d.ts

@@ -0,0 +1,13 @@
+export declare const en: {
+    menu: {
+        home: string;
+        patientManagement: string;
+        sampleManagement: string;
+        reports: string;
+        carrierDuoTrio: string;
+        dashboard: string;
+        patient: string;
+        family: string;
+        sampleListing: string;
+    };
+};

package/dist/src/translations/en.js

@@ -0,0 +1,13 @@
+export const en = {
+    menu: {
+        home: "Home",
+        patientManagement: "Patient Management",
+        sampleManagement: "Sample Management",
+        reports: "Reports",
+        carrierDuoTrio: "Carrier Duo/Trio",
+        dashboard: "Dashboard",
+        patient: "Patient",
+        family: "Family",
+        sampleListing: "Sample Listing",
+    },
+};

package/dist/src/translations/es.d.ts

@@ -0,0 +1,13 @@
+export declare const es: {
+    menu: {
+        home: string;
+        patientManagement: string;
+        sampleManagement: string;
+        reports: string;
+        carrierDuoTrio: string;
+        dashboard: string;
+        patient: string;
+        family: string;
+        sampleListing: string;
+    };
+};

package/dist/src/translations/es.js

@@ -0,0 +1,13 @@
+export const es = {
+    menu: {
+        home: "Inicio",
+        patientManagement: "Gestión de Pacientes",
+        sampleManagement: "Gestión de Muestras",
+        reports: "Informes",
+        carrierDuoTrio: "Portador Duo/Trio",
+        dashboard: "Panel",
+        patient: "Paciente",
+        family: "Familia",
+        sampleListing: "Listado de Muestras",
+    },
+};

package/dist/src/translations/index.d.ts

@@ -0,0 +1,6 @@
+import { en } from './en';
+import { es } from './es';
+export type Language = 'en' | 'es';
+export type Translations = typeof en;
+export declare const getTranslations: (language?: Language) => Translations;
+export { en, es };

package/dist/src/translations/index.js

@@ -0,0 +1,10 @@
+import { en } from './en';
+import { es } from './es';
+const translations = {
+    en,
+    es,
+};
+export const getTranslations = (language = 'en') => {
+    return translations[language] || translations.en;
+};
+export { en, es };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cullsin/lnc-menu",
-  "version": "3.0.22",
+  "version": "3.0.91",
   "description": "Reusable SideMenu component for MedGenome LNC platform using MUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "build": "tsc && npm run copy-scss",
-    "copy-scss": "cpy src/sidemenu.scss dist"
+    "copy-scss": "cpy src/sidemenu.scss dist/src"
   },
   "license": "MIT",
   "publishConfig": {