sbx-crm-menu-ui 2.0.1-beta.0 → 2.0.1-beta.2

package/dist/components/menu/sidebar/Sidebar.d.ts

@@ -1,9 +1,8 @@
-import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { Route } from '../../../types/Common';
 import React from 'react';
 interface RoutesData {
     label: string;
-    icon: IconDefinition;
+    icon: string;
     subRoutes: Route[];
 }
 declare const SidebarComponent: (props: {

package/dist/components/menu/sidebar/SidebarItem.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { SidebarItemProps } from '../../../types/Common';
+export declare const iconsPath: Record<string, string>;
 declare const SidebarItem: ({ route }: SidebarItemProps) => React.JSX.Element;
 export default SidebarItem;

package/dist/components/menu/sidebar/subMenuComponent/SubMenuComponent.d.ts

@@ -4,9 +4,9 @@ interface View {
     path: string;
     name: string;
     root: string;
-    permission: string;
+    permission: string | string[];
     views?: View[];
 }
-export declare const generateSubMenuData: (labels: View[]) => Route[];
+export declare const generateSubMenuData: (labels: View[], callBackPath: (path: string) => void) => Route[];
 export declare const icons: Record<string, IconDefinition>;
 export {};

package/dist/index.css

@@ -14,7 +14,10 @@
 }
 
 .crm-class-sidebar-content {
-  padding: 100px 20px;
+  padding: 100px 10px;
+  width: 100%;
+  height: 100vh;
+  overflow: auto;
 }
 
 .crm-class-sidebar-list {

package/dist/index.d.ts

@@ -2,4 +2,6 @@ import TopNavBarComponent from './components/menu/TopNavBarComponent/TopNavBarCo
 import SidebarComponent from './components/menu/sidebar/Sidebar';
 import './styles.module.scss';
 import { generateSubMenuData, icons } from './components/menu/sidebar/subMenuComponent/SubMenuComponent';
+import { Route } from '../example/src/lib/dist/types/Common';
+export type { Route };
 export { TopNavBarComponent, SidebarComponent, generateSubMenuData, icons };

package/dist/index.js

@@ -147,10 +147,24 @@ function TopNavBarComponent(props) {
   })));
 }
 
+var iconsPath = {
+  'pe-7s-diamond': 'faGem',
+  'pe-7s-piggy': 'faPiggyBank',
+  'pe-7s-helm': 'faShip',
+  'pe-7s-hourglass': 'faHourglass',
+  'pe-7s-safe': 'faWallet',
+  'pe-7s-headphones': 'faHeadphones',
+  'pe-7s-next-2': 'faRectangleList',
+  'pe-7s-cloud-download': 'faCloudDownloadAlt',
+  'pe-7s-news-paper': 'faNewspaper',
+  'pe-7s-upload': 'faUpload',
+  'pe-7s-display1': 'faChartBar',
+  'pe-7s-settings': 'faCog'
+};
 var SidebarItem = function SidebarItem(_ref) {
-  var _route$subRoutes2;
   var route = _ref.route;
-  var icon = route.icon,
+  var _route$iconName = route.iconName,
+    iconName = _route$iconName === void 0 ? '' : _route$iconName,
     label = route.label,
     _route$subRoutes = route.subRoutes,
     subRoutes = _route$subRoutes === void 0 ? [] : _route$subRoutes,
@@ -163,11 +177,26 @@ var SidebarItem = function SidebarItem(_ref) {
       return !prevState;
     });
   };
+  var icon = React.useMemo(function () {
+    var name = iconsPath[iconName] || iconName;
+    return require("@fortawesome/free-regular-svg-icons")[name];
+  }, []);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("li", {
     className: "crm-class-sidebar-li " + (className != null ? className : ''),
-    onClick: toggleSubMenu
-  }, icon && icon, React__default.createElement("span", {
-    onClick: (_route$subRoutes2 = route.subRoutes) !== null && _route$subRoutes2 !== void 0 && _route$subRoutes2.length ? undefined : route.action,
+    onClick: function onClick() {
+      var _route$subRoutes2;
+      toggleSubMenu();
+      if (((_route$subRoutes2 = route.subRoutes) === null || _route$subRoutes2 === void 0 ? void 0 : _route$subRoutes2.length) === 0) {
+        var _route$action;
+        (_route$action = route.action) === null || _route$action === void 0 ? void 0 : _route$action.call(route);
+      }
+    }
+  }, icon && React__default.createElement("span", {
+    className: "crm-class-color-icon crm-class-mr-10"
+  }, React__default.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: icon,
+    className: "crm-class-color-icon"
+  })), React__default.createElement("span", {
     className: (route.selected ? 'crm-class-font-bold' : '') + "  "
   }, label), !!subRoutes.length && React__default.createElement("span", {
     className: "crm-class-ml-auto"
@@ -192,17 +221,12 @@ var generateRoute = function generateRoute(label, icon, _action, subRoutes) {
     label: label,
     visible: true,
     enable: true,
-    icon: React__default.createElement("span", {
-      className: "crm-class-color-icon crm-class-mr-10"
-    }, icon && React__default.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: icon,
-      className: "crm-class-color-icon"
-    })),
+    iconName: icon,
     action: function action() {
       return _action === null || _action === void 0 ? void 0 : _action();
     },
     subRoutes: subRoutes.map(function (subRoute) {
-      return generateRoute(subRoute.label, subRoute.icon, subRoute.action, subRoute.subRoutes || []);
+      return generateRoute(subRoute.label, subRoute === null || subRoute === void 0 ? void 0 : subRoute.iconName, subRoute.action, subRoute.subRoutes || []);
     })
   };
 };
@@ -233,13 +257,15 @@ var SidebarComponent = function SidebarComponent(props) {
   }, props.children));
 };
 
