@buerokratt-ria/menu 0.1.16 → 0.2.1

package/src/menu/components/menuTree/index.tsx

@@ -1,64 +1,77 @@
-import React, { FC, MouseEvent } from "react";
-import { NavLink } from 'react-router-dom';
-import { MdKeyboardArrowDown } from 'react-icons/md';
-import { MenuItem } from "../../types/menuItem";
-import { useTranslation } from "react-i18next";
-import { menuData } from './menuData';
-import Icon from "../icons/icon/icon";
-import { isSameRoot } from "./isSameRoot";
-import clsx from 'clsx';
-import '../../main-navigation.scss';
-
-interface MenuTreeProps {
-  menuItems: MenuItem[];
-  serviceId: string[];
-  handleNavToggle: (event: MouseEvent) => void;
-}
-
-const MenuTree: FC<MenuTreeProps> = ({
-  menuItems, 
-  serviceId, 
-  handleNavToggle,
-}) => {
-  const currentlySelectedLanguage = useTranslation().i18n.language;
-
-  return menuItems
-    .filter(x => !x.hidden)
-    .map((menuItem) => (
-      <li key={menuItem.label[currentlySelectedLanguage]}>
-        {!!menuItem.children ? (
-            <>
-              <button
-                className={clsx('nav__toggle', { 'nav__toggle--icon': !!menuItem.id })}
-                aria-expanded={menuItem.path && (isSameRoot(menuItem, serviceId)) ? 'true' : 'false'}
-                onClick={handleNavToggle}
-              >
-                {menuItem.id && (
-                  <Icon icon={menuData.find(dataItem => dataItem.id === menuItem.id)?.icon} size='large' />
-                )}
-                <span className='menu-item-title'>{menuItem.label[currentlySelectedLanguage]}</span>
-                <Icon icon={<MdKeyboardArrowDown />} className='menu-item-arrow' />
-              </button>
-              <ul className='nav__submenu'>
-                <MenuTree
-                  menuItems={menuItem.children.map((item)  => ({id: menuItem.id, ...item}))}
-                  serviceId={serviceId}
-                  handleNavToggle={handleNavToggle}
-                />
-              </ul>
-            </>
-        ) : (
-          serviceId.includes(menuItem.id!)
-            ? <NavLink to={menuItem.path || '#'}>
-                {menuItem.label[currentlySelectedLanguage]}
-              </NavLink>
-            : <a href={(menuData.find(dataItem => dataItem.id === menuItem.id)?.url ?? '') + menuItem.path}>
-                {menuItem.label[currentlySelectedLanguage]}
-              </a>
-        )}
-      </li>
-    ),
-  );
-}
-
-export default MenuTree;
+import React, { FC, MouseEvent } from "react";
+import { NavLink } from 'react-router-dom';
+import { MdKeyboardArrowDown } from 'react-icons/md';
+import { MenuItem } from "../../types/menuItem";
+import { useTranslation } from "react-i18next";
+import { menuData } from './menuData';
+import Icon from "../icons/icon/icon";
+import { isSameRoot } from "./isSameRoot";
+import clsx from 'clsx';
+import '../../main-navigation.scss';
+
+interface MenuTreeProps {
+  menuItems: MenuItem[];
+  serviceId: string[];
+  handleNavToggle: (event: MouseEvent) => void;
+}
+
+interface MenuItemLabelProps {
+  menuItem: MenuItem
+  currentlySelectedLanguage: string
+}
+
+const MenuItemLabel: React.FC<MenuItemLabelProps> = ({ menuItem, currentlySelectedLanguage }) => {
+  return (
+    <>
+      {menuItem.label[currentlySelectedLanguage]} {menuItem.count != null ? `(${menuItem.count})` : ''}
+    </>
+  );
+};
+
+const MenuTree: FC<MenuTreeProps> = ({
+  menuItems,
+  serviceId,
+  handleNavToggle,
+}) => {
+  const currentlySelectedLanguage = useTranslation().i18n.language;
+
+  return menuItems
+    .filter(x => !x.hidden)
+    .map((menuItem) => (
+      <li key={menuItem.label[currentlySelectedLanguage]}>
+        {!!menuItem.children ? (
+            <>
+              <button
+                className={clsx('nav__toggle', { 'nav__toggle--icon': !!menuItem.id })}
+                aria-expanded={menuItem.path && (isSameRoot(menuItem, serviceId)) ? 'true' : 'false'}
+                onClick={handleNavToggle}
+              >
+                {menuItem.id && (
+                  <Icon icon={menuData.find(dataItem => dataItem.id === menuItem.id)?.icon} size='large' />
+                )}
+                <span className='menu-item-title'>{menuItem.label[currentlySelectedLanguage]}</span>
+                <Icon icon={<MdKeyboardArrowDown />} className='menu-item-arrow' />
+              </button>
+              <ul className='nav__submenu'>
+                <MenuTree
+                  menuItems={menuItem.children.map((item)  => ({id: menuItem.id, ...item}))}
+                  serviceId={serviceId}
+                  handleNavToggle={handleNavToggle}
+                />
+              </ul>
+            </>
+        ) : (
+          serviceId.includes(menuItem.id!)
+            ? <NavLink to={menuItem.path || '#'}>
+                <MenuItemLabel menuItem={menuItem} currentlySelectedLanguage={currentlySelectedLanguage} />
+              </NavLink>
+            : <a href={(menuData.find(dataItem => dataItem.id === menuItem.id)?.url ?? '') + menuItem.path}>
+                <MenuItemLabel menuItem={menuItem} currentlySelectedLanguage={currentlySelectedLanguage} />
+              </a>
+        )}
+      </li>
+    ),
+  );
+}
+
+export default MenuTree;

