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

package/src/components/Navbar/index.js

@@ -1,471 +1,30 @@
-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 Link from "../Link";
-
-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();
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
+import NavBarTemplate from "./template";
+
+const navBarQuery = graphql`
+  query {
+    navbarJson {
+      items {
+        display
+        link
+        requiresAuth
+        title
+        items {
+          display
+          link
+          requiresAuth
+          title
+        }
       }
     }
-  }, [isSearchBarOpen]);
+  }
+`;
 
-  const handleNavigation = (url) => {
-    navigate(url);
-  };
+function NavBar() {
+  const { navbarJson: navBarContent } = useStaticQuery(navBarQuery);
 
-  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 && (
-                <Link
-                  className={styles.navbarOption}
-                  key={item.title}
-                  sx={{ my: 2, display: "block" }}
-                  href={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}
-                            key={subItem.title}
-                          />
-                        ) : (
-                          <Button
-                            className={styles.dropdownMenuOption}
-                            key={subItem.title}
-                            onClick={() => handleNavigation(subItem.link)}
-                            sx={{ display: "block" }}
-                            disableRipple
-                          >
-                            {subItem.title}
-                          </Button>
-                        )))}
-                      </Box>
-                    </>
-                  ) : (
-                    item.title
-                  )}
-                </Link>
-                ),
-              )}
-            </Box>
-            {isLoggedUser ? (
-              <Box
-                maxWidth="15%"
-                sx={{
-                  display: {
-                    xs: "none",
-                    md: isSearchBarOpen ? "none" : "flex",
-                  },
-                  justifyContent: "flex-end",
-                  marginLeft: "auto",
-                }}
-              >
-                <Box
-                  className={`${styles.navbarOption}`}
-                  sx={{ my: 2, display: "block" }}
-                >
-                  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>
-                </Box>
-              </Box>
-            ) : (
-              <Box
-                maxWidth="15%"
-                sx={{
-                  display: {
-                    xs: "none",
-                    md: isSearchBarOpen ? "none" : "flex",
-                  },
-                  justifyContent: "flex-end",
-                  marginLeft: "auto",
-                }}
-              >
-                <Box
-                  className={`${styles.navbarOption} ${styles.join}`}
-                  sx={{ my: 2, display: "block" }}
-                >
-                  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>
-                </Box>
-                <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`}
-            sx={{
-              visibility: {
-                xs: isMobileMenuOpen ? "visible" : "hidden",
-                md: "hidden",
-              },
-              opacity: { xs: isMobileMenuOpen ? "1" : "0", md: "0" },
-              height: { xs: isMobileMenuOpen ? "auto" : 0, md: 0 },
-              color: "#8a959e",
-            }}
-            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}
-                        key={subItem.title}
-                      />
-                    ) : (
-                      <Button
-                        className={styles.mobileDropdownOption}
-                        key={`${subItem.title}-mobile`}
-                        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>
-                  <Box
-                    className={`${styles.navbarOption} ${styles.join}`}
-                    sx={{ my: 2, display: "block" }}
-                  >
-                    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>
-                  </Box>
-                  <Button
-                    className={`${styles.navbarOption} ${styles.login}`}
-                    onClick={() => doLogin("/")}
-                    sx={{ my: 2, display: "block" }}
-                    disableRipple
-                  >
-                    Log in
-                  </Button>
-                </Box>
-              )}
-            </Box>
-          )}
-        </Container>
-      </AppBar>
-    </nav>
-  );
+  return <NavBarTemplate data={navBarContent} />;
 }
 
-Navbar.propTypes = {
-  isLoggedUser: PropTypes.bool.isRequired,
-  member: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])])
-    .isRequired,
-};
-
-const mapStateToProps = ({ loggedUserState }) => ({
-  isLoggedUser: loggedUserState.isLoggedUser,
-  member: loggedUserState.member,
-});
-
-export default connect(mapStateToProps, {})(Navbar);
+export default NavBar;

package/src/components/Navbar/index.module.scss

@@ -8,107 +8,13 @@
   min-height: 50px;
   border: 1px solid transparent;
   box-shadow: none;
-  .navbarHeader {
-    .brandWrapper {
-      margin: 10px 0;
-      padding-right: 20px;
-      float: left;
-      border-right: 1px solid #eee;
-      min-width: 135px;
-      a.navbarBrand {
-        background: url("../../images/openstack-logo-full.svg") left no-repeat;
-        height: 35px;
-        width: 135px;
-        color: #777;
-        padding: 15px 15px;
-        font-size: 18px;
-        line-height: 20px;
-        display: block;
-      }
-    }
-    .searchWrapper {
-      padding: 21px 0px 15px 20px;
-      float: left;
-      text-transform: uppercase;
-      color: #8a959e;
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 17.15px;
-      .searchComponent {
-        cursor: pointer;
-        z-index: 5;
-        position: relative;
-        .searchIcon {
-          width: 12px;
-          height: 12px;
-          line-height: 12px;
-          margin-right: 5px;
-        }
-      }
-      .openstackSearchBar {
-        width: 100%;
-        position: absolute;
-        top: 0;
-        z-index: 100;
-        height: 70px;
-        padding-top: 10px;
-        padding-right: 12%;
-        background-color: #fff;
-        opacity: 0;
-        transition: opacity 0.3s ease;
-      }
-      @media (max-width: 768px) {
-        display: none;
-      }
-      @media (max-width: 1160px) {
-        .headerSearchText {
-          display: none;
-        }
-      }
-    }
-    .navbarToggle {
-      appearance: button;
-      cursor: pointer;
-      position: relative;
-      float: right;
-      padding: 9px 10px;
-      margin-top: 8px;
-      margin-bottom: 8px;
-      background: transparent;
-      border: none;
-      .iconBar {
-        background-color: #5a5a5a;
-        height: 3px;
-        border-radius: 3px;
-        display: block;
-        width: 22px;
-        margin-top: 4px;
-      }
-      @media (min-width: 768px) {
-        display: none;
-      }
-    }
-    @media (min-width: 768px) and (max-width: 1310px) {
-      .brandWrapper {
-        width: 75px;
-        min-width: 75px;
-        margin-top: 0;
-        a.navbarBrand {
-          background: url("../../images/openstack-logo-vert.svg") left no-repeat;
-          margin-left: 0px !important;
-          height: 54px;
-          width: 59px;
-        }
-      }
-    }
-  }
   .navbarOption {
     color: #8a959e;
     font-size: 12px;
     font-weight: 400;
     text-transform: uppercase;
     position: relative;
-    padding: 15px 15px 20px;
+    padding: 20px 15px 15px;
     text-decoration: none;
     text-align: left;
     cursor: pointer;
@@ -225,7 +131,7 @@
       padding: 3px 25px;
       border-radius: 4px;
       color: #fff;
-      margin-top: 12px;
+      margin-top: 17px;
       font-size: 14px;
       height: 22px;
       &:hover {
@@ -235,15 +141,6 @@
       }
     }
   }
-  .mobileMenuWrapper {
-    .toggleIcon {
-      color: #5a5a5a;
-      margin-left: auto;
-      &:hover {
-        background-color: transparent;
-      }
-    }
-  }
   .navbarMobileMenu {
     flex-direction: column;
     .openstackSearchBarMobile {