@buerokratt-ria/menu 0.1.14 → 0.1.16

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All changes to this project will be documented in this file.
 
+## [0.1.16] - 10-06-2024
+
+- Improve close menu functionality
+
+## [0.1.15] - 10-06-2024
+
+- Fix a bug
+
 ## [0.1.14] - 07-06-2024
 
 - Fix a bug

package/README.md

@@ -34,35 +34,14 @@ To publish created package:
   * `import { MainNavigation } from '@buerokratt-ria/menu/src'` for Header and Menu
   * If you want to use local package, put created package to the root of react app and add dependency like "@buerokratt-ria/header": "file:buerokratt-ria-menu-0.0.5.tgz" (use proper version)
 ### Using MainNavigation component
-  * In Layout component you need to provide fetching and caching the `menu.json` file, code snippet would be:  
-```
-    const CACHE_NAME = 'mainmenu-cache';
-    const [MainMenuItems, setMainMenuItems] = useState([])
-    const  {data, isLoading, status}  = useQuery({
-        queryKey: [import.meta.env.REACT_APP_MENU_URL + import.meta.env.REACT_APP_MENU_PATH],
-        onSuccess: (res: any) => {
-            try {
-                setMainMenuItems(res);
-                localStorage.setItem(CACHE_NAME, JSON.stringify(res));
-            } catch (e) {
-                console.log(e);
-            }
-        },
-        onError: (error: any) => {
-            setMainMenuItems(getCache());
-        }
-
-    });
-
-    function getCache(): any {
-        const cache = localStorage.getItem(CACHE_NAME) || '{}';
-        return JSON.parse(cache);
-    }
-```
-  * Then pass this MainMenu items to menu component `<MainNavigation serviceId={import.meta.env.REACT_APP_SERVICE_ID.split(',')} items={MainMenuItems}/>`
-    * If you want to use only local file provided by package then pass empty array instead `[]`
-    * REACT_APP_SERVICE_ID set of values seperated by comma resembling current module, examples of this value could
-    be found in following links
+  * MainNavigation uses four env variable:
+    * use `REACT_APP_MENU_URL` & `REACT_APP_MENU_PATH` to set the url for json that contains the menu item array
+    * use `REACT_APP_MENU_JSON` with json string of the menu item array
+      * `REACT_APP_MENU_JSON` will overrides buth the local file provieded by package and the `REACT_APP_MENU_URL` & `REACT_APP_MENU_PATH`
+    * If you want to use only local file provided by package then remove `REACT_APP_MENU_JSON`, `REACT_APP_MENU_URL` & `REACT_APP_MENU_PATH` variables
+    * `REACT_APP_SERVICE_ID` set of values seperated by comma resembling current module, examples of this value could be found in following links
+    
+    
 
 ### Implemented examples:
 * https://github.com/buerokratt/Training-Module

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/menu",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Generic MainNavigation component that would be injected as dependency.",
   "main": "index.js",
   "scripts": {},

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

