\r\n {\r\n // For each link in column group\r\n columnLinks.map((columnLink, linkIndex) =>\r\n (columnLink?.fields?.link?.value?.href && columnLink.fields?.linkText?.value) &&\r\n
\r\n closeSearchFlyout()}\r\n >\r\n \r\n \r\n
\r\n )\r\n }\r\n
\r\n :\r\n null\r\n )\r\n })\r\n)\r\n\r\nexport default GeneralNavigation;","import React, { useEffect, useReducer, useState } from 'react';\r\nimport { Image } from '@sitecore-jss/sitecore-jss-react';\r\nimport { RoutableLink } from '../../react/RoutableLink';\r\nimport { withSitecoreContext, mediaApi} from '@sitecore-jss/sitecore-jss-react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport GeneralNavigation from '../../react/GeneralNavigation/index';\r\nimport { handleResizeFixedHeader } from '../../ts/handleResizeFixedHeader';\r\nimport css from './index.module.scss';\r\nimport { Text } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport { Sizes, Colors } from '../../ts/enums';\r\nimport GeneralBrandbar from '../../react/GeneralBrandbar';\r\n\r\nconst ToggleMobileNav = () => {\r\n let header = document.querySelector('header[data-mobilenavisopen');\r\n let currentState = header.getAttribute('data-mobilenavisopen') === 'true';\r\n // @ts-ignore\r\n header.setAttribute('data-mobilenavisopen', !currentState);\r\n if (typeof window !== 'undefined' && window.innerWidth <= 900) {\r\n let currentBodyState = document.body.getAttribute('data-mobilenavopen') === 'true';\r\n // @ts-ignore\r\n document.body.setAttribute('data-mobilenavopen', !currentBodyState);\r\n }\r\n}\r\n\r\nconst HandleScroll = () => {\r\n window.addEventListener('scroll', function () {\r\n let header = document.body.querySelector('header[data-scrolldown]');\r\n let elementAfterHeader = header.nextElementSibling || header.parentElement.nextElementSibling;\r\n let elBoundingTop = elementAfterHeader?.getBoundingClientRect()?.top;\r\n\r\n if (elBoundingTop < -80) {\r\n // Desktop and user has scrolled more than 80 pixels down, 80 is arbitrary - looks nice\r\n header.setAttribute('data-scrolldown', 'true');\r\n }\r\n else {\r\n // Mobile or user is at top of page\r\n header.setAttribute('data-scrolldown', 'false');\r\n }\r\n });\r\n}\r\n\r\nconst HandleResize = () => {\r\n if (typeof window !== 'undefined') {\r\n // Run on load:\r\n handleResizeFixedHeader();\r\n\r\n window.addEventListener('resize', function () {\r\n // Need to handle this after each resize as well:\r\n handleResizeFixedHeader();\r\n });\r\n }\r\n}\r\n\r\nconst RemoveCurrentFocus = () => {\r\n // Clear focus\r\n if (typeof document?.activeElement !== 'undefined') {\r\n (document.activeElement as HTMLElement).blur();\r\n }\r\n}\r\n\r\nconst CloseDesktopNav = () => {\r\n if (typeof window !== 'undefined' && window.innerWidth > 900) {\r\n let navPanels = document.querySelectorAll(`div[class*='NavPanel_container'`);\r\n navPanels.forEach(navPanel => {\r\n // add class to remove focus\r\n navPanel.classList.add('hide');\r\n RemoveCurrentFocus();\r\n // remove class to get back old styles\r\n setTimeout((function() {\r\n navPanel.classList.remove('hide');\r\n }), 100);\r\n });\r\n }\r\n}\r\nconst ToggleMobileNavItem = (e) => {\r\n if (typeof window !== 'undefined' && window.innerWidth <= 900) {\r\n let navItem = e.target.closest('[data-mobilenavitemopen]');\r\n let currentState = navItem.getAttribute('data-mobilenavitemopen') === 'true';\r\n navItem.setAttribute('data-mobilenavitemopen', !currentState);\r\n }\r\n}\r\n\r\nconst ResetNav = () => {\r\n // If desktop, close nav\r\n CloseDesktopNav();\r\n\r\n // If mobile, close nav\r\n ToggleMobileNav();\r\n}\r\n\r\nconst ToggleInfoDropdown = () => {\r\n let dropdownContainer = document.querySelector('*[data-infodropdownisopen');\r\n let currentState = dropdownContainer.getAttribute('data-infodropdownisopen') === 'true';\r\n // @ts-ignore\r\n dropdownContainer.setAttribute('data-infodropdownisopen', !currentState);\r\n dropdownContainer.setAttribute('aria-expanded', `${!currentState}`);\r\n\r\n if (!currentState) {\r\n // Is open\r\n document.body.addEventListener('click', clickToCloseDropdown);\r\n document.body.addEventListener('keyup', keyToCloseDropdown);\r\n }\r\n else {\r\n // Is closed\r\n document.body.removeEventListener('click', clickToCloseDropdown);\r\n document.body.removeEventListener('keyup', keyToCloseDropdown);\r\n }\r\n}\r\n\r\nconst keyToCloseDropdown = (e) => {\r\n // Escape || Tab outside dropdown\r\n if (e.which === 27 || (e.which === 9 && e.target.closest('[data-infodropdownisopen]') === null)) {\r\n ToggleInfoDropdown();\r\n }\r\n}\r\n\r\nconst clickToCloseDropdown = (e) => {\r\n if (!e.target.classList.contains(css.infoDropdownButton)) {\r\n ToggleInfoDropdown();\r\n }\r\n} \r\n\r\n// check the current and related targets of the event\r\n// and if we tabbed out of the search flyout close it.\r\nconst ToggleSearchFlyout2 = (event) => {\r\n \r\n if (event.currentTarget && event.relatedTarget) {\r\n\r\n const currentTargetId = event.currentTarget.id;\r\n const relatedTargetId = event.relatedTarget.id;\r\n const activeElementTag = document.activeElement.tagName;\r\n\r\n if(!(activeElementTag === \"BODY\" && currentTargetId === \"searchFlyout\" && (\r\n relatedTargetId === \"searchFlyoutIcon\" || \r\n relatedTargetId === \"searchBar\" || \r\n relatedTargetId === \"searchBarSubmit\" || \r\n relatedTargetId === \"searchFlyoutClose\"\r\n ))){\r\n ToggleSearchFlyout();\r\n }\r\n }\r\n};\r\n\r\nconst ToggleSearchFlyout = () => {\r\n let currentState = document.body.getAttribute('data-searchopen') === 'true';\r\n // @ts-ignore\r\n document.body.setAttribute('data-searchopen', !currentState);\r\n \r\n //adjust the aria-expanded attribute for the search icon button\r\n document.getElementById(\"searchFlyoutIcon\").setAttribute('aria-expanded',Boolean(!currentState).toString());\r\n\r\n // Update tabindexes for keyboard tabbing, -1 is 'not tabbable' when search form is closed, 0 is 'tabbable' when open\r\n let allSearchActions = document.body.querySelectorAll(`div[class*='EduBrandBar_searchFlyout'] *[tabindex]`);\r\n allSearchActions.forEach(function (action) {\r\n action.setAttribute('tabIndex', currentState ? '-1' : '0');\r\n });\r\n}\r\n\r\n\r\nconst GeneralHeader = (props) => {\r\n \r\n const { fields, history, sitecoreContext } = props;\r\n // @ts-ignore\r\n const [resetKey, setResetKey] = useReducer(() => Math.random(), Math.random());\r\n const [searchQuery, setSearchQuery] = useState('');\r\n const children = fields?.children ? fields?.children : [null, null];\r\n const [brandBar, navigation] = children;\r\n const utilityNavLinks = brandBar?.fields?.children;\r\n const navList = navigation.fields\r\n const siteLogo = fields?.siteLogo?.value?.src ? mediaApi.updateImageUrl(fields.siteLogo.value.src.split('?')[0]) : \"\";\r\n const siteName = fields.siteName.value;\r\n const seachIcon = fields.searchIcon.value;\r\n const searchPageLink = fields.searchPageLink?.value?.href;\r\n const globalSearchboxPlaceholderText = fields.globalSearchboxPlaceholderText.value;\r\n // const navigationFields = navigation?.fields;\r\n const isEditing = sitecoreContext && (sitecoreContext.pageEditing == true || sitecoreContext.pageState == 'preview'); \r\n const hasChildren = fields?.children?.length > 0;\r\n\r\n \r\n\r\n const handleSearch = () => {\r\n if (fields.searchPageLink?.value?.href) {\r\n history.push(`${fields.searchPageLink.value.href}#q=${searchQuery}`);\r\n }\r\n}\r\n const handleChange = (e) => {\r\n setSearchQuery(e.target.value)\r\n }\r\n//Updating the useEffect to run the HandleResize whenever there is change in GeneralHeader component as part of EWP bugs-1-Alert-Banner-Display\r\n useEffect(() => {\r\n if (typeof window !== 'undefined' && !isEditing) {\r\n HandleResize();\r\n HandleScroll();\r\n }\r\n });\r\n\r\n return (\r\n \r\n \r\nSkip to main content\r\n\r\n{/* BrandBar */}\r\n\r\n \r\n{/* Flyout Search */}\r\n