Merge pull request inji#77 from tw-mosip/injiweb-573-closing-hamburger-menu

[INJIWEB-573]: close hamburger menu when moved to different page or clicking outside

Author: vijay151096

inji-web/package-lock.json

@@ -12,6 +12,7 @@
     "@types/node": "^16.18.96",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
+    "@types/react-outside-click-handler": "^1.3.3",
     "@types/react-redux": "^7.1.33",
     "autoprefixer": "^9.8.6",
     "crypto-js": "^4.2.0",
@@ -22,6 +23,7 @@
     "react-i18next": "^14.1.0",
     "react-icons": "^5.1.0",
     "react-loader-spinner": "^6.1.6",
+    "react-outside-click-handler": "^1.3.0",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",

inji-web/package.json

@@ -30,7 +30,7 @@ export const CredentialList: React.FC<CredentialListProps> = ({state}) => {
             <HeaderTile content={t("containerHeading")}/>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {credentials?.filtered_credentials && credentials?.filtered_credentials.map((credential: CredentialWellknownObject, index: number) => (
-                    <Credential credential={credential} index={index}/>
+                    <Credential credential={credential} key={index} index={index}/>
                 ))}
             </div>
     </React.Fragment>

inji-web/src/components/Credentials/CredentialList.tsx

@@ -41,6 +41,7 @@ export const HelpAccordion: React.FC = () => {
             <div data-testid="Help-Accordion-Container">
                 {accordionItems.map((item, index) => (
                     <HelpAccordionItem id={index}
+                                       key={index}
                                        title={item.title}
                                        content={item.content}
                                        open={open}

inji-web/src/components/Help/HelpAccordion.tsx

@@ -27,7 +27,7 @@ export const HelpAccordionItem: React.FC<HelpAccordionItemProps> = (props) => {
             {(props.id === props.open) && (
                 <div className="p-5 bg-iw-background border-t-2"
                      data-testid="Help-Item-Content-Text">
-                    {props.content.map(content => <p className={"text-iw-title"}>{content}</p>)}
+                    {props.content.map((content, index) => <p key={index} className={"text-iw-title"}>{content}</p>)}
 
                 </div>
             )}

inji-web/src/components/Help/HelpAccordionItem.tsx

@@ -30,7 +30,7 @@ export const IssuersList: React.FC<IssuersListProps> = ({state}) => {
             <HeaderTile content={t("containerHeading")}/>
             <div className="grid grid-cols-1 md:grid-cols-3 sm:grid-cols-2 gap-5">
                 {issuers.filtered_issuers.map((issuer: IssuerObject, index: number) =>
-                    <Issuer issuer={issuer} index={index}/>)}
+                    <Issuer issuer={issuer} key={index} index={index}/>)}
             </div>
         </div>
     </React.Fragment>