@ssa-ui-kit/widgets 0.0.16-alpha → 0.0.17-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.16-alpha",
+  "version": "0.0.17-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -30,8 +30,8 @@
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
     "@ssa-ui-kit/core": "^0.0.12-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha"
+    "@ssa-ui-kit/utils": "^0.0.1-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
   },
   "browserslist": [
     ">0.1%",

package/src/components/CollapsibleNavBar/CollapsibleNavBar.tsx

@@ -1,7 +1,9 @@
 import { useState, useId, useEffect } from 'react';
 import { Wrapper } from '@ssa-ui-kit/core';
+import { useWindowSize } from '@ssa-ui-kit/hooks';
 import * as S from './styles';
 
+import { SCREEN_SIZES } from '../../consts';
 import CollapsibleNavBarBase from './CollapsibleNavBarBase';
 import CollapsibleNavBarWrapper from './CollapsibleNavBarWrapper';
 import CollapsibleNavBarList from './CollapsibleNavBarList';
@@ -10,7 +12,6 @@ import { CollapsibleNavBarExtendedProps } from './types';
 import { NavContentToggle } from './CollapsibleNavContentToggle';
 import { NavBarItemWithSubMenu } from './NavBarItemWithSubMenu';
 import { NavBarItemWithoutSubMenu } from './NavBarItemWithoutSubMenu';
-
 /**
  * UI Component that shows the collapsible navigation bar
  */
@@ -19,18 +20,19 @@ export const CollapsibleNavBar = ({
   renderLogo,
 }: CollapsibleNavBarExtendedProps) => {
   const toggleId = useId();
+  const { width } = useWindowSize();
   const [isChecked, onToggle] = useState(false);
+  const isMobile = width < SCREEN_SIZES['900'].width;
 
   useEffect(() => {
-    const onResize = () => {
-      onToggle(false);
-    };
+    onToggle(false);
+  }, [width]);
 
-    window.addEventListener('resize', onResize);
-    return () => {
-      window.removeEventListener('resize', onResize);
-    };
-  }, []);
+  const handleCloseMobileMenu = () => {
+    if (isMobile) {
+      onToggle(!isChecked);
+    }
+  };
 
   return (
     <CollapsibleNavBarBase className={isChecked ? 'opened' : undefined}>
@@ -55,9 +57,17 @@ export const CollapsibleNavBar = ({
             const { iconName, title } = item;
             const keyName = iconName + title.replace(' ', '').toLowerCase();
             return 'items' in item ? (
-              <NavBarItemWithSubMenu item={item} key={keyName} />
+              <NavBarItemWithSubMenu
+                item={item}
+                key={keyName}
+                onClick={handleCloseMobileMenu}
+              />
             ) : (
-              <NavBarItemWithoutSubMenu item={item} key={keyName} />
+              <NavBarItemWithoutSubMenu
+                item={item}
+                key={keyName}
+                onClick={handleCloseMobileMenu}
+              />
             );
           })}
         </CollapsibleNavBarList>

package/src/components/CollapsibleNavBar/NavBarAccordionContent.tsx

@@ -26,12 +26,14 @@ export const NavBarAccordionContent = ({
   accordionUniqueName,
   prefix,
   isPopover,
+  onClick,
   ...rest
 }: RenderContentProps & {
   items: Array<{ path: string; title: string }>;
   accordionUniqueName: string;
   prefix?: string;
   isPopover?: boolean;
+  onClick?: () => void;
 }) => (
   <AccordionContent
     {...rest}
@@ -41,6 +43,7 @@ export const NavBarAccordionContent = ({
         key={`${accordionUniqueName}-link-${subMenuItem.title
           .replace(' ', '')
           .toLowerCase()}`}
+        onClick={onClick}
         to={'/' + prefix + subMenuItem.path}>
         {subMenuItem.title}
       </Link>

package/src/components/CollapsibleNavBar/NavBarItemWithSubMenu.tsx

@@ -18,8 +18,10 @@ const Link = CollapsibleNavBarLink.withComponent('div');
 
 export const NavBarItemWithSubMenu = ({
   item,
+  onClick,
 }: {
   item: CollapsibleNavBarGroup;
+  onClick?: () => void;
 }) => {
   const { iconName, iconSize, title, items, prefix, css } = item;
   const uniqName = iconName + title.replace(' ', '').toLowerCase();
@@ -55,6 +57,7 @@ export const NavBarItemWithSubMenu = ({
                 accordionUniqueName={accordionUniqName}
                 prefix={prefix}
                 isPopover={false}
+                onClick={onClick}
                 {...props}
               />
             )}

package/src/components/CollapsibleNavBar/NavBarItemWithoutSubMenu.tsx

@@ -6,8 +6,10 @@ import * as T from './types';
 
 export const NavBarItemWithoutSubMenu = ({
   item,
+  onClick,
 }: {
   item: T.CollapsibleNavBarItem;
+  onClick?: () => void;
 }) => {
   const { path, iconName, title, iconSize, css } = item;
   const Icon = () => (
@@ -16,7 +18,7 @@ export const NavBarItemWithoutSubMenu = ({
 
   return (
     <CollapsibleNavBarItem key={path}>
-      <CollapsibleNavBarLink to={'/' + path}>
+      <CollapsibleNavBarLink to={'/' + path} onClick={onClick}>
         <CollapsibleNavBarPopover triggerIcon={<Icon />} title={title} />
         <Icon />
         <span>{title}</span>