feat: arabic localization.

client/src/components/Sidebar/SidebarMenu.js

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
-import { Menu, MenuDivider, Button } from '@blueprintjs/core';
+import React from 'react';
+import { Menu, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
 import sidebarMenuList from 'config/sidebarMenu';
+import { Choose } from 'components';
 import Icon from 'components/Icon';
 import MenuItem from 'components/MenuItem';
 import { MenuItemLabel } from 'components';
@@ -11,6 +12,16 @@ import SidebarOverlay from 'components/SidebarOverlay';
 const DEFAULT_ITEM = {
   text: '',
   href: '',
+};
+
+function matchPath(pathname, path, matchExact) {
+  return matchExact ? pathname === path : pathname.indexOf(path) !== -1;
+}
+
+function SidebarMenuItemSpace({ space }) {
+  return (
+    <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />
+  )
 }
 
 export default function SidebarMenu() {
@@ -24,64 +35,60 @@ export default function SidebarMenu() {
     return list.map((item, index) => {
       const hasChildren = Array.isArray(item.children);
 
-      const matchPath = (pathname, path) => {
-        return item.matchExact
-          ? pathname === path
-          : pathname.indexOf(path) !== -1;
-      };
-      const isActive = (item.children
-        ? item.children.some((c) => matchPath(location.pathname, c.href))
-        : item.href && matchPath(location.pathname, item.href)) || currentItem ===item;
+      const isActive =
+        (item.children
+          ? item.children.some((c) =>
+              matchPath(location.pathname, c.href, item.matchExact),
+            )
+          : item.href &&
+            matchPath(location.pathname, item.href, item.matchExact)) ||
+        currentItem === item;
 
       const handleItemClick = () => {
         if (item.href) {
           history.push(item.href);
         }
-        setIsOpen(true);
-        setCurrentItem(item);
+        if (item.children && item.children.length > 0) {
+          setIsOpen(true);
+          setCurrentItem(item);
+        } else {
+          setIsOpen(false);
+        }
       };
 
-      const maybeRenderLabel = (item) =>
-        item.newTabHref ? (
-          <Button
-            className="menu-item__add-btn"
-            icon={<Icon icon={'plus'} iconSize={16} />}
-            onClick={(event) => {
-              history.push(item.newTabHref);
-              event.stopPropagation();
-            }}
-          />
-        ) : null;
+      return (
+        <Choose>
+          <Choose.When condition={item.spacer}>
+            <SidebarMenuItemSpace space={item.spacer} />
+          </Choose.When>
 
-      return item.spacer ? (
-        <div
-          class="bp3-menu-spacer"
-          style={{
-            height: `${item.spacer}px`,
-          }}
-        ></div>
-      ) : item.divider ? (
-        <MenuDivider key={index} title={item.title} />
-      ) : item.label ? (
-        <MenuItemLabel key={index} text={item.text} />
-      ) : (
-        <MenuItem
-          key={index}
-          active={isActive}
-          icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
-          text={item.text}
-          label={maybeRenderLabel(item)}
-          disabled={item.disabled}
-          dropdownType={item.dropdownType || 'collapse'}
-          caretIconSize={16}
-          onClick={handleItemClick}
-          callapseActive={!!isActive}
-          itemClassName={classNames({
-            'is-active': isActive,
-            'has-icon': !hasChildren && item.icon,
-          })}
-          hasSubmenu={hasChildren}
-        />
+          <Choose.When condition={item.divider}>
+            <MenuDivider key={index} title={item.title} />
+          </Choose.When>
+
+          <Choose.When condition={item.label}>
+            <MenuItemLabel key={index} text={item.text} />
+          </Choose.When>
+
+          <Choose.Otherwise>
+            <MenuItem
+              key={index}
+              active={isActive}
+              icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
+              text={item.text}
+              disabled={item.disabled}
+              dropdownType={item.dropdownType || 'collapse'}
+              caretIconSize={16}
+              onClick={handleItemClick}
+              callapseActive={!!isActive}
+              itemClassName={classNames({
+                'is-active': isActive,
+                'has-icon': !hasChildren && item.icon,
+              })}
+              hasSubmenu={hasChildren}
+            />
+          </Choose.Otherwise>
+        </Choose>
       );
     });
   };
@@ -89,12 +96,11 @@ export default function SidebarMenu() {
 
   const handleSidebarOverlayClose = () => {
     setIsOpen(false);
-  }
+  };
 
   return (
     <div>
       <Menu className="sidebar-menu">{items}</Menu>{' '}
-
       <SidebarOverlay
         isOpen={isOpen}
         label={currentItem?.text || ''}