\n )\n )\n}\n\nexport default EmergencyAlert","import React from \"react\"\n\nimport SkipToContent from \"./skipToContent\"\nimport MegaMenu from \"./megaMenu.js\"\nimport EmergencyAlert from \"./emergencyAlert\"\n\nexport default function Header({ content = [] }) {\n\n return (\n <>\n \n \n \n >\n ) \n}","export default __webpack_public_path__ + \"static/BCParks_Primary_Reversed-cropped-0080416cb5f347c8e7c33f32739f17ca.svg\";","export default __webpack_public_path__ + \"static/BCParks_Primary_Reversed_Vertical-9873b7442479cf33ebc73121675114fa.svg\";","import React, { useState, useEffect, useCallback } from \"react\"\nimport PropTypes from \"prop-types\"\nimport { Link, navigate } from \"gatsby\"\nimport Logo from \"../images/logo/BCParks_Primary_Reversed-cropped.svg\"\nimport LogoVertical from \"../images/logo/BCParks_Primary_Reversed_Vertical.svg\"\nimport FontAwesome from \"../components/fontAwesome\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { faBars, faXmark, faChevronLeft, faChevronRight, faCircleChevronRight } from \"@fortawesome/free-solid-svg-icons\"\n\nimport { useScreenSize } from \"../utils/helpers\"\nimport { trackSnowplowEvent } from \"../utils/snowplowHelper\"\nimport \"../styles/megaMenu/megaMenu.scss\"\n\nconst MegaMenu = ({ content, menuMode }) => {\n const [menuContent, setMenuContent] = useState([])\n const [menuTree, setMenuTree] = useState([])\n const [menuRoot, setMenuRoot] = useState({})\n const [selectedItem, setSelectedItem] = useState([]) // most recent item user has interacted with\n const [selections, setSelections] = useState({}) // the selected item at each level, i.e. selection breadcrumbs\n const [isMenuOpen, setIsMenuOpen] = useState(false) // currently only used for mobile - menu closed at first\n const [hasClickedTwice, setHasClickedTwice] = useState(false)\n const [currentPath, setCurrentPath] = useState(\"\")\n const screenSize = useScreenSize()\n const ROOT_MENU_URL = '/'\n let sectionImages = {}\n let menuCollection\n let menuElements\n if (typeof window !== \"undefined\") {\n menuCollection = document.getElementsByClassName(\"menu-children-exist--true menu-level-0-children\")\n menuElements = Array.from(menuCollection)\n }\n\n const getSelectionObj = (item, obj) => {\n // this creates an object that indicates all the pages that\n // are \"selected\" based on the selectedItem and its parents\n // i.e. the breadcrumbs back to home\n // this allows us to highlight the selected parents and\n // keep the correct menus open\n if (item.url === ROOT_MENU_URL) {\n // have reached home,\n // add home at level 0 and return, ending he recursion\n obj[0] = item\n return obj\n } else {\n // add this item as the one that is \"selected\" at its level\n // then recurse to its parent to add the next highest level\n obj[item.treeLevel] = item\n obj = getSelectionObj(item.parent, obj) // recurse\n return obj\n }\n }\n\n const menuNavigate = item => {\n // either open the menu for the item's children (isPageNav=false)\n // or navigate to the associated url (isPageNav=true)\n if (item) {\n let isPageNav = false\n\n if (!item.hasChildren) {\n isPageNav = true\n }\n if (item === selectedItem) {\n // reselect\n isPageNav = true\n }\n\n if (isPageNav) {\n navigate(item.url)\n setIsMenuOpen(false)\n menuReset()\n } else {\n setSelectedItem(item)\n let selObj = getSelectionObj(item, {}) // track the selected item at this level and above\n setSelections(selObj)\n }\n }\n }\n\n const navigateBack = (e, item) => {\n e.preventDefault();\n // go \"up\" a level by navigating to this item's parent\n menuNavigate(item.parent)\n }\n\n const sectionClick = (e, section, menuMode) => {\n if (section.hasChildren) {\n e.preventDefault()\n } else {\n if (currentPath.includes(section.url)) {\n setIsMenuOpen(false)\n }\n handleClickSnowplowEvent(section.url)\n }\n\n if (menuMode !== \"sitemap\") {\n // otherwise hover triggered in mobile emulator\n if (section !== selectedItem) {\n // don't trigger nav through hovers\n setSelectedItem(section)\n let selObj = getSelectionObj(section, {}) // track the selected item at this level and above\n setSelections(selObj)\n if (selectedItem.treeLevel === 2) {\n setHasClickedTwice(false)\n }\n } else {\n if (selectedItem.treeLevel === 2) {\n setHasClickedTwice(!hasClickedTwice)\n } else {\n menuReset()\n }\n }\n }\n }\n\n const menuReset = () => {\n // reset menu to initial state, with root of menuTree selected\n if (selectedItem !== menuRoot) {\n menuNavigate(menuRoot)\n }\n }\n\n const menuFocus = e => {\n // doesn't do anything, needed to eliminate warning\n }\n\n const toggleMenu = e => {\n if (!isMenuOpen) {\n // menu is closed, will open now\n menuReset() // select the root\n }\n setIsMenuOpen(!isMenuOpen) // toggle open state\n }\n\n const sortedTree = useCallback(\n (arr, level) => {\n // sort the items at this level\n // then recurse on each item to sort the children, etc\n arr.sort((a, b) => {\n return a.order - b.order // sort the array by order\n })\n arr.forEach(item => {\n item.treeLevel = level\n item.orderCode =\n item.parent?.treeLevel > 0\n ? item.parent.orderCode + \".\" + item.order\n : item.order\n\n if (item.strapi_children === undefined) {\n // catch second level where children are not defined\n // get items whose parent is the current item\n let itemChildren = menuContent.filter(\n child => child.strapi_parent?.id === item.id\n )\n item.strapi_children = itemChildren || []\n }\n if (item.treeLevel < 3) {\n // Enforcing max 3 levels\n // process children\n item.strapi_children = sortedTree(item.strapi_children || [], level + 1) // recurse for each child\n item.hasChildren = item.strapi_children.length > 0\n\n // add parent\n item.strapi_children.map(i => {\n i.parent = item\n return i\n })\n } else {\n // prevent view from showing children\n // deeper than max level\n item.hasChildren = false\n }\n })\n\n return arr // return sorted children back to parent\n },\n [menuContent]\n )\n\n const handleClick = useCallback((e) => {\n if (!(menuElements.some((el) => el.parentElement.contains(e.target)))) {\n menuReset()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [menuElements])\n\n const handleClickSnowplowEvent = (url) => {\n trackSnowplowEvent(\n \"link_click\",\n null,\n null,\n null,\n url,\n {}\n )\n }\n\n const isExternalUrl = (url) => {\n // a URL is considered external if it begins with \"http://\" or \"https://\"\n return /^https?:\\/\\//.test(url)\n }\n\n useEffect(() => {\n // create sorted + structured menuTree from menuContent\n\n // pick the root of the tree\n let t = menuContent.filter(item => item.url === ROOT_MENU_URL)\n\n // sort all levels of the menu\n t = sortedTree(t, 0) // pass root at level 0\n\n // store in menuTree, ready to be passed to view\n setMenuTree(t)\n\n const root = t[0]\n setMenuRoot(root)\n }, [setMenuTree, sortedTree, menuContent])\n\n useEffect(() => {\n // make deep copy of content to process, will trigger useEffect above\n setMenuContent(JSON.parse(JSON.stringify(content)))\n }, [setMenuContent, content])\n\n useEffect(() => {\n if (menuElements.length === 0) { return }\n document.addEventListener(\"click\", handleClick)\n return () => {\n document.removeEventListener(\"click\", handleClick)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [menuElements])\n\n // get images for top level sections\n let sections = content.filter(item => item.strapi_parent?.url === ROOT_MENU_URL)\n sections.forEach(item => {\n sectionImages[item.order] = item.imgUrl || \"\"\n })\n\n // get current path\n useEffect(() => {\n if (window.location) {\n setCurrentPath(window.location.pathname)\n }\n }, [])\n\n useEffect(() => {\n setIsMenuOpen(screenSize.width > 992)\n }, [screenSize])\n\n // recursive menu generator which makes single version of DOM\n // that can be used for desktop, mobile and sitemap views of megamenu\n const generateMenus = (item, menuMode) => {\n return (\n <>\n {item.hasChildren && (\n
\n {/* 1st level menu item in the navbar and 2nd level menu items e.g. Reservations > Campig fees */}\n {item.strapi_children.filter((page) => page.show).map((page, index) => (\n \n