@@ -22,7 +22,9 @@ const MenuTree: FC<MenuTreeProps> = ({
 }) => {
   const currentlySelectedLanguage = useTranslation().i18n.language;
 
-  return menuItems.map((menuItem) => (
+  return menuItems
+    .filter(x => !x.hidden)
+    .map((menuItem) => (
       <li key={menuItem.label[currentlySelectedLanguage]}>
         {!!menuItem.children ? (
             <>

package/src/menu/hooks/useMenuItems.tsx

@@ -5,27 +5,22 @@ import { MenuItem } from "../types/menuItem";
 
 const useMenuItems = () => {
   const externalMenuItems = import.meta.env.REACT_APP_MENU_JSON;
-
-  const [mainMenuItems, setMainMenuItems] = useState<MenuItem[] | null>([]);
+  const cachedMenu = getMenuCache();
+  const [mainMenuItems, setMainMenuItems] = useState<MenuItem[] | null>(cachedMenu ?? []);
 
   useQuery({
-    enabled: !externalMenuItems,
+    enabled: !externalMenuItems && !cachedMenu,
     queryKey: [import.meta.env.REACT_APP_MENU_URL + import.meta.env.REACT_APP_MENU_PATH],
     onSuccess: (res: any) => {
       try {
         setMainMenuItems(res);
+        setCache(res);
       } catch (e) {
-        setMainMenuItems(null);
         console.error(e);
       }
-      setCache(res);
     },
     onError: () => {
-      const cached = getCache();
-      if(cached.length > 0) 
-        setMainMenuItems(cached);
-      else
-        setMainMenuItems(null);
+      setMainMenuItems(cachedMenu);
     },
   });
 
@@ -43,13 +38,19 @@ const useMenuItems = () => {
       console.warn(e);
     }
 
-    const allItems = externals ?? mainMenuItems ?? menuStructure ?? [];
-    return allItems.filter(x => !x.hidden);
+    return externals ?? mainMenuItems ?? menuStructure ?? [];
   }, [externalMenuItems, mainMenuItems, menuStructure]);
   
   return items;
 }
 
+function getMenuCache(): any {
+  const cached = getCache();
+  if(Array.isArray(cached) && cached.length > 0)
+    return cached;
+  return null;
+}
+
 function getCache(): any {
   const cache = localStorage.getItem('mainmenu-cache') ?? '[]';
   return JSON.parse(cache);

package/src/menu/index.tsx

@@ -1,9 +1,6 @@
 import React, { FC, MouseEvent, useState, useMemo } from 'react';
 import clsx from 'clsx';
-import {
-    MdKeyboardArrowRight,
-    MdKeyboardArrowLeft,
-} from 'react-icons/md';
+import { MdClose } from 'react-icons/md';
 import Icon from './components/icons/icon/icon';
 import { useTranslation } from "react-i18next";
 import MenuTree from './components/menuTree';
@@ -23,17 +20,19 @@ const MainNavigation: FC = () => {
     event.currentTarget.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
   };
 
+  const handleCloseButtonClick = () => {
+    const doesMenuHasExpandedItem =  !!document.querySelector('button[aria-expanded="true"]');
+    if(doesMenuHasExpandedItem)
+      setNavCollapsed(!navCollapsed);
+  }
+
   if (!menuItems) return null;
 
   return (
     <nav className={clsx('nav', { 'collapsed': navCollapsed })}>
-      <button className='nav__menu-toggle close-button-item' onClick={() => setNavCollapsed(!navCollapsed)}>
-        {
-          navCollapsed
-          ? <Icon icon={<MdKeyboardArrowRight className='menu-item-icon' />} size='large' />
-          : <Icon icon={<MdKeyboardArrowLeft className='menu-item-icon' />} size='large' />
-        }
-        <span className='menu-item-title'>{t('mainMenu.closeMenu')}</span>
+      <button className='nav__menu-toggle close-button-item' onClick={handleCloseButtonClick}>
+        <Icon icon={<MdClose />} />
+        <span className='menu-item-title'>{t(navCollapsed ? 'mainMenu.openMenu' : 'mainMenu.closeMenu' )}</span>
       </button>
       <ul className='nav__menu'>
         <MenuTree

package/src/menu/main-navigation.scss

@@ -116,24 +116,14 @@
 }
 
 .collapsed {
-  width: 64px;
-
-  .menu-item-arrow,
-  .menu-item-title {
-    display: none !important;
-  }
-  
-  .menu-item-icon {
-    height: 24px;
-    width: 24px;
-  }
-
-  .close-button-item,
-  button.nav__toggle {
-    justify-content: center;
+  .nav__submenu {
+    visibility: hidden;
+    height: 0;
   }
 
-  .nav__submenu {
-    display: none !important;
+  button[aria-expanded=true] {
+    .icon {
+      transform: rotate(0deg);
+    }
   }
 }