package/src/menu/components/menuTree/isSameRoot.ts

@@ -1,10 +1,10 @@
-import { MenuItem } from "../../types/menuItem";
-
-export const isSameRoot = (menuItem, serviceId) => {
-  const base = window.location.pathname.split("/")[1];
-  const currentService = base === 'chat' ? serviceId : [base];
-  if(currentService.includes(menuItem.id)) {
-    return menuItem.children.some((item: MenuItem) => item.path?.includes("/" + window.location.pathname.split("/")[2]));
-  }
-  return false;
-}
+import { MenuItem } from "../../types/menuItem";
+
+export const isSameRoot = (menuItem, serviceId) => {
+  const base = window.location.pathname.split("/")[1];
+  const currentService = base === 'chat' ? serviceId : [base];
+  if(currentService.includes(menuItem.id)) {
+    return menuItem.children.some((item: MenuItem) => item.path?.includes("/" + window.location.pathname.split("/")[2]));
+  }
+  return false;
+}

package/src/menu/components/menuTree/menuData.tsx

@@ -1,42 +1,42 @@
-import React from 'react';
-import {
-  MdOutlineForum, 
-  MdOutlineAdb, 
-  MdOutlineEqualizer, 
-  MdMiscellaneousServices, 
-  MdSettings, 
-  MdOutlineMonitorWeight,
-} from 'react-icons/md';
-
-export const menuData = [
-  {
-    id: 'conversations',
-    icon: <MdOutlineForum className='menu-item-icon' />,
-    url: import.meta.env.REACT_APP_CONVERSATIONS_BASE_URL,
-  },
-  {
-    id: 'training',
-    icon: <MdOutlineAdb className='menu-item-icon' />,
-    url: import.meta.env.REACT_APP_TRAINING_BASE_URL,
-  },
-  {
-    id: 'analytics',
-    icon: <MdOutlineEqualizer className='menu-item-icon' />,
-    url: import.meta.env.REACT_APP_ANALYTICS_BASE_URL,
-  },
-  {
-    id: "services",
-    icon: <MdMiscellaneousServices className='menu-item-icon' />,
-    url: import.meta.env.REACT_APP_SERVICES_BASE_URL,
-  },
-  {
-    id: 'settings',
-    icon: <MdSettings className='menu-item-icon' />,
-    url: import.meta.env.REACT_APP_SETTINGS_BASE_URL,
-  },
-  {
-    id: 'monitoring',
-    icon: <MdOutlineMonitorWeight className='menu-item-icon' />,
-    url: import.meta.env.REACT_APP_MONITORING_BASE_URL,
-  },
-];
+import React from 'react';
+import {
+  MdOutlineForum, 
+  MdOutlineAdb, 
+  MdOutlineEqualizer, 
+  MdMiscellaneousServices, 
+  MdSettings, 
+  MdOutlineMonitorWeight,
+} from 'react-icons/md';
+
+export const menuData = [
+  {
+    id: 'conversations',
+    icon: <MdOutlineForum className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_CONVERSATIONS_BASE_URL,
+  },
+  {
+    id: 'training',
+    icon: <MdOutlineAdb className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_TRAINING_BASE_URL,
+  },
+  {
+    id: 'analytics',
+    icon: <MdOutlineEqualizer className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_ANALYTICS_BASE_URL,
+  },
+  {
+    id: "services",
+    icon: <MdMiscellaneousServices className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_SERVICES_BASE_URL,
+  },
+  {
+    id: 'settings',
+    icon: <MdSettings className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_SETTINGS_BASE_URL,
+  },
+  {
+    id: 'monitoring',
+    icon: <MdOutlineMonitorWeight className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_MONITORING_BASE_URL,
+  },
+];