@buerokratt-ria/menu 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -2,9 +2,9 @@
 
 All changes to this project will be documented in this file.
 
-## [0.1.7] - 27-05-2024
+## [0.1.8] - 28-04-2024
 
-- Fix close menu button 
+- Hide some menu items
 
 ## [0.1.6] - 25-04-2024
 

package/package.json

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

package/src/menu/components/icons/icon/icon.tsx

@@ -12,13 +12,12 @@ import '../icon.scss';
 type IconProps = StyleHTMLAttributes<CSSProperties> & {
     label?: string | null;
     icon: ReactNode;
-    size?: 'small' | 'medium' | 'large';
-    className?: string;
+    size?: 'small' | 'medium';
 };
 
 const IconComponent = forwardRef<HTMLSpanElement, IconProps>(
-    ({ label, icon, className, size = 'small', ...rest }, ref) => {
-        const iconClasses = clsx('icon', `icon--${size}`, className);
+    ({ label, icon, size = 'small', ...rest }, ref) => {
+        const iconClasses = clsx('icon', `icon--${size}`);
 
         return (
             <AccessibleIcon.Root label={label ?? ''}>

package/src/menu/components/icons/icon.scss

@@ -14,9 +14,4 @@
     width: get-spacing(kuressaare);
     height: get-spacing(kuressaare);
   }
-
-  &--large {
-    width: get-spacing(viljandi);
-    height: get-spacing(viljandi);
-  }
 }

package/src/menu/data/menu-structure.json

@@ -346,5 +346,14 @@
         "path": "/uptime"
       }
     ]
+  },
+  {
+    "id":"hidden-item",
+    "label": {
+      "et": "Peidetud",
+      "en": "Hidden"
+    },
+    "path": "/hidden",
+    "hidden": true
   }
 ]

package/src/menu/index.tsx

@@ -1,21 +1,12 @@
-import React, { FC, MouseEvent, useState } from 'react';
-import { NavLink } from 'react-router-dom';
+import React, {FC, MouseEvent, useState} from 'react';
+
+import {NavLink, useLocation} from 'react-router-dom';
 import clsx from 'clsx';
