@openstack_dev/gatsby-theme-marketing-oif-core 1.0.0

package/src/components/Navbar/index.js

@@ -0,0 +1,460 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { Script, navigate } from "gatsby";
+import { connect } from "react-redux";
+import { doLogin } from "openstack-uicore-foundation/lib/security/methods";
+import { Container } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+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 IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Button from "@mui/material/Button";
+
+import navbarContent from "../../content/navbar/index.json";
+
+import styles from "./index.module.scss";
+import {
+  SEARCH_WIDGET_BASE_URL,
+  getEnvVariable,
+} from "../../utils/envVariables";
+
+function Navbar({ isLoggedUser, member }) {
+  const [navbarMenu, setNavbarMenu] = React.useState(null);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
+  const [isSearchBarOpen, setIsSearchBarOpen] = React.useState(false);
+
+  const handleSetActiveMenu = (option) => {
+    setNavbarMenu(navbarMenu === option ? null : option);
+  };
+
+  const handleMobileMenuToggle = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+    setNavbarMenu(null);
+  };
+
+  const onClickLogout = () => {
+    navigate("/auth/logout", {
+      state: {
+        backUrl: window.location.pathname,
+      },
+    });
+  };
+
+  const handleCloseSearchBar = (event) => {
+    if (event?.target.matches(".ossw-search-bar-close")) {
+      setIsSearchBarOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener("click", handleCloseSearchBar);
+    return () => {
+      document.removeEventListener("click", handleCloseSearchBar);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (isSearchBarOpen) {
+      const inputElement = document.getElementById("search-bar-input");
+      if (inputElement) {
+        inputElement.focus();
+      }
+    }
+  }, [isSearchBarOpen]);
+
+  const handleNavigation = (url) => {
+    navigate(url);
+  };
+
+  return (
+    <nav role="navigation">
+      <Script
+        src={`${getEnvVariable(SEARCH_WIDGET_BASE_URL)}/widget/embed.min.js`}
+        onLoad={() => console.log("Script loaded")}
+      />
+      <AppBar
+        position="static"
+        className={styles.navbar}
+        sx={{ backgroundColor: "#fff", boxShadow: "none" }}
+      >
+        <Container maxWidth="xl">
+          <Toolbar disableGutters sx={{ flexWrap: "wrap" }}>
+            <Box className={styles.navbarHeader}>
+              <div className={styles.brandWrapper}>
+                <a
+                  className={styles.navbarBrand}
+                  href="/"
+                  alt="Openstack logo"
+                  aria-label="Go to homepage"
+                />
+              </div>
+              <Box
+                className={styles.searchWrapper}
+                sx={{ display: { xs: "none", md: "flex" } }}
+              >
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") setIsSearchBarOpen(true);
+                  }}
+                  onClick={() => setIsSearchBarOpen(true)}
+                  className={styles.searchComponent}
+                >
+                  <SearchIcon className={styles.searchIcon} />
+                  <span className={styles.headerSearchText}>Search</span>
+                </div>
+                <Box
+                  className={`openstack-search-bar ${styles.openstackSearchBar}`}
+                  style={{
+                    visibility: isSearchBarOpen ? "visible" : "hidden",
+                    opacity: isSearchBarOpen ? "1" : "0",
+                  }}
+                  data-baseurl={getEnvVariable(SEARCH_WIDGET_BASE_URL)}
+                  data-context="www-openstack"
+                />
+              </Box>
+            </Box>
+            {/* Mobile Menu */}
+            <Box
+              className={styles.mobileMenuWrapper}
+              sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
+            >
+              <IconButton
+                className={styles.toggleIcon}
+                size="large"
+                aria-label="account of current user"
+                aria-controls="menu-appbar"
+                aria-haspopup="true"
+                onClick={() => handleMobileMenuToggle()}
+                color="inherit"
+              >
+                <MenuIcon />
+              </IconButton>
+            </Box>
+            {/* Desktop Menu */}
+            <Box
+              sx={{
+                flexGrow: 1,
+                display: { xs: "none", md: isSearchBarOpen ? "none" : "flex" },
+                justifyContent: "flex-end",
+              }}
+            >
+              {navbarContent.items.map(
+                (item) => item.display && (
+                <Button
+                  className={styles.navbarOption}
+                  key={item.title}
+                  sx={{ my: 2, display: "block" }}
+                  disableRipple
+                  onClick={() => handleNavigation(item.link)}
+                >
+                  {item.items?.length > 0 ? (
+                    <>
+                      {item.title}
+                      <ArrowDropDownIcon className={styles.arrowDownIcon} />
+                      <Box className={styles.dropDownMenu}>
+                        {item.items.map((subItem) => (!subItem.title && !subItem.link ? (
+                          <div className={styles.divider} />
+                        ) : (
+                          <Button
+                            className={styles.dropdownMenuOption}
+                            key={subItem.title}
+                            onClick={() => handleNavigation(subItem.link)}
+                            sx={{ display: "block" }}
+                            disableRipple
+                          >
+                            {subItem.title}
+                          </Button>
+                        )))}
+                      </Box>
+                    </>
+                  ) : (
+                    item.title
+                  )}
+                </Button>
+                ),
+              )}
+            </Box>
+            {isLoggedUser ? (
+              <Box
+                maxWidth="15%"
+                sx={{
+                  display: {
+                    xs: "none",
+                    md: isSearchBarOpen ? "none" : "flex",
+                  },
+                  justifyContent: "flex-end",
+                  marginLeft: "auto",
+                }}
+              >
+                <Button
+                  className={`${styles.navbarOption}`}
+                  sx={{ my: 2, display: "block" }}
+                  disableRipple
+                >
+                  My Account
+                  <ArrowDropDownIcon className={styles.arrowDownIcon} />
+                  <Box className={styles.dropDownMenu}>
+                    <Button
+                      className={styles.dropdownMenuOption}
+                      onClick={() => handleNavigation("/profile/")}
+                      sx={{ display: "block" }}
+                      disableRipple
+                    >
+                      Edit Profile
+                    </Button>
+                    <Button
+                      className={styles.dropdownMenuOption}
+                      onClick={() => handleNavigation(
+                        `/community/members/profile/${
+                          member.id
+                        }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`,
+                      )}
+                      sx={{ display: "block" }}
+                      disableRipple
+                    >
+                      View Public Profile
+                    </Button>
+                    <div className={styles.divider} />
+                    <Button
+                      className={styles.dropdownMenuOption}
+                      sx={{ display: "block" }}
+                      onClick={onClickLogout}
+                      disableRipple
+                    >
+                      Log out
+                    </Button>
+                  </Box>
+                </Button>
+              </Box>
+            ) : (
+              <Box
+                maxWidth="15%"
+                sx={{
+                  display: {
+                    xs: "none",
+                    md: isSearchBarOpen ? "none" : "flex",
+                  },
+                  justifyContent: "flex-end",
+                  marginLeft: "auto",
+                }}
+              >
+                <Button
+                  className={`${styles.navbarOption} ${styles.join}`}
+                  sx={{ my: 2, display: "block" }}
+                  disableRipple
+                >
+                  Join
+                  <ArrowDropDownIcon className={styles.arrowDownIcon} />
+                  <Box className={styles.dropDownMenu}>
+                    <Button
+                      className={styles.dropdownMenuOption}
+                      onClick={() => handleNavigation("https://openinfra.dev/join")}
+                      sx={{ display: "block" }}
+                      disableRipple
+                    >
+                      Sign up for Foundation Membership
+                    </Button>
+                    <Button
+                      className={styles.dropdownMenuOption}
+                      onClick={() => handleNavigation("https://openinfra.dev/join")}
+                      sx={{ display: "block" }}
+                      disableRipple
+                    >
+                      Sponsor the Foundation
+                    </Button>
+                    <Button
+                      className={styles.dropdownMenuOption}
+                      onClick={() => handleNavigation("https://openinfra.dev")}
+                      sx={{ display: "block" }}
+                      disableRipple
+                    >
+                      More about the Foundation
+                    </Button>
+                  </Box>
+                </Button>
+                <Button
+                  className={`${styles.navbarOption} ${styles.login}`}
+                  onClick={() => doLogin("/")}
+                  sx={{ my: 2, display: "block" }}
+                  disableRipple
+                >
+                  Log in
+                </Button>
+              </Box>
+            )}
+          </Toolbar>
+          <Box
+            className={`${styles.openstackSearchBarMobile} openstack-search-bar ossw-mobile`}
+            style={{
+              visibility: isMobileMenuOpen ? "visible" : "hidden",
+              opacity: isMobileMenuOpen ? "1" : "0",
+              height: isMobileMenuOpen ? "auto" : 0,
+            }}
+            data-baseurl={getEnvVariable(SEARCH_WIDGET_BASE_URL)}
+            data-context="www-openstack"
+          />
+          {isMobileMenuOpen && (
+            <Box
+              className={styles.navbarMobileMenu}
+              sx={{
+                display: { xs: "flex", md: "none" },
+              }}
+            >
+              {navbarContent.items.map(
+                (item) => item.display && (
+                <>
+                  <Button
+                    disableRipple
+                    className={styles.mobileOption}
+                    key={`${item.title}-mobile`}
+                    onClick={() => handleSetActiveMenu(item.title)}
+                  >
+                    {item.title}
+                    {item.items?.length > 0
+                          && (item.title === navbarMenu ? (
+                            <RemoveIcon aria-hidden="true" />
+                          ) : (
+                            <AddIcon aria-hidden="true" />
+                          ))}
+                  </Button>
+                  {item.items?.length > 0 && item.title === navbarMenu && (
+                  <Box className={styles.mobileDropdownMenu}>
+                    {item.items.map((subItem) => (!subItem.title && !subItem.link ? (
+                      <div className={styles.divider} />
+                    ) : (
+                      <Button
+                        className={styles.mobileDropdownOption}
+                        key={subItem.title}
+                        onClick={() => handleNavigation(subItem.link)}
+                        sx={{ display: "block" }}
+                        disableRipple
+                      >
+                        {subItem.title}
+                      </Button>
+                    )))}
+                  </Box>
+                  )}
+                </>
+                ),
+              )}
+              {isLoggedUser ? (
+                <>
+                  <Button
+                    className={styles.mobileOption}
+                    onClick={() => handleSetActiveMenu("My Account")}
+                    disableRipple
+                  >
+                    My Account
+                    {navbarMenu === "My Account" ? (
+                      <RemoveIcon aria-hidden="true" />
+                    ) : (
+                      <AddIcon aria-hidden="true" />
+                    )}
+                  </Button>
+                  {navbarMenu === "My Account" && (
+                    <Box className={styles.mobileDropdownMenu}>
+                      <Button
+                        className={styles.mobileDropdownOption}
+                        onClick={() => handleNavigation("/profile/")}
+                        sx={{ display: "block" }}
+                        disableRipple
+                      >
+                        Edit Profile
+                      </Button>
+                      <Button
+                        className={styles.mobileDropdownOption}
+                        onClick={() => handleNavigation(
+                          `/community/members/profile/${
+                            member.id
+                          }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`,
+                        )}
+                        sx={{ display: "block" }}
+                        disableRipple
+                      >
+                        View Public Profile
+                      </Button>
+                      <div className={styles.divider} />
+                      <Button
+                        className={styles.mobileDropdownOption}
+                        sx={{ display: "block" }}
+                        onClick={onClickLogout}
+                        disableRipple
+                      >
+                        Log out
+                      </Button>
+                    </Box>
+                  )}
+                </>
+              ) : (
+                <Box>
+                  <Button
+                    className={`${styles.navbarOption} ${styles.join}`}
+                    sx={{ my: 2, display: "block" }}
+                    disableRipple
+                  >
+                    Join
+                    <ArrowDropDownIcon className={styles.arrowDownIcon} />
+                    <Box className={styles.dropDownMenu}>
+                      <Button
+                        className={styles.dropdownMenuOption}
+                        onClick={() => handleNavigation("https://openinfra.dev/join")}
+                        sx={{ display: "block" }}
+                        disableRipple
+                      >
+                        Sign up for Foundation Membership
+                      </Button>
+                      <Button
+                        className={styles.dropdownMenuOption}
+                        onClick={() => handleNavigation("https://openinfra.dev/join")}
+                        sx={{ display: "block" }}
+                        disableRipple
+                      >
+                        Sponsor the Foundation
+                      </Button>
+                      <Button
+                        className={styles.dropdownMenuOption}
+                        onClick={() => handleNavigation("https://openinfra.dev")}
+                        sx={{ display: "block" }}
+                        disableRipple
+                      >
+                        More about the Foundation
+                      </Button>
+                    </Box>
+                  </Button>
+                  <Button
+                    className={`${styles.navbarOption} ${styles.login}`}
+                    onClick={() => doLogin("/")}
+                    sx={{ my: 2, display: "block" }}
+                    disableRipple
+                  >
+                    Log in
+                  </Button>
+                </Box>
+              )}
+            </Box>
+          )}
+        </Container>
+      </AppBar>
+    </nav>
+  );
+}
+
+Navbar.propTypes = {
+  isLoggedUser: PropTypes.bool.isRequired,
+  member: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = ({ loggedUserState }) => ({
+  isLoggedUser: loggedUserState.isLoggedUser,
+  member: loggedUserState.member,
+});
+
+export default connect(mapStateToProps, {})(Navbar);