@buerokratt-ria/menu 0.1.15 → 0.1.16

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 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

package/package.json

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

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);
+    }
   }
 }