Merge pull request #118 from egovernments/Hamburger-Enhancement

updated sidebar and hambuger
egovernments · Aug 30, 2024 · 611bdfa · 611bdfa
2 parents 746c342 + c49af75
commit 611bdfa
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 37 deletions.
diff --git a/react/example/package.json b/react/example/package.json
@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.30",
+    "@egovernments/digit-ui-components": "0.0.2-beta.31",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",

diff --git a/react/modules/core/package.json b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.30",
+    "@egovernments/digit-ui-components": "0.0.2-beta.31",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.30",
+    "@egovernments/digit-ui-components": "0.0.2-beta.31",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

diff --git a/react/package.json b/react/package.json
@@ -85,7 +85,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.11",
-    "@egovernments/digit-ui-components": "0.0.2-beta.30",
+    "@egovernments/digit-ui-components": "0.0.2-beta.31",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

diff --git a/react/ui-components/package.json b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.30",
+  "version": "0.0.2-beta.31",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",

diff --git a/react/ui-components/src/atoms/MobileSidebar.js b/react/ui-components/src/atoms/MobileSidebar.js
@@ -22,7 +22,8 @@ const MobileSidebar = ({
   profile,
   usermanuals,
   onSelect,
-  onLogout
+  onLogout,
+  reopenOnLogout,
 }) => {
   const { t } = useTranslation();
   const [searchTerms, setSearchTerms] = useState({});
@@ -63,11 +64,12 @@ const MobileSidebar = ({
   const onLogoutClick = () => {
     setShowHamburger(false);
     onLogout && onLogout();
+    onLogout && reopenOnLogout && setShowHamburger(true);
   }
-
+  
   const filterItems = (items, searchTerm) => {
-    return items.filter((item) => {
-      if (item.label.toLowerCase().includes(searchTerm.toLowerCase())) {
+    return items?.filter((item) => {
+      if (item?.label?.toLowerCase().includes(searchTerm.toLowerCase())) {
         return true;
       }
       if (item.children) {
@@ -121,6 +123,17 @@ const MobileSidebar = ({
           },
         ];
 
+  const Icon = (icon,className) =>{
+    return (
+      iconRender(
+        icon,
+        theme === "light" ? lightThemeIconColor : darkThemeIconColor,
+        iconSize,
+        iconSize,
+        className
+      )
+    )
+  }
   const renderItems = (items, parentIndex = -1) => items?.map((item, index) => {
       const currentIndex = parentIndex >= 0 ? `${parentIndex}-${index}` : index;
       const isExpanded = expandedItems[currentIndex];
@@ -140,15 +153,8 @@ const MobileSidebar = ({
               onClick={() => handleArrowClick(item, currentIndex, parentIndex)}
               tabIndex={0}
             >
-              {item.icon &&
-                iconRender(
-                  item.icon,
-                  theme === "light" ? lightThemeIconColor : darkThemeIconColor,
-                  "1.5rem",
-                  "1.5rem",
-                  `digit-msb-icon`
-                )}
-              {<span className="digit-msb-item-label">{item.label}</span>}
+              {item.icon && Icon(item.icon,"digit-msb-icon")}
+              {<span className="digit-msb-item-label">{item?.label}</span>}
               {item.children && (
                 <span className="digit-msb-expand-icon">
                   {isExpanded ? (
@@ -196,6 +202,7 @@ const MobileSidebar = ({
     items?.map((item, index) => {
       const currentIndex = parentIndex >= 0 ? `${parentIndex}-${index}` : index;
       const isExpanded = expandedItems[currentIndex];
+      const icon = item.icon ? Icon(item.icon,"digit-icon-msb") : null;
       return (
         <>
           <div className={"digit-item-child-wrapper-msb"} key={currentIndex}>
@@ -206,15 +213,17 @@ const MobileSidebar = ({
               onClick={() => handleItemClick(item, currentIndex, parentIndex)}
               tabIndex={0}
             >
-              {item.icon &&
-                iconRender(
-                  item.icon,
-                  theme === "light" ? lightThemeIconColor : darkThemeIconColor,
-                  iconSize,
-                  iconSize,
-                  `digit-icon-msb`
-                )}
-              {<span className={`digit-item-label-msb ${!item.icon ? "withoutIcon" : ""}`}>{item.label}</span>}
+              {icon}
+              {/* {item.icon && Icon(item.icon, "digit-icon-msb")} */}
+              {
+                <span
+                  className={`digit-item-label-msb ${
+                    (!item.icon || !icon) ? "withoutIcon" : ""
+                  }`}
+                >
+                  {item?.label}
+                </span>
+              }
               {item.children && (
                 <span
                   className={`digit-expand-icon-msb ${"child-level"}`}
@@ -332,7 +341,8 @@ MobileSidebar.propTypes = {
   profileName: PropTypes.string,
   profileNumber: PropTypes.string,
   isSearchable:PropTypes.bool,
-  userManualLabel:PropTypes.string
+  userManualLabel:PropTypes.string,
+  reopenOnLogout:PropTypes.bool
 };
 
 export default MobileSidebar;
diff --git a/react/ui-components/src/atoms/Sidebar.js b/react/ui-components/src/atoms/Sidebar.js
@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect,Fragment } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import { SVG, TextInput } from "../atoms";
 import { IMAGES } from "../constants/images/images";
 import { Colors } from "../constants/colors/colorconstants";
 import { iconRender } from "../utils/iconRender";
+import { Spacers } from "../constants/spacers/spacers";
 
 const Sidebar = ({
   items,
@@ -29,6 +30,8 @@ const Sidebar = ({
   const lightThemeColor = Colors.lightTheme.primary[2];
 
   const primaryColor = theme === "dark" ? darkThemeColor : lightThemeColor;
+  const iconSize = Spacers.spacer6;
+  const bottomIconSize = Spacers.spacer4;
 
   const handleArrowClick = (item, index, parentIndex) => {
     if (item.children) {
@@ -54,8 +57,8 @@ const Sidebar = ({
     isParentOfSelectedItem,
     iconReq,
     iconFill,
-    width = "1.5rem",
-    height = "1.5rem"
+    width = iconSize,
+    height = iconSize
   ) => {
     return iconRender(
       iconReq,
@@ -264,19 +267,19 @@ const Sidebar = ({
         <div className={`digit-sidebar-bottom ${theme || ""} ${variant || ""}`}>
           <div>
             <div className="digit-sidebar-bottom-item" onClick={()=> onBottomItemClick && onBottomItemClick("Help")}>
-              <SVG.Help width={"16px"} height={"16px"} fill={primaryColor} />
+              <SVG.Help width={bottomIconSize} height={bottomIconSize} fill={primaryColor} />
               <span className="digit-sidebar-bottom-item-text">{t("Help")}</span>
             </div>
             <div className={`digit-sidebar-bottom-item`} onClick={()=> onBottomItemClick && onBottomItemClick("Settings")}>
               <SVG.Settings
-                width={"16px"}
-                height={"16px"}
+                width={bottomIconSize}
+                height={bottomIconSize}
                 fill={primaryColor}
               />
               <span className="digit-sidebar-bottom-item-text">{t("Settings")}</span>
             </div>
             <div className={`digit-sidebar-bottom-item`} onClick={()=>onBottomItemClick && onBottomItemClick("Logout")}>
-              <SVG.Logout width={"16px"} height={"16px"} fill={primaryColor} />
+              <SVG.Logout width={bottomIconSize} height={bottomIconSize} fill={primaryColor} />
               <span className="digit-sidebar-bottom-item-text">{t("Logout")}</span>
             </div>
             <hr className={`divider`}></hr>

diff --git a/react/ui-components/src/atoms/stories/Hamburger.stories.js b/react/ui-components/src/atoms/stories/Hamburger.stories.js
@@ -17,7 +17,8 @@ export default {
     userManualLabel:{control:"text"},
     profile:{control:"text"},
     onSelect:{ action: "onChange" },
-    onLogout:{action:"onChange"}
+    onLogout:{action:"onChange"},
+    reopenOnLogout:{control:"boolean"}
   },
 };
 
@@ -180,7 +181,8 @@ const commonArgs = {
   profile:"",
   usermanuals:[],
   onSelect:onSelect,
-  onLogout:onLogout
+  onLogout:onLogout,
+  reopenOnLogout:false
 };
 
 export const LightTheme = Template.bind({});