-var generateSubMenuData = function generateSubMenuData(labels) {
+var generateSubMenuData = function generateSubMenuData(labels, callBackPath) {
   return labels.map(function (label) {
     return {
       label: label.name,
       className: 'crm-class-ml-20',
-      path: label.path,
-      subRoutes: generateSubMenuData(label.views || [])
+      action: function action() {
+        return callBackPath(label.path);
+      },
+      subRoutes: generateSubMenuData(label.views || [], callBackPath)
     };
   });
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/utils/utils.ts","../src/components/dropdown/Dropdown.tsx","../src/components/contentMenuComponent/UserInfo.tsx","../src/components/contentMenuComponent/LanguageDropdown.tsx","../src/components/menu/TopNavBarComponent/TopNavBarComponent.tsx","../src/components/menu/sidebar/SidebarItem.tsx","../src/components/menu/sidebar/Sidebar.tsx","../src/components/menu/sidebar/subMenuComponent/SubMenuComponent.tsx"],"sourcesContent":["export function uuidV4() {\n  return ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c: any) =>\n    (\n      ((c ^ crypto.getRandomValues(new Uint8Array(1))[0]) & 15) >>\n      (c / 4)\n    ).toString(16)\n  )\n}\n\n\nexport const colors = {\n  'A': '#FF5733',\n  'B': '#33FF57',\n  'C': '#5733FF',\n  'D': '#FF33B8',\n  'E': '#33B8FF',\n  'F': '#FFFF33',\n  'G': '#33FFFF',\n  'H': '#FF33A6',\n  'I': '#33A6FF',\n  'J': '#FF9033',\n  'K': '#3390FF',\n  'L': '#FF33F6',\n  'M': '#33F6FF',\n  'N': '#C833FF',\n  'O': '#33FFC8',\n  'P': '#FFC833',\n  'Q': '#33FF58',\n  'R': '#FF5833',\n  'S': '#58FF33',\n  'T': '#FF3358',\n  'U': '#3358FF',\n  'V': '#FF33D6',\n  'W': '#33D6FF',\n  'X': '#FF336A',\n  'Y': '#336AFF',\n  'Z': '#FFD633'\n}\n","import React, { useState } from 'react'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'\nimport { colors } from '../../utils/utils'\n\nexport default function Dropdown(props: { startNameWord: string }) {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n\n  const toggleDropdown = () => {\n    setIsDropdownOpen(!isDropdownOpen)\n  }\n\n  return (\n    <div className=\"crm-class-dropdown crm-class-mr-20\" onClick={toggleDropdown}>\n      <span style={{ background: colors[props.startNameWord.toUpperCase()] }}\n            className=\"crm-class-top-nav-bar-avatar\">{props.startNameWord.toUpperCase()}</span>\n      <span className=\"crm-class-ml-20\">\n        <FontAwesomeIcon\n          icon={isDropdownOpen ? faChevronUp : faChevronDown}\n          className=\"crm-class-color-icon crm-class-slate-gray\"\n        />\n      </span>\n      {isDropdownOpen && (\n        <div className=\"crm-class-dropdown-content\">\n          <p>Dropdown content here</p>\n        </div>\n      )}\n    </div>\n  )\n}\n","import React from 'react'\n\n\ninterface Props {\n  email: string;\n  name: string;\n}\n\nexport default function UserInfo({ name, email }: Props) {\n  return (\n    <div className=\"crm-class-top-nav-bar-info-user\">\n      <span className=\"crm-class-font-bold\">{name} </span>\n      <span>{email}</span>\n    </div>\n  )\n}\n","import React, { useState } from 'react'\n\nexport interface Language {\n  code: string;\n  label: string;\n  flag: string;\n}\n\n\nexport default function LanguageDropdown(props: { languages: Language[] }) {\n  const [selectedLanguage, setSelectedLanguage] = useState<Language>(\n    props.languages[0]\n  )\n\n  const handleLanguageChange = (language: Language) => {\n    setSelectedLanguage(language)\n  }\n\n  return (\n    <div className=\"crm-class-dropdown-flag crm-class-mr-20\">\n      <span className=\"crm-class-content-flag\">\n        <span className={`crm-class-flag large ${selectedLanguage.flag}`}></span>\n      </span>\n\n      <div className=\"crm-class-dropdown-menu\">\n        <button className=\"crm-class-dropdown-toggle\" type=\"button\">\n          Choose Language\n        </button>\n        <h6 className=\"crm-class-dropdown-header\">Popular Languages</h6>\n        {props.languages.map((language) => (\n          <button\n            key={language.code}\n            type=\"button\"\n            className=\"crm-class-dropdown-item \"\n            onClick={() => handleLanguageChange(language)}\n          >\n            <span\n              className={` opacity-8 crm-class-flag large  crm-class-mr-20 ${language.flag}`}\n            ></span>\n            {language.code}\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n","import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React from 'react'\nimport Dropdown from '../../dropdown/Dropdown'\nimport UserInfo from '../../contentMenuComponent/UserInfo'\nimport LanguageDropdown, { Language } from '../../contentMenuComponent/LanguageDropdown'\n\ninterface Props {\n  languages: Language[];\n  onChooseLanguage?: (language: Language) => void;\n  user: {\n    name: string;\n    email: string;\n  },\n  logoSrc?: string;\n}\n\nexport default function TopNavBarComponent(props: Props) {\n\n\n  return (\n    <div className=\"crm-class-top-nav-bar\">\n      <div className=\"crm-class-flex-container\">\n        <FontAwesomeIcon\n          icon={faBars}\n          color=\"#3f6ad8\"\n          size=\"1x\"\n          className=\"crm-class-mr-20 crm-class-cursor-pointer\"\n        />\n        <div className=\"crm-class-flex-container\">\n          <div className=\"crm-class-icon-container crm-class-mr-20\">\n            <FontAwesomeIcon\n              icon={faSearch}\n              color=\"#3f6ad8\"\n              className=\"\"\n              size=\"1x\"\n            />\n          </div>\n\n          <img\n            src={props.logoSrc ?? 'https://via.placeholder.com/150'}\n            style={{ height: '30px' }}\n            alt=\"\"\n          />\n        </div>\n      </div>\n      <div className=\"crm-class-top-nav-bar-options\">\n        {/*  */}\n\n        <LanguageDropdown languages={props.languages} />\n\n\n        <Dropdown startNameWord={props.user.name?.[0]} />\n        <UserInfo name={props.user.name} email={props.user.email} />\n      </div>\n    </div>\n  )\n}\n","import React, { useState } from 'react'\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { SidebarItemProps } from '../../../types/Common'\nimport { uuidV4 } from '../../../utils/utils'\n\nconst SidebarItem = ({ route }: SidebarItemProps) => {\n  const { icon, label, subRoutes = [], className } = route\n  const [isSubMenuOpen, setIsSubMenuOpen] = useState(route.selected || false)\n\n  const toggleSubMenu = () => {\n    setIsSubMenuOpen((prevState) => !prevState)\n  }\n  return (\n    <React.Fragment>\n      <li\n        className={`crm-class-sidebar-li ${className ?? ''}`}\n        onClick={toggleSubMenu}\n      >\n        {icon && icon}\n        <span onClick={route.subRoutes?.length ? undefined : route.action}\n              className={`${route.selected ? 'crm-class-font-bold' : ''}  `}>{label}</span>\n\n        {!!subRoutes.length && (\n          <span className=\"crm-class-ml-auto\">\n            <FontAwesomeIcon\n              icon={isSubMenuOpen ? faChevronUp : faChevronDown}\n              className=\"crm-class-color-icon crm-class-font-10 crm-class-slate-gray\"\n            />\n          </span>\n        )}\n      </li>\n      {(isSubMenuOpen) && !!subRoutes.length && (\n        <ul className=\"crm-class-sidebar-sub-menu-list\">\n          {subRoutes?.map((item) => (\n            <SidebarItem key={uuidV4()} route={item} />\n          ))}\n        </ul>\n      )}\n    </React.Fragment>\n  )\n}\n\nexport default SidebarItem\n","import { IconDefinition } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nimport { Route } from '../../../types/Common'\nimport SidebarItem from './SidebarItem'\nimport React from 'react'\n\ninterface RoutesData {\n  label: string;\n  icon: IconDefinition;\n  subRoutes: Route[];\n}\n\nconst generateRoute = (\n  label: string,\n  icon: React.ReactNode | IconDefinition,\n  action?: () => void,\n  subRoutes: Route[] = []\n): Route => ({\n  label,\n  visible: true,\n  enable: true,\n  icon: (\n    <span className=\"crm-class-color-icon crm-class-mr-10\">\n      {icon && (\n        <FontAwesomeIcon\n          icon={icon as IconDefinition}\n          className=\"crm-class-color-icon\"\n        />\n      )}\n    </span>\n  ),\n  action: () => action?.(),\n  subRoutes: subRoutes.map((subRoute) =>\n    generateRoute(subRoute.label, subRoute.icon, subRoute.action, subRoute.subRoutes || [])\n  )\n})\n\nconst generateRoutes = (\n  routesData: {\n    label: string;\n    icon: IconDefinition | undefined;\n    action?: () => void;\n    subRoutes: Route[];\n  }[]\n): Route[] => {\n  return routesData.map((routeData) =>\n    generateRoute(routeData.label, routeData?.icon, routeData.action, routeData.subRoutes)\n  )\n}\n\nconst SidebarComponent = (props: { routesData: RoutesData[], children: React.ReactNode }) => {\n\n\n  const routes: Route[] = generateRoutes(props.routesData)\n\n  return (\n    <div style={{ display: 'flex' }}>\n      <div className=\"crm-class-sidebar\">\n        <ul className=\"crm-class-sidebar-list\">\n          <span className=\"crm-class-title\">MENU</span>\n\n          {routes.map((route, index) => (\n            <SidebarItem key={`route_${index}`} route={route} />\n          ))}\n\n        </ul>\n      </div>\n      <div className=\"crm-class-sidebar-content\">\n        {props.children}\n      </div>\n    </div>\n  )\n}\nexport default SidebarComponent\n","import { faGem } from '@fortawesome/free-regular-svg-icons'\nimport { Route } from '../../../../types/Common'\nimport { IconDefinition } from '@fortawesome/free-solid-svg-icons'\n\ninterface View {\n  path: string;\n  name: string;\n  root: string;\n  permission: string;\n  views?: View[];\n}\n\nexport const generateSubMenuData = (labels: View[]): Route[] => {\n  return labels.map((label) => ({\n    label: label.name,\n    className: 'crm-class-ml-20',\n    path: label.path,\n    subRoutes: generateSubMenuData(label.views || [])\n  }))\n}\n\nexport const icons: Record<string, IconDefinition> = {\n  diamond: faGem,\n  default: faGem\n}\n"],"names":["uuidV4","replace","c","crypto","getRandomValues","Uint8Array","toString","colors","Dropdown","props","_useState","useState","isDropdownOpen","setIsDropdownOpen","toggleDropdown","React","className","onClick","style","background","startNameWord","toUpperCase","FontAwesomeIcon","icon","faChevronUp","faChevronDown","UserInfo","_ref","name","email","LanguageDropdown","languages","selectedLanguage","setSelectedLanguage","handleLanguageChange","language","flag","type","map","key","code","TopNavBarComponent","faBars","color","size","faSearch","src","_props$logoSrc","logoSrc","height","alt","_props$user$name","user","SidebarItem","route","label","_route$subRoutes","subRoutes","selected","isSubMenuOpen","setIsSubMenuOpen","toggleSubMenu","prevState","Fragment","_route$subRoutes2","length","undefined","action","item","generateRoute","visible","enable","subRoute","generateRoutes","routesData","routeData","SidebarComponent","routes","display","index","children","generateSubMenuData","labels","path","views","icons","diamond","faGem"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/utils/utils.ts","../src/components/dropdown/Dropdown.tsx","../src/components/contentMenuComponent/UserInfo.tsx","../src/components/contentMenuComponent/LanguageDropdown.tsx","../src/components/menu/TopNavBarComponent/TopNavBarComponent.tsx","../src/components/menu/sidebar/SidebarItem.tsx","../src/components/menu/sidebar/Sidebar.tsx","../src/components/menu/sidebar/subMenuComponent/SubMenuComponent.tsx"],"sourcesContent":["export function uuidV4() {\n  return ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c: any) =>\n    (\n      ((c ^ crypto.getRandomValues(new Uint8Array(1))[0]) & 15) >>\n      (c / 4)\n    ).toString(16)\n  )\n}\n\n\nexport const colors = {\n  'A': '#FF5733',\n  'B': '#33FF57',\n  'C': '#5733FF',\n  'D': '#FF33B8',\n  'E': '#33B8FF',\n  'F': '#FFFF33',\n  'G': '#33FFFF',\n  'H': '#FF33A6',\n  'I': '#33A6FF',\n  'J': '#FF9033',\n  'K': '#3390FF',\n  'L': '#FF33F6',\n  'M': '#33F6FF',\n  'N': '#C833FF',\n  'O': '#33FFC8',\n  'P': '#FFC833',\n  'Q': '#33FF58',\n  'R': '#FF5833',\n  'S': '#58FF33',\n  'T': '#FF3358',\n  'U': '#3358FF',\n  'V': '#FF33D6',\n  'W': '#33D6FF',\n  'X': '#FF336A',\n  'Y': '#336AFF',\n  'Z': '#FFD633'\n}\n","import React, { useState } from 'react'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'\nimport { colors } from '../../utils/utils'\n\nexport default function Dropdown(props: { startNameWord: string }) {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n\n  const toggleDropdown = () => {\n    setIsDropdownOpen(!isDropdownOpen)\n  }\n\n  return (\n    <div className=\"crm-class-dropdown crm-class-mr-20\" onClick={toggleDropdown}>\n      <span style={{ background: colors[props.startNameWord.toUpperCase()] }}\n            className=\"crm-class-top-nav-bar-avatar\">{props.startNameWord.toUpperCase()}</span>\n      <span className=\"crm-class-ml-20\">\n        <FontAwesomeIcon\n          icon={isDropdownOpen ? faChevronUp : faChevronDown}\n          className=\"crm-class-color-icon crm-class-slate-gray\"\n        />\n      </span>\n      {isDropdownOpen && (\n        <div className=\"crm-class-dropdown-content\">\n          <p>Dropdown content here</p>\n        </div>\n      )}\n    </div>\n  )\n}\n","import React from 'react'\n\n\ninterface Props {\n  email: string;\n  name: string;\n}\n\nexport default function UserInfo({ name, email }: Props) {\n  return (\n    <div className=\"crm-class-top-nav-bar-info-user\">\n      <span className=\"crm-class-font-bold\">{name} </span>\n      <span>{email}</span>\n    </div>\n  )\n}\n","import React, { useState } from 'react'\n\nexport interface Language {\n  code: string;\n  label: string;\n  flag: string;\n}\n\n\nexport default function LanguageDropdown(props: { languages: Language[] }) {\n  const [selectedLanguage, setSelectedLanguage] = useState<Language>(\n    props.languages[0]\n  )\n\n  const handleLanguageChange = (language: Language) => {\n    setSelectedLanguage(language)\n  }\n\n  return (\n    <div className=\"crm-class-dropdown-flag crm-class-mr-20\">\n      <span className=\"crm-class-content-flag\">\n        <span className={`crm-class-flag large ${selectedLanguage.flag}`}></span>\n      </span>\n\n      <div className=\"crm-class-dropdown-menu\">\n        <button className=\"crm-class-dropdown-toggle\" type=\"button\">\n          Choose Language\n        </button>\n        <h6 className=\"crm-class-dropdown-header\">Popular Languages</h6>\n        {props.languages.map((language) => (\n          <button\n            key={language.code}\n            type=\"button\"\n            className=\"crm-class-dropdown-item \"\n            onClick={() => handleLanguageChange(language)}\n          >\n            <span\n              className={` opacity-8 crm-class-flag large  crm-class-mr-20 ${language.flag}`}\n            ></span>\n            {language.code}\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n","import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React from 'react'\nimport Dropdown from '../../dropdown/Dropdown'\nimport UserInfo from '../../contentMenuComponent/UserInfo'\nimport LanguageDropdown, { Language } from '../../contentMenuComponent/LanguageDropdown'\n\ninterface Props {\n  languages: Language[];\n  onChooseLanguage?: (language: Language) => void;\n  user: {\n    name: string;\n    email: string;\n  },\n  logoSrc?: string;\n}\n\nexport default function TopNavBarComponent(props: Props) {\n\n\n  return (\n    <div className=\"crm-class-top-nav-bar\">\n      <div className=\"crm-class-flex-container\">\n        <FontAwesomeIcon\n          icon={faBars}\n          color=\"#3f6ad8\"\n          size=\"1x\"\n          className=\"crm-class-mr-20 crm-class-cursor-pointer\"\n        />\n        <div className=\"crm-class-flex-container\">\n          <div className=\"crm-class-icon-container crm-class-mr-20\">\n            <FontAwesomeIcon\n              icon={faSearch}\n              color=\"#3f6ad8\"\n              className=\"\"\n              size=\"1x\"\n            />\n          </div>\n\n          <img\n            src={props.logoSrc ?? 'https://via.placeholder.com/150'}\n            style={{ height: '30px' }}\n            alt=\"\"\n          />\n        </div>\n      </div>\n      <div className=\"crm-class-top-nav-bar-options\">\n        {/*  */}\n\n        <LanguageDropdown languages={props.languages} />\n\n\n        <Dropdown startNameWord={props.user.name?.[0]} />\n        <UserInfo name={props.user.name} email={props.user.email} />\n      </div>\n    </div>\n  )\n}\n","import React, { useMemo, useState } from 'react'\nimport { faChevronDown, faChevronUp, IconDefinition } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { SidebarItemProps } from '../../../types/Common'\nimport { uuidV4 } from '../../../utils/utils'\n\nexport const iconsPath: Record<string, string> = {\n  'pe-7s-diamond': 'faGem',\n  'pe-7s-piggy': 'faPiggyBank',\n  'pe-7s-helm': 'faShip',\n  'pe-7s-hourglass': 'faHourglass',\n  'pe-7s-safe': 'faWallet',\n  'pe-7s-headphones': 'faHeadphones',\n  'pe-7s-next-2': 'faRectangleList',\n  'pe-7s-cloud-download': 'faCloudDownloadAlt',\n  'pe-7s-news-paper': 'faNewspaper',\n  'pe-7s-upload': 'faUpload',\n  'pe-7s-display1': 'faChartBar',\n  'pe-7s-settings': 'faCog'\n}\n\nconst SidebarItem = ({ route }: SidebarItemProps) => {\n  const { iconName = '', label, subRoutes = [], className } = route\n  const [isSubMenuOpen, setIsSubMenuOpen] = useState(route.selected || false)\n\n  const toggleSubMenu = () => {\n    setIsSubMenuOpen((prevState) => !prevState)\n  }\n\n  const icon: IconDefinition = useMemo(() => {\n    const name = iconsPath[iconName] || iconName\n    // eslint-disable-next-line @typescript-eslint/no-var-requires\n    return require(`@fortawesome/free-regular-svg-icons`)[name]\n  }, [])\n\n  return (\n    <React.Fragment>\n      <li\n        className={`crm-class-sidebar-li ${className ?? ''}`}\n        onClick={() => {\n          toggleSubMenu()\n          if (route.subRoutes?.length === 0) {\n            route.action?.()\n          }\n        }}\n      >\n        {icon && (\n          <span className=\"crm-class-color-icon crm-class-mr-10\">\n              <FontAwesomeIcon\n                icon={icon}\n                className=\"crm-class-color-icon\"\n              />\n          </span>\n        )}\n        <span\n          // onClick={route.subRoutes?.length ? undefined : route.action}\n          className={`${route.selected ? 'crm-class-font-bold' : ''}  `}\n        >{label}</span>\n\n        {!!subRoutes.length && (\n          <span className=\"crm-class-ml-auto\">\n            <FontAwesomeIcon\n              icon={isSubMenuOpen ? faChevronUp : faChevronDown}\n              className=\"crm-class-color-icon crm-class-font-10 crm-class-slate-gray\"\n            />\n          </span>\n        )}\n      </li>\n      {(isSubMenuOpen) && !!subRoutes.length && (\n        <ul className=\"crm-class-sidebar-sub-menu-list\">\n          {subRoutes?.map((item) => (\n            <SidebarItem key={uuidV4()} route={item} />\n          ))}\n        </ul>\n      )}\n    </React.Fragment>\n  )\n}\n\nexport default SidebarItem\n","// import { IconDefinition } from '@fortawesome/free-solid-svg-icons'\n// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nimport { Route } from '../../../types/Common'\nimport SidebarItem from './SidebarItem'\nimport React from 'react'\n\ninterface RoutesData {\n  label: string;\n  icon: string;\n  subRoutes: Route[];\n}\n\nconst generateRoute = (\n  label: string,\n  icon: string | undefined,\n  action?: () => void,\n  subRoutes: Route[] = []\n): Route => ({\n  label,\n  visible: true,\n  enable: true,\n  iconName: icon,\n  action: () => action?.(),\n  subRoutes: subRoutes.map((subRoute) =>\n    generateRoute(subRoute.label, subRoute?.iconName, subRoute.action, subRoute.subRoutes || [])\n  )\n})\n\nconst generateRoutes = (\n  routesData: {\n    label: string;\n    icon: string;\n    action?: () => void;\n    subRoutes: Route[];\n  }[]\n): Route[] => {\n  return routesData.map((routeData) =>\n    generateRoute(routeData.label, routeData?.icon, routeData.action, routeData.subRoutes)\n  )\n}\n\nconst SidebarComponent = (props: { routesData: RoutesData[], children: React.ReactNode }) => {\n\n\n  const routes: Route[] = generateRoutes(props.routesData)\n\n  return (\n    <div style={{ display: 'flex' }}>\n      <div className=\"crm-class-sidebar\">\n        <ul className=\"crm-class-sidebar-list\">\n          <span className=\"crm-class-title\">MENU</span>\n\n          {routes.map((route, index) => (\n            <SidebarItem key={`route_${index}`} route={route} />\n          ))}\n\n        </ul>\n      </div>\n      <div className=\"crm-class-sidebar-content\">\n        {props.children}\n      </div>\n    </div>\n  )\n}\nexport default SidebarComponent\n","import { faGem } from '@fortawesome/free-regular-svg-icons'\nimport { Route } from '../../../../types/Common'\nimport { IconDefinition } from '@fortawesome/free-solid-svg-icons'\n\ninterface View {\n  path: string;\n  name: string;\n  root: string;\n  permission: string | string[];\n  views?: View[];\n}\n\nexport const generateSubMenuData = (labels: View[], callBackPath: (path: string) => void): Route[] => {\n  return labels.map((label) => ({\n    label: label.name,\n    className: 'crm-class-ml-20',\n    action: () => callBackPath(label.path),\n    subRoutes: generateSubMenuData(label.views || [], callBackPath)\n  }))\n}\n\nexport const icons: Record<string, IconDefinition> = {\n  diamond: faGem,\n  default: faGem\n}\n"],"names":["uuidV4","replace","c","crypto","getRandomValues","Uint8Array","toString","colors","Dropdown","props","_useState","useState","isDropdownOpen","setIsDropdownOpen","toggleDropdown","React","className","onClick","style","background","startNameWord","toUpperCase","FontAwesomeIcon","icon","faChevronUp","faChevronDown","UserInfo","_ref","name","email","LanguageDropdown","languages","selectedLanguage","setSelectedLanguage","handleLanguageChange","language","flag","type","map","key","code","TopNavBarComponent","faBars","color","size","faSearch","src","_props$logoSrc","logoSrc","height","alt","_props$user$name","user","iconsPath","SidebarItem","route","_route$iconName","iconName","label","_route$subRoutes","subRoutes","selected","isSubMenuOpen","setIsSubMenuOpen","toggleSubMenu","prevState","useMemo","require","Fragment","_route$subRoutes2","length","_route$action","action","call","item","generateRoute","visible","enable","subRoute","generateRoutes","routesData","routeData","SidebarComponent","routes","display","index","children","generateSubMenuData","labels","callBackPath","path","views","icons","diamond","faGem"],"mappings":"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"}

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import { faChevronUp, faChevronDown, faBars, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { faGem } from '@fortawesome/free-regular-svg-icons';
 
 function uuidV4() {
@@ -144,10 +144,24 @@ function TopNavBarComponent(props) {
   })));
 }
 