-import {
-    MdOutlineForum, 
-    MdOutlineAdb, 
-    MdOutlineEqualizer, 
-    MdKeyboardArrowDown, 
-    MdMiscellaneousServices, 
-    MdSettings, 
-    MdOutlineMonitorWeight,
-    MdKeyboardArrowRight,
-    MdKeyboardArrowLeft,
-} from 'react-icons/md';
-import Icon from './components/icons/icon/icon';
+import { MdOutlineForum, MdOutlineAdb, MdOutlineEqualizer, MdClose, MdKeyboardArrowDown, MdMiscellaneousServices, MdSettings, MdOutlineMonitorWeight } from 'react-icons/md';
+import  Icon from './components/icons/icon/icon';
 import './main-navigation.scss';
 import { useQuery } from '@tanstack/react-query';
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
 import menuStructure from './data/menu-structure.json';
 
 interface MenuItem {
@@ -24,6 +15,7 @@ interface MenuItem {
   path?: string;
   target?: '_blank' | '_self';
   children?: MenuItem[];
+  hidden?: boolean;
 }
 
 interface TranslatedLabel {
@@ -38,41 +30,42 @@ const MainNavigation: FC<{items: MenuItem[], serviceId: string[]}> = ( {items, s
   const { t, i18n } = useTranslation();
   const currentlySelectedLanguage = i18n.language;
   const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
-  
   const menuData = [
     {
       id: 'conversations',
-      icon: <MdOutlineForum className='menu-item-icon' />,
+      icon: <MdOutlineForum />,
       url: import.meta.env.REACT_APP_CONVERSATIONS_BASE_URL,
     },
     {
       id: 'training',
-      icon: <MdOutlineAdb className='menu-item-icon' />,
+      icon: <MdOutlineAdb />,
       url: import.meta.env.REACT_APP_TRAINING_BASE_URL,
     },
     {
       id: 'analytics',
-      icon: <MdOutlineEqualizer className='menu-item-icon' />,
+      icon: <MdOutlineEqualizer />,
       url: import.meta.env.REACT_APP_ANALYTICS_BASE_URL,
     },
     {
       id: "services",
-      icon: <MdMiscellaneousServices className='menu-item-icon' />,
+      icon: <MdMiscellaneousServices />,
       url: import.meta.env.REACT_APP_SERVICES_BASE_URL,
     },
     {
       id: 'settings',
-      icon: <MdSettings className='menu-item-icon' />,
+      icon: <MdSettings />,
       url: import.meta.env.REACT_APP_SETTINGS_BASE_URL,
     },
     {
       id: 'monitoring',
-      icon: <MdOutlineMonitorWeight className='menu-item-icon' />,
+      icon: <MdOutlineMonitorWeight />,
       url: import.meta.env.REACT_APP_MONITORING_BASE_URL,
     },
   ];
 
-  useQuery({
+  let activeMenuId;
+
+  const { data } = useQuery({
     queryKey: ['accounts/user-role', 'prod'],
     onSuccess: (res: any) => {
       const filteredItems =
@@ -96,74 +89,69 @@ const MainNavigation: FC<{items: MenuItem[], serviceId: string[]}> = ( {items, s
     },
   });
 
+  const location = useLocation();
   const [navCollapsed, setNavCollapsed] = useState(false);
 
   const handleNavToggle = (event: MouseEvent) => {
-    setNavCollapsed(false);
     const isExpanded = event.currentTarget.getAttribute('aria-expanded') === 'true';
     event.currentTarget.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
   };
 
   const renderMenuTree = (menuItems: MenuItem[]) => {
-    return menuItems.map((menuItem) => (
+    return menuItems.filter(x => !x.hidden).map((menuItem) => (
         <li key={menuItem.label[currentlySelectedLanguage]}>
           {!!menuItem.children ? (
               <>
                 <button
-                  className={clsx('nav__toggle', { 'nav__toggle--icon': !!menuItem.id })}
-                  aria-expanded={menuItem.path && (isSameRoot(menuItem)) ? 'true' : 'false'}
-                  onClick={handleNavToggle}
+                    className={clsx('nav__toggle', { 'nav__toggle--icon': !!menuItem.id })}
+                    aria-expanded={menuItem.path && (isSameRoot(menuItem)) ? 'true' : 'false'}
+                    onClick={handleNavToggle}
                 >
-                  {menuItem.id && (
-                    <Icon icon={menuData.find(dataItem => dataItem.id === menuItem.id)?.icon} size='large' />
+                  { menuItem.id &&  (
+                      <Icon icon={menuData.find(dataItem => dataItem.id === menuItem.id)?.icon} />
                   )}
-                  <span className='menu-item-title'>{menuItem.label[currentlySelectedLanguage]}</span>
-                  <Icon icon={<MdKeyboardArrowDown />} className='menu-item-arrow' />
+
+                  <span>{menuItem.label[currentlySelectedLanguage]}</span>
+                  <Icon icon={<MdKeyboardArrowDown />} />
                 </button>
                 <ul className='nav__submenu'>
                   {renderMenuTree(menuItem.children.map((item)  => ({id: menuItem.id, ...item})))}
                 </ul>
               </>
           ) : (
-            serviceId.includes(menuItem.id)
-              ? <NavLink to={menuItem.path || '#'}>
-                  {menuItem.label[currentlySelectedLanguage]}
-                </NavLink>
-              : <a href={menuData.find(dataItem => dataItem.id === menuItem.id)?.url + menuItem.path}>
-                  {menuItem.label[currentlySelectedLanguage]}
-                </a>
+
+              (serviceId.includes(menuItem.id)) ?
+                  <NavLink to={menuItem.path || '#'}>{menuItem.label[currentlySelectedLanguage] }</NavLink> :
+                  <a href={menuData.find(dataItem => dataItem.id === menuItem.id)?.url + menuItem.path}>{menuItem.label[currentlySelectedLanguage]}</a>
+
           )}
-        </li>
-      ),
+        </li>),
     );
   };
 
   const base = window.location.pathname.split("/")[1];
   const currentService = base === 'chat' ? serviceId : [base];
   const isSameRoot = (menuItem) => {
-    if(currentService.includes(menuItem.id)) {
-      return menuItem.children.some((item: MenuItem) => item.path?.includes("/" + window.location.pathname.split("/")[2]));
+    let result = false;
+    if(currentService.includes(menuItem.id)){
+      result = menuItem.children.some((item: MenuItem) => item.path?.includes("/" + window.location.pathname.split("/")[2]));
     }
-    return false;
+    return result;
   }
 
   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>
-      <ul className='nav__menu'>
-        {renderMenuTree(menuItems)}
-      </ul>
-    </nav>
+      <nav className={clsx('nav', { 'nav--collapsed': navCollapsed })}>
+        <button className='nav__menu-toggle' onClick={() => setNavCollapsed(!navCollapsed)}>
+          <Icon icon={<MdClose />} />
+          {t('mainMenu.closeMenu')}
+        </button>
+        <ul className='nav__menu'>
+          {renderMenuTree(menuItems)}
+        </ul>
+      </nav>
   );
 };
 
-export default MainNavigation;
+export default MainNavigation;

package/src/menu/main-navigation.scss

@@ -57,6 +57,9 @@
     &.active {
       font-weight: 700;
     }
+
+    &:focus {
+    }
   }
 
   &__toggle {
@@ -114,26 +117,3 @@
     }
   }
 }
-
-.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 {
-    display: none !important;
-  }
-}