Hide gray items in the menu

Author: k.golikov

src/constants/router/menuItems.ts

@@ -62,7 +62,8 @@ const menuItems: MenuItem[] = [
                 route: routes.notificationsTest
             },
             {
-                route: routes.imageCompressor
+                route: routes.imageCompressor,
+                isGray: true
             },
             {
                 route: routes.dateUtils,

src/hooks/useAppSettings.ts

@@ -6,7 +6,8 @@ import { useEffect, useMemo } from 'react';
 
 const initialState: AppSettings = {
     theme: SpecialAppTheme.AUTO,
-    isErudaEnabled: false
+    isErudaEnabled: false,
+    doShowHiddenMenuItems: false
 };
 
 export const useAppSettingsState = () => {

src/layouts/appLayout/components/appMenu/AppMenu.tsx

@@ -1,18 +1,23 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useMemo } from 'react';
 import { Menu } from 'antd';
 import styles from './AppMenu.module.scss';
 import { renderMenuItems } from '../../utils/routeMenuItems';
 import menuItems from '../../../../constants/router/menuItems';
 import { useLocation } from 'react-router-dom';
-
-const renderedMenuItems = renderMenuItems(menuItems);
+import useAppSettings from '../../../../hooks/useAppSettings';
+import { ItemType } from 'antd/lib/menu/hooks/useItems';
 
 interface Props {
     onItemSelect?: () => void;
 }
 
 const AppMenu: FunctionComponent<Props> = ({ onItemSelect }) => {
     const { pathname } = useLocation();
+    const appSettings = useAppSettings();
+
+    const renderedMenuItems = useMemo<ItemType[]>(() => {
+        return renderMenuItems(menuItems, appSettings);
+    }, [appSettings]);
 
     return (
         <Menu

src/layouts/appLayout/utils/routeMenuItems.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import { isArray } from 'lodash';
 import classNames from 'classnames';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
+import AppSettings from '../../../types/AppSettings';
 
 export const renderRoute = ({ route, title, icon, isGray }: MenuRouteItem): ItemType => {
     const { path } = route;
@@ -49,14 +50,22 @@ export const isSubMenuItem = (menuItem: MenuItem): menuItem is SubMenuItem => {
     return 'routes' in menuItem && isArray(menuItem.routes);
 };
 
-export const renderMenuItem = (menuItem: MenuItem, index: number): ItemType => {
+export const renderMenuItem = (menuItem: MenuItem, index: number, settings: AppSettings): ItemType => {
     if (isSubMenuItem(menuItem)) {
         return {
             key: index,
             icon: renderComponent(menuItem.icon),
             label: menuItem.title,
             children: menuItem.routes.length
-                ? menuItem.routes.map(renderMenuItem)
+                ? menuItem.routes
+                      .filter((item) => {
+                          if (settings.doShowHiddenMenuItems) {
+                              return true;
+                          }
+
+                          return !('route' in item) || !item.isGray;
+                      })
+                      .map((item, index) => renderMenuItem(item, index, settings))
                 : [
                       {
                           key: 'nothing',
@@ -70,4 +79,5 @@ export const renderMenuItem = (menuItem: MenuItem, index: number): ItemType => {
     return renderRoute(menuItem);
 };
 
-export const renderMenuItems = (menuItems: MenuItem[]) => menuItems.map(renderMenuItem);
+export const renderMenuItems = (menuItems: MenuItem[], settings: AppSettings) =>
+    menuItems.map((item, index) => renderMenuItem(item, index, settings));

src/pages/settingsPage/SettingsPage.tsx

@@ -46,6 +46,13 @@ const SettingsPage: FunctionComponent = () => {
                         Enable <ExternalLink href="https://github.com/liriliri/eruda">Eruda</ExternalLink>
                     </span>
                 </label>
+                <label>
+                    <Switch
+                        checked={appSettings.doShowHiddenMenuItems}
+                        onChange={handleAppSettingChange('doShowHiddenMenuItems')}
+                    />
+                    <span className="ms-3">Show hidden menu items</span>
+                </label>
             </Col>
         </PageContainer>
     );

src/types/AppSettings.ts

@@ -3,6 +3,7 @@ import { SelectableAppTheme } from './AppTheme';
 interface AppSettings {
     theme: SelectableAppTheme;
     isErudaEnabled: boolean;
+    doShowHiddenMenuItems: boolean;
 }
 
 export default AppSettings;