+var iconsPath = {
+  'pe-7s-diamond': 'faGem',
+  'pe-7s-piggy': 'faPiggyBank',
+  'pe-7s-helm': 'faShip',
+  'pe-7s-hourglass': 'faHourglass',
+  'pe-7s-safe': 'faWallet',
+  'pe-7s-headphones': 'faHeadphones',
+  'pe-7s-next-2': 'faRectangleList',
+  'pe-7s-cloud-download': 'faCloudDownloadAlt',
+  'pe-7s-news-paper': 'faNewspaper',
+  'pe-7s-upload': 'faUpload',
+  'pe-7s-display1': 'faChartBar',
+  'pe-7s-settings': 'faCog'
+};
 var SidebarItem = function SidebarItem(_ref) {
-  var _route$subRoutes2;
   var route = _ref.route;
-  var icon = route.icon,
+  var _route$iconName = route.iconName,
+    iconName = _route$iconName === void 0 ? '' : _route$iconName,
     label = route.label,
     _route$subRoutes = route.subRoutes,
     subRoutes = _route$subRoutes === void 0 ? [] : _route$subRoutes,
@@ -160,11 +174,26 @@ var SidebarItem = function SidebarItem(_ref) {
       return !prevState;
     });
   };
+  var icon = useMemo(function () {
+    var name = iconsPath[iconName] || iconName;
+    return require("@fortawesome/free-regular-svg-icons")[name];
+  }, []);
   return React.createElement(React.Fragment, null, React.createElement("li", {
     className: "crm-class-sidebar-li " + (className != null ? className : ''),
-    onClick: toggleSubMenu
-  }, icon && icon, React.createElement("span", {
-    onClick: (_route$subRoutes2 = route.subRoutes) !== null && _route$subRoutes2 !== void 0 && _route$subRoutes2.length ? undefined : route.action,
+    onClick: function onClick() {
+      var _route$subRoutes2;
+      toggleSubMenu();
+      if (((_route$subRoutes2 = route.subRoutes) === null || _route$subRoutes2 === void 0 ? void 0 : _route$subRoutes2.length) === 0) {
+        var _route$action;
+        (_route$action = route.action) === null || _route$action === void 0 ? void 0 : _route$action.call(route);
+      }
+    }
+  }, icon && React.createElement("span", {
+    className: "crm-class-color-icon crm-class-mr-10"
+  }, React.createElement(FontAwesomeIcon, {
+    icon: icon,
+    className: "crm-class-color-icon"
+  })), React.createElement("span", {
     className: (route.selected ? 'crm-class-font-bold' : '') + "  "
   }, label), !!subRoutes.length && React.createElement("span", {
     className: "crm-class-ml-auto"
@@ -189,17 +218,12 @@ var generateRoute = function generateRoute(label, icon, _action, subRoutes) {
     label: label,
     visible: true,
     enable: true,
-    icon: React.createElement("span", {
-      className: "crm-class-color-icon crm-class-mr-10"
-    }, icon && React.createElement(FontAwesomeIcon, {
-      icon: icon,
-      className: "crm-class-color-icon"
-    })),
+    iconName: icon,
     action: function action() {
       return _action === null || _action === void 0 ? void 0 : _action();
     },
     subRoutes: subRoutes.map(function (subRoute) {
-      return generateRoute(subRoute.label, subRoute.icon, subRoute.action, subRoute.subRoutes || []);
+      return generateRoute(subRoute.label, subRoute === null || subRoute === void 0 ? void 0 : subRoute.iconName, subRoute.action, subRoute.subRoutes || []);
     })
   };
 };
@@ -230,13 +254,15 @@ var SidebarComponent = function SidebarComponent(props) {
   }, props.children));
 };
 
-var generateSubMenuData = function generateSubMenuData(labels) {
+var generateSubMenuData = function generateSubMenuData(labels, callBackPath) {
   return labels.map(function (label) {
     return {
       label: label.name,
       className: 'crm-class-ml-20',
-      path: label.path,
-      subRoutes: generateSubMenuData(label.views || [])
+      action: function action() {
+        return callBackPath(label.path);
+      },
+      subRoutes: generateSubMenuData(label.views || [], callBackPath)
     };
   });
 };

package/dist/index.modern.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/utils/utils.ts","../src/components/dropdown/Dropdown.tsx","../src/components/contentMenuComponent/UserInfo.tsx","../src/components/contentMenuComponent/LanguageDropdown.tsx","../src/components/menu/TopNavBarComponent/TopNavBarComponent.tsx","../src/components/menu/sidebar/SidebarItem.tsx","../src/components/menu/sidebar/Sidebar.tsx","../src/components/menu/sidebar/subMenuComponent/SubMenuComponent.tsx"],"sourcesContent":["export function uuidV4() {\n  return ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c: any) =>\n    (\n      ((c ^ crypto.getRandomValues(new Uint8Array(1))[0]) & 15) >>\n      (c / 4)\n    ).toString(16)\n  )\n}\n\n\nexport const colors = {\n  'A': '#FF5733',\n  'B': '#33FF57',\n  'C': '#5733FF',\n  'D': '#FF33B8',\n  'E': '#33B8FF',\n  'F': '#FFFF33',\n  'G': '#33FFFF',\n  'H': '#FF33A6',\n  'I': '#33A6FF',\n  'J': '#FF9033',\n  'K': '#3390FF',\n  'L': '#FF33F6',\n  'M': '#33F6FF',\n  'N': '#C833FF',\n  'O': '#33FFC8',\n  'P': '#FFC833',\n  'Q': '#33FF58',\n  'R': '#FF5833',\n  'S': '#58FF33',\n  'T': '#FF3358',\n  'U': '#3358FF',\n  'V': '#FF33D6',\n  'W': '#33D6FF',\n  'X': '#FF336A',\n  'Y': '#336AFF',\n  'Z': '#FFD633'\n}\n","import React, { useState } from 'react'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'\nimport { colors } from '../../utils/utils'\n\nexport default function Dropdown(props: { startNameWord: string }) {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n\n  const toggleDropdown = () => {\n    setIsDropdownOpen(!isDropdownOpen)\n  }\n\n  return (\n    <div className=\"crm-class-dropdown crm-class-mr-20\" onClick={toggleDropdown}>\n      <span style={{ background: colors[props.startNameWord.toUpperCase()] }}\n            className=\"crm-class-top-nav-bar-avatar\">{props.startNameWord.toUpperCase()}</span>\n      <span className=\"crm-class-ml-20\">\n        <FontAwesomeIcon\n          icon={isDropdownOpen ? faChevronUp : faChevronDown}\n          className=\"crm-class-color-icon crm-class-slate-gray\"\n        />\n      </span>\n      {isDropdownOpen && (\n        <div className=\"crm-class-dropdown-content\">\n          <p>Dropdown content here</p>\n        </div>\n      )}\n    </div>\n  )\n}\n","import React from 'react'\n\n\ninterface Props {\n  email: string;\n  name: string;\n}\n\nexport default function UserInfo({ name, email }: Props) {\n  return (\n    <div className=\"crm-class-top-nav-bar-info-user\">\n      <span className=\"crm-class-font-bold\">{name} </span>\n      <span>{email}</span>\n    </div>\n  )\n}\n","import React, { useState } from 'react'\n\nexport interface Language {\n  code: string;\n  label: string;\n  flag: string;\n}\n\n\nexport default function LanguageDropdown(props: { languages: Language[] }) {\n  const [selectedLanguage, setSelectedLanguage] = useState<Language>(\n    props.languages[0]\n  )\n\n  const handleLanguageChange = (language: Language) => {\n    setSelectedLanguage(language)\n  }\n\n  return (\n    <div className=\"crm-class-dropdown-flag crm-class-mr-20\">\n      <span className=\"crm-class-content-flag\">\n        <span className={`crm-class-flag large ${selectedLanguage.flag}`}></span>\n      </span>\n\n      <div className=\"crm-class-dropdown-menu\">\n        <button className=\"crm-class-dropdown-toggle\" type=\"button\">\n          Choose Language\n        </button>\n        <h6 className=\"crm-class-dropdown-header\">Popular Languages</h6>\n        {props.languages.map((language) => (\n          <button\n            key={language.code}\n            type=\"button\"\n            className=\"crm-class-dropdown-item \"\n            onClick={() => handleLanguageChange(language)}\n          >\n            <span\n              className={` opacity-8 crm-class-flag large  crm-class-mr-20 ${language.flag}`}\n            ></span>\n            {language.code}\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n","import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React from 'react'\nimport Dropdown from '../../dropdown/Dropdown'\nimport UserInfo from '../../contentMenuComponent/UserInfo'\nimport LanguageDropdown, { Language } from '../../contentMenuComponent/LanguageDropdown'\n\ninterface Props {\n  languages: Language[];\n  onChooseLanguage?: (language: Language) => void;\n  user: {\n    name: string;\n    email: string;\n  },\n  logoSrc?: string;\n}\n\nexport default function TopNavBarComponent(props: Props) {\n\n\n  return (\n    <div className=\"crm-class-top-nav-bar\">\n      <div className=\"crm-class-flex-container\">\n        <FontAwesomeIcon\n          icon={faBars}\n          color=\"#3f6ad8\"\n          size=\"1x\"\n          className=\"crm-class-mr-20 crm-class-cursor-pointer\"\n        />\n        <div className=\"crm-class-flex-container\">\n          <div className=\"crm-class-icon-container crm-class-mr-20\">\n            <FontAwesomeIcon\n              icon={faSearch}\n              color=\"#3f6ad8\"\n              className=\"\"\n              size=\"1x\"\n            />\n          </div>\n\n          <img\n            src={props.logoSrc ?? 'https://via.placeholder.com/150'}\n            style={{ height: '30px' }}\n            alt=\"\"\n          />\n        </div>\n      </div>\n      <div className=\"crm-class-top-nav-bar-options\">\n        {/*  */}\n\n        <LanguageDropdown languages={props.languages} />\n\n\n        <Dropdown startNameWord={props.user.name?.[0]} />\n        <UserInfo name={props.user.name} email={props.user.email} />\n      </div>\n    </div>\n  )\n}\n","import React, { useState } from 'react'\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { SidebarItemProps } from '../../../types/Common'\nimport { uuidV4 } from '../../../utils/utils'\n\nconst SidebarItem = ({ route }: SidebarItemProps) => {\n  const { icon, label, subRoutes = [], className } = route\n  const [isSubMenuOpen, setIsSubMenuOpen] = useState(route.selected || false)\n\n  const toggleSubMenu = () => {\n    setIsSubMenuOpen((prevState) => !prevState)\n  }\n  return (\n    <React.Fragment>\n      <li\n        className={`crm-class-sidebar-li ${className ?? ''}`}\n        onClick={toggleSubMenu}\n      >\n        {icon && icon}\n        <span onClick={route.subRoutes?.length ? undefined : route.action}\n              className={`${route.selected ? 'crm-class-font-bold' : ''}  `}>{label}</span>\n\n        {!!subRoutes.length && (\n          <span className=\"crm-class-ml-auto\">\n            <FontAwesomeIcon\n              icon={isSubMenuOpen ? faChevronUp : faChevronDown}\n              className=\"crm-class-color-icon crm-class-font-10 crm-class-slate-gray\"\n            />\n          </span>\n        )}\n      </li>\n      {(isSubMenuOpen) && !!subRoutes.length && (\n        <ul className=\"crm-class-sidebar-sub-menu-list\">\n          {subRoutes?.map((item) => (\n            <SidebarItem key={uuidV4()} route={item} />\n          ))}\n        </ul>\n      )}\n    </React.Fragment>\n  )\n}\n\nexport default SidebarItem\n","import { IconDefinition } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nimport { Route } from '../../../types/Common'\nimport SidebarItem from './SidebarItem'\nimport React from 'react'\n\ninterface RoutesData {\n  label: string;\n  icon: IconDefinition;\n  subRoutes: Route[];\n}\n\nconst generateRoute = (\n  label: string,\n  icon: React.ReactNode | IconDefinition,\n  action?: () => void,\n  subRoutes: Route[] = []\n): Route => ({\n  label,\n  visible: true,\n  enable: true,\n  icon: (\n    <span className=\"crm-class-color-icon crm-class-mr-10\">\n      {icon && (\n        <FontAwesomeIcon\n          icon={icon as IconDefinition}\n          className=\"crm-class-color-icon\"\n        />\n      )}\n    </span>\n  ),\n  action: () => action?.(),\n  subRoutes: subRoutes.map((subRoute) =>\n    generateRoute(subRoute.label, subRoute.icon, subRoute.action, subRoute.subRoutes || [])\n  )\n})\n\nconst generateRoutes = (\n  routesData: {\n    label: string;\n    icon: IconDefinition | undefined;\n    action?: () => void;\n    subRoutes: Route[];\n  }[]\n): Route[] => {\n  return routesData.map((routeData) =>\n    generateRoute(routeData.label, routeData?.icon, routeData.action, routeData.subRoutes)\n  )\n}\n\nconst SidebarComponent = (props: { routesData: RoutesData[], children: React.ReactNode }) => {\n\n\n  const routes: Route[] = generateRoutes(props.routesData)\n\n  return (\n    <div style={{ display: 'flex' }}>\n      <div className=\"crm-class-sidebar\">\n        <ul className=\"crm-class-sidebar-list\">\n          <span className=\"crm-class-title\">MENU</span>\n\n          {routes.map((route, index) => (\n            <SidebarItem key={`route_${index}`} route={route} />\n          ))}\n\n        </ul>\n      </div>\n      <div className=\"crm-class-sidebar-content\">\n        {props.children}\n      </div>\n    </div>\n  )\n}\nexport default SidebarComponent\n","import { faGem } from '@fortawesome/free-regular-svg-icons'\nimport { Route } from '../../../../types/Common'\nimport { IconDefinition } from '@fortawesome/free-solid-svg-icons'\n\ninterface View {\n  path: string;\n  name: string;\n  root: string;\n  permission: string;\n  views?: View[];\n}\n\nexport const generateSubMenuData = (labels: View[]): Route[] => {\n  return labels.map((label) => ({\n    label: label.name,\n    className: 'crm-class-ml-20',\n    path: label.path,\n    subRoutes: generateSubMenuData(label.views || [])\n  }))\n}\n\nexport const icons: Record<string, IconDefinition> = {\n  diamond: faGem,\n  default: faGem\n}\n"],"names":["uuidV4","replace","c","crypto","getRandomValues","Uint8Array","toString","colors","Dropdown","props","_useState","useState","isDropdownOpen","setIsDropdownOpen","toggleDropdown","React","className","onClick","style","background","startNameWord","toUpperCase","FontAwesomeIcon","icon","faChevronUp","faChevronDown","UserInfo","_ref","name","email","LanguageDropdown","languages","selectedLanguage","setSelectedLanguage","handleLanguageChange","language","flag","type","map","key","code","TopNavBarComponent","faBars","color","size","faSearch","src","_props$logoSrc","logoSrc","height","alt","_props$user$name","user","SidebarItem","route","label","_route$subRoutes","subRoutes","selected","isSubMenuOpen","setIsSubMenuOpen","toggleSubMenu","prevState","Fragment","_route$subRoutes2","length","undefined","action","item","generateRoute","visible","enable","subRoute","generateRoutes","routesData","routeData","SidebarComponent","routes","display","index","children","generateSubMenuData","labels","path","views","icons","diamond","faGem"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/utils/utils.ts","../src/components/dropdown/Dropdown.tsx","../src/components/contentMenuComponent/UserInfo.tsx","../src/components/contentMenuComponent/LanguageDropdown.tsx","../src/components/menu/TopNavBarComponent/TopNavBarComponent.tsx","../src/components/menu/sidebar/SidebarItem.tsx","../src/components/menu/sidebar/Sidebar.tsx","../src/components/menu/sidebar/subMenuComponent/SubMenuComponent.tsx"],"sourcesContent":["export function uuidV4() {\n  return ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c: any) =>\n    (\n      ((c ^ crypto.getRandomValues(new Uint8Array(1))[0]) & 15) >>\n      (c / 4)\n    ).toString(16)\n  )\n}\n\n\nexport const colors = {\n  'A': '#FF5733',\n  'B': '#33FF57',\n  'C': '#5733FF',\n  'D': '#FF33B8',\n  'E': '#33B8FF',\n  'F': '#FFFF33',\n  'G': '#33FFFF',\n  'H': '#FF33A6',\n  'I': '#33A6FF',\n  'J': '#FF9033',\n  'K': '#3390FF',\n  'L': '#FF33F6',\n  'M': '#33F6FF',\n  'N': '#C833FF',\n  'O': '#33FFC8',\n  'P': '#FFC833',\n  'Q': '#33FF58',\n  'R': '#FF5833',\n  'S': '#58FF33',\n  'T': '#FF3358',\n  'U': '#3358FF',\n  'V': '#FF33D6',\n  'W': '#33D6FF',\n  'X': '#FF336A',\n  'Y': '#336AFF',\n  'Z': '#FFD633'\n}\n","import React, { useState } from 'react'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'\nimport { colors } from '../../utils/utils'\n\nexport default function Dropdown(props: { startNameWord: string }) {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n\n  const toggleDropdown = () => {\n    setIsDropdownOpen(!isDropdownOpen)\n  }\n\n  return (\n    <div className=\"crm-class-dropdown crm-class-mr-20\" onClick={toggleDropdown}>\n      <span style={{ background: colors[props.startNameWord.toUpperCase()] }}\n            className=\"crm-class-top-nav-bar-avatar\">{props.startNameWord.toUpperCase()}</span>\n      <span className=\"crm-class-ml-20\">\n        <FontAwesomeIcon\n          icon={isDropdownOpen ? faChevronUp : faChevronDown}\n          className=\"crm-class-color-icon crm-class-slate-gray\"\n        />\n      </span>\n      {isDropdownOpen && (\n        <div className=\"crm-class-dropdown-content\">\n          <p>Dropdown content here</p>\n        </div>\n      )}\n    </div>\n  )\n}\n","import React from 'react'\n\n\ninterface Props {\n  email: string;\n  name: string;\n}\n\nexport default function UserInfo({ name, email }: Props) {\n  return (\n    <div className=\"crm-class-top-nav-bar-info-user\">\n      <span className=\"crm-class-font-bold\">{name} </span>\n      <span>{email}</span>\n    </div>\n  )\n}\n","import React, { useState } from 'react'\n\nexport interface Language {\n  code: string;\n  label: string;\n  flag: string;\n}\n\n\nexport default function LanguageDropdown(props: { languages: Language[] }) {\n  const [selectedLanguage, setSelectedLanguage] = useState<Language>(\n    props.languages[0]\n  )\n\n  const handleLanguageChange = (language: Language) => {\n    setSelectedLanguage(language)\n  }\n\n  return (\n    <div className=\"crm-class-dropdown-flag crm-class-mr-20\">\n      <span className=\"crm-class-content-flag\">\n        <span className={`crm-class-flag large ${selectedLanguage.flag}`}></span>\n      </span>\n\n      <div className=\"crm-class-dropdown-menu\">\n        <button className=\"crm-class-dropdown-toggle\" type=\"button\">\n          Choose Language\n        </button>\n        <h6 className=\"crm-class-dropdown-header\">Popular Languages</h6>\n        {props.languages.map((language) => (\n          <button\n            key={language.code}\n            type=\"button\"\n            className=\"crm-class-dropdown-item \"\n            onClick={() => handleLanguageChange(language)}\n          >\n            <span\n              className={` opacity-8 crm-class-flag large  crm-class-mr-20 ${language.flag}`}\n            ></span>\n            {language.code}\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n","import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React from 'react'\nimport Dropdown from '../../dropdown/Dropdown'\nimport UserInfo from '../../contentMenuComponent/UserInfo'\nimport LanguageDropdown, { Language } from '../../contentMenuComponent/LanguageDropdown'\n\ninterface Props {\n  languages: Language[];\n  onChooseLanguage?: (language: Language) => void;\n  user: {\n    name: string;\n    email: string;\n  },\n  logoSrc?: string;\n}\n\nexport default function TopNavBarComponent(props: Props) {\n\n\n  return (\n    <div className=\"crm-class-top-nav-bar\">\n      <div className=\"crm-class-flex-container\">\n        <FontAwesomeIcon\n          icon={faBars}\n          color=\"#3f6ad8\"\n          size=\"1x\"\n          className=\"crm-class-mr-20 crm-class-cursor-pointer\"\n        />\n        <div className=\"crm-class-flex-container\">\n          <div className=\"crm-class-icon-container crm-class-mr-20\">\n            <FontAwesomeIcon\n              icon={faSearch}\n              color=\"#3f6ad8\"\n              className=\"\"\n              size=\"1x\"\n            />\n          </div>\n\n          <img\n            src={props.logoSrc ?? 'https://via.placeholder.com/150'}\n            style={{ height: '30px' }}\n            alt=\"\"\n          />\n        </div>\n      </div>\n      <div className=\"crm-class-top-nav-bar-options\">\n        {/*  */}\n\n        <LanguageDropdown languages={props.languages} />\n\n\n        <Dropdown startNameWord={props.user.name?.[0]} />\n        <UserInfo name={props.user.name} email={props.user.email} />\n      </div>\n    </div>\n  )\n}\n","import React, { useMemo, useState } from 'react'\nimport { faChevronDown, faChevronUp, IconDefinition } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { SidebarItemProps } from '../../../types/Common'\nimport { uuidV4 } from '../../../utils/utils'\n\nexport const iconsPath: Record<string, string> = {\n  'pe-7s-diamond': 'faGem',\n  'pe-7s-piggy': 'faPiggyBank',\n  'pe-7s-helm': 'faShip',\n  'pe-7s-hourglass': 'faHourglass',\n  'pe-7s-safe': 'faWallet',\n  'pe-7s-headphones': 'faHeadphones',\n  'pe-7s-next-2': 'faRectangleList',\n  'pe-7s-cloud-download': 'faCloudDownloadAlt',\n  'pe-7s-news-paper': 'faNewspaper',\n  'pe-7s-upload': 'faUpload',\n  'pe-7s-display1': 'faChartBar',\n  'pe-7s-settings': 'faCog'\n}\n\nconst SidebarItem = ({ route }: SidebarItemProps) => {\n  const { iconName = '', label, subRoutes = [], className } = route\n  const [isSubMenuOpen, setIsSubMenuOpen] = useState(route.selected || false)\n\n  const toggleSubMenu = () => {\n    setIsSubMenuOpen((prevState) => !prevState)\n  }\n\n  const icon: IconDefinition = useMemo(() => {\n    const name = iconsPath[iconName] || iconName\n    // eslint-disable-next-line @typescript-eslint/no-var-requires\n    return require(`@fortawesome/free-regular-svg-icons`)[name]\n  }, [])\n\n  return (\n    <React.Fragment>\n      <li\n        className={`crm-class-sidebar-li ${className ?? ''}`}\n        onClick={() => {\n          toggleSubMenu()\n          if (route.subRoutes?.length === 0) {\n            route.action?.()\n          }\n        }}\n      >\n        {icon && (\n          <span className=\"crm-class-color-icon crm-class-mr-10\">\n              <FontAwesomeIcon\n                icon={icon}\n                className=\"crm-class-color-icon\"\n              />\n          </span>\n        )}\n        <span\n          // onClick={route.subRoutes?.length ? undefined : route.action}\n          className={`${route.selected ? 'crm-class-font-bold' : ''}  `}\n        >{label}</span>\n\n        {!!subRoutes.length && (\n          <span className=\"crm-class-ml-auto\">\n            <FontAwesomeIcon\n              icon={isSubMenuOpen ? faChevronUp : faChevronDown}\n              className=\"crm-class-color-icon crm-class-font-10 crm-class-slate-gray\"\n            />\n          </span>\n        )}\n      </li>\n      {(isSubMenuOpen) && !!subRoutes.length && (\n        <ul className=\"crm-class-sidebar-sub-menu-list\">\n          {subRoutes?.map((item) => (\n            <SidebarItem key={uuidV4()} route={item} />\n          ))}\n        </ul>\n      )}\n    </React.Fragment>\n  )\n}\n\nexport default SidebarItem\n","// import { IconDefinition } from '@fortawesome/free-solid-svg-icons'\n// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nimport { Route } from '../../../types/Common'\nimport SidebarItem from './SidebarItem'\nimport React from 'react'\n\ninterface RoutesData {\n  label: string;\n  icon: string;\n  subRoutes: Route[];\n}\n\nconst generateRoute = (\n  label: string,\n  icon: string | undefined,\n  action?: () => void,\n  subRoutes: Route[] = []\n): Route => ({\n  label,\n  visible: true,\n  enable: true,\n  iconName: icon,\n  action: () => action?.(),\n  subRoutes: subRoutes.map((subRoute) =>\n    generateRoute(subRoute.label, subRoute?.iconName, subRoute.action, subRoute.subRoutes || [])\n  )\n})\n\nconst generateRoutes = (\n  routesData: {\n    label: string;\n    icon: string;\n    action?: () => void;\n    subRoutes: Route[];\n  }[]\n): Route[] => {\n  return routesData.map((routeData) =>\n    generateRoute(routeData.label, routeData?.icon, routeData.action, routeData.subRoutes)\n  )\n}\n\nconst SidebarComponent = (props: { routesData: RoutesData[], children: React.ReactNode }) => {\n\n\n  const routes: Route[] = generateRoutes(props.routesData)\n\n  return (\n    <div style={{ display: 'flex' }}>\n      <div className=\"crm-class-sidebar\">\n        <ul className=\"crm-class-sidebar-list\">\n          <span className=\"crm-class-title\">MENU</span>\n\n          {routes.map((route, index) => (\n            <SidebarItem key={`route_${index}`} route={route} />\n          ))}\n\n        </ul>\n      </div>\n      <div className=\"crm-class-sidebar-content\">\n        {props.children}\n      </div>\n    </div>\n  )\n}\nexport default SidebarComponent\n","import { faGem } from '@fortawesome/free-regular-svg-icons'\nimport { Route } from '../../../../types/Common'\nimport { IconDefinition } from '@fortawesome/free-solid-svg-icons'\n\ninterface View {\n  path: string;\n  name: string;\n  root: string;\n  permission: string | string[];\n  views?: View[];\n}\n\nexport const generateSubMenuData = (labels: View[], callBackPath: (path: string) => void): Route[] => {\n  return labels.map((label) => ({\n    label: label.name,\n    className: 'crm-class-ml-20',\n    action: () => callBackPath(label.path),\n    subRoutes: generateSubMenuData(label.views || [], callBackPath)\n  }))\n}\n\nexport const icons: Record<string, IconDefinition> = {\n  diamond: faGem,\n  default: faGem\n}\n"],"names":["uuidV4","replace","c","crypto","getRandomValues","Uint8Array","toString","colors","Dropdown","props","_useState","useState","isDropdownOpen","setIsDropdownOpen","toggleDropdown","React","className","onClick","style","background","startNameWord","toUpperCase","FontAwesomeIcon","icon","faChevronUp","faChevronDown","UserInfo","_ref","name","email","LanguageDropdown","languages","selectedLanguage","setSelectedLanguage","handleLanguageChange","language","flag","type","map","key","code","TopNavBarComponent","faBars","color","size","faSearch","src","_props$logoSrc","logoSrc","height","alt","_props$user$name","user","iconsPath","SidebarItem","route","_route$iconName","iconName","label","_route$subRoutes","subRoutes","selected","isSubMenuOpen","setIsSubMenuOpen","toggleSubMenu","prevState","useMemo","require","Fragment","_route$subRoutes2","length","_route$action","action","call","item","generateRoute","visible","enable","subRoute","generateRoutes","routesData","routeData","SidebarComponent","routes","display","index","children","generateSubMenuData","labels","callBackPath","path","views","icons","diamond","faGem"],"mappings":"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"}

package/dist/types/Common.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
 export interface Route {
     label: string;
     visible?: boolean;
     enable?: boolean;
     selected?: boolean;
-    icon?: React.ReactNode;
+    iconName?: string;
     action?: () => void;
     subRoutes?: Route[];
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbx-crm-menu-ui",
-  "version": "2.0.1-beta.0",
+  "version": "2.0.1-beta.2",
   "description": "Menu Created by SBX Company for CRM.",
   "author": "Frank Carpio",
   "license": "ISC",