Merge pull request #349 from attefUp/v2.17.0

Add toggleIconName to UpMenu props
up-group · Jul 19, 2023 · bbc581b · bbc581b
2 parents 49f74a2 + e613e6c
commit bbc581b
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/src/Components/Display/Menu/UpMenu.tsx b/src/Components/Display/Menu/UpMenu.tsx
@@ -11,7 +11,7 @@ import { isEqual, isString } from 'lodash';
 import UpLigne from '../Ligne';
 import colorMap from '../../../Common/theming/colorMap';
 
-import { style } from 'typestyle';
+import { classes, style } from 'typestyle';
 import { isMobileDevice } from '../../../Common/utils/helpers';
 
 import logo from './sources/logo-up-square.svg';
@@ -33,6 +33,8 @@ export interface UpMenuProps {
   blocked?: boolean;
   onClick?: (uri: string, menuItem?: MenuItemData) => boolean | void;
   onMinifiedChange?: (minified?: boolean) => void;
+  toggleIconName?: IconName;
+  showToggler?: boolean;
   customStyles?: UpMenuCustomStyles;
 }
 
@@ -150,6 +152,12 @@ class UpMenu extends React.Component<UpMenuProps & WithThemeProps, UpMenuState>
       renderIcon = (icon as RenderCallback)(this.props, this.state);
     }
 
+    const toggleIconName = others.toggleIconName || 'burger-menu2';
+
+    const upMenuNavClassName = classes('up-menu-nav', this.currentMinifiedValue ? 'minified' : '');
+
+    const showToggler = (!this.props.blocked && isMobileDevice()) || this.props.showToggler;
+
     return (
       <aside
         className={classnames(
@@ -163,11 +171,11 @@ class UpMenu extends React.Component<UpMenuProps & WithThemeProps, UpMenuState>
         <section className="up-menu-header">
           {renderIcon && <section className="up-app-icon-wrapper">{renderIcon}</section>}
           {renderHeader}
-          {!this.props.blocked && isMobileDevice() && (
+          {showToggler && (
             <UpSvgIcon
               width={15}
               height={15}
-              iconName={'burger-menu2'}
+              iconName={toggleIconName}
               className="up-menu-toggle"
               onClick={this.toggleMinification}
               style={{ marginLeft: 'auto', marginRight: 10 }}
@@ -180,14 +188,14 @@ class UpMenu extends React.Component<UpMenuProps & WithThemeProps, UpMenuState>
               <UpSvgIcon
                 width={15}
                 height={15}
-                iconName={'burger-menu2'}
+                iconName={toggleIconName}
                 className="up-menu-toggle"
                 onClick={this.toggleMinification}
               ></UpSvgIcon>
             )}
           </div>
         )}
-        <section className="up-menu-nav">
+        <section className={upMenuNavClassName}>
           <nav>
             <ul>{menu}</ul>
           </nav>