@openstack_dev/gatsby-theme-marketing-oif-core 1.0.12 → 1.0.13

package/src/components/Navbar/template.js

@@ -0,0 +1,157 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { navigate } from "gatsby";
+import { connect } from "react-redux";
+import { Container } from "@mui/material";
+import "@fortawesome/fontawesome-free/css/all.css";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import PublicUserSubNavBar from "./PublicUserSubNavBar";
+import AuthUserSubNavBar from "./AuthUserSubNavBar";
+import NavBarItem from "./NavBarItem";
+import MobileMenu from "./MobileMenu";
+import SearchBar from "./SearchBar";
+import NavBarHeader from "./NavBarHeader";
+
+import styles from "./index.module.scss";
+
+function NavBarTemplate({ data, isLoggedUser, member }) {
+  const [navbarMenu, setNavbarMenu] = React.useState("");
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
+  const [isSearchBarOpen, setIsSearchBarOpen] = React.useState(false);
+
+  const handleSetActiveMenu = (option) => {
+    setNavbarMenu(navbarMenu === option ? "" : option);
+  };
+
+  const handleMobileMenuToggle = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+    setNavbarMenu("");
+  };
+
+  const handleNavigation = (ev, url) => {
+    ev.preventDefault();
+    navigate(url);
+  };
+
+  return (
+    <nav role="navigation">
+      <AppBar
+        position="static"
+        className={styles.navbar}
+        sx={{ backgroundColor: "#fff", boxShadow: "none" }}
+      >
+        <Container maxWidth="xl">
+          <Toolbar disableGutters sx={{ flexWrap: "wrap" }}>
+            <NavBarHeader
+              setIsSearchBarOpen={(value) => setIsSearchBarOpen(value)}
+            />
+            {/* Mobile Menu */}
+            <MobileMenu handleMobileMenuToggle={handleMobileMenuToggle} />
+            {/* Desktop Menu */}
+            <Box
+              sx={{
+                flexGrow: 1,
+                display: {
+                  xs: "none",
+                  md: isSearchBarOpen ? "none" : "flex",
+                },
+                justifyContent: "flex-end",
+              }}
+            >
+              {data.items.map(
+                (item) => item.display && (
+                <NavBarItem
+                  key={`navbar-item-${item.title}`}
+                  item={item}
+                  navbarMenu={navbarMenu}
+                  handleNavigation={handleNavigation}
+                />
+                ),
+              )}
+            </Box>
+            {isLoggedUser ? (
+              <AuthUserSubNavBar
+                isMobile={false}
+                member={member}
+                navbarMenu={navbarMenu}
+                isSearchBarOpen={isSearchBarOpen}
+                handleNavigation={handleNavigation}
+              />
+            ) : (
+              <PublicUserSubNavBar
+                isSearchBarOpen={isSearchBarOpen}
+                handleNavigation={handleNavigation}
+                isDesktop
+              />
+            )}
+          </Toolbar>
+          <SearchBar isMobileMenuOpen={isMobileMenuOpen} isMobile />
+          {isMobileMenuOpen && (
+            <Box
+              className={styles.navbarMobileMenu}
+              sx={{
+                display: { xs: "flex", md: "none" },
+              }}
+            >
+              {data.items.map(
+                (item) => item.display && (
+                <NavBarItem
+                  item={item}
+                  key={`navbar-item-mobile-${item.title}`}
+                  navbarMenu={navbarMenu}
+                  setActiveMenu={(option) => handleSetActiveMenu(option)}
+                  handleNavigation={handleNavigation}
+                  isMobile
+                />
+                ),
+              )}
+              {isLoggedUser ? (
+                <AuthUserSubNavBar
+                  member={member}
+                  navbarMenu={navbarMenu}
+                  setActiveMenu={(option) => handleSetActiveMenu(option)}
+                  handleNavigation={handleNavigation}
+                  isMobile
+                />
+              ) : (
+                <PublicUserSubNavBar handleNavigation={handleNavigation} />
+              )}
+            </Box>
+          )}
+        </Container>
+      </AppBar>
+    </nav>
+  );
+}
+
+NavBarTemplate.propTypes = {
+  isLoggedUser: PropTypes.bool.isRequired,
+  member: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]),
+  data: PropTypes.shape({
+    title: PropTypes.string,
+    link: PropTypes.string,
+    display: PropTypes.bool,
+    requiresAuth: PropTypes.bool,
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        link: PropTypes.string,
+        title: PropTypes.string,
+        display: PropTypes.bool,
+        requiresAuth: PropTypes.bool,
+      }),
+    ),
+  }).isRequired,
+};
+
+NavBarTemplate.defaultProps = {
+  member: null,
+};
+
+const mapStateToProps = ({ loggedUserState }) => ({
+  isLoggedUser: loggedUserState.isLoggedUser,
+  member: loggedUserState.member,
+});
+
+export default connect(mapStateToProps, {})(NavBarTemplate);