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

package/gatsby-config.js

@@ -41,12 +41,12 @@ const manifestPlugin = faviconAsset
 
 const plugins = [
   {
-    resolve: "gatsby-plugin-mui-theme-provider",
+    resolve: "@openstack_dev/gatsby-plugin-mui-theme-provider",
     options: {
       themePath: `${__dirname}/src/theme.js`,
     },
   },
-  "gatsby-plugin-emotion-cache-provider",
+  "@openstack_dev/gatsby-plugin-emotion-cache-provider",
   ...manifestPlugin,
   {
     resolve: "gatsby-alias-imports",

package/netlify.toml

@@ -3,256 +3,256 @@
       # Define which paths this specific [[headers]] block will cover.
       for = "/*"
         [headers.values]
-          Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI"
+          Authorization = "Basic undefined"
 
     [[redirects]]
       from = "/marketplace/*"
-      to = "https://devbranch.openstack.org/marketplace/:splat"
+      to = "undefined/marketplace/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/themes/*"
-      to = "https://devbranch.openstack.org/themes/:splat"
+      to = "undefined/themes/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/navbar/*"
-      to = "https://devbranch.openstack.org/navbar/:splat"
+      to = "undefined/navbar/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/framework/*"
-      to = "https://devbranch.openstack.org/framework/:splat"
+      to = "undefined/framework/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/googlemaps/*"
-      to = "https://devbranch.openstack.org/googlemaps/:splat"
+      to = "undefined/googlemaps/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/node_modules/*"
-      to = "https://devbranch.openstack.org/node_modules/:splat"
+      to = "undefined/node_modules/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/maps_images/*"
-      to = "https://devbranch.openstack.org/maps_images/:splat"
+      to = "undefined/maps_images/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/use-cases/*"
-      to = "https://devbranch.openstack.org/use-cases/:splat"
+      to = "undefined/use-cases/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/software/*"
-      to = "https://devbranch.openstack.org/software/:splat"
+      to = "undefined/software/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/openstack-map/*"
-      to = "https://devbranch.openstack.org/openstack-map/:splat"
+      to = "undefined/openstack-map/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/surveys/*"
-      to = "https://devbranch.openstack.org/surveys/:splat"
+      to = "undefined/surveys/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/user-survey/*"
-      to = "https://devbranch.openstack.org/user-survey/:splat"
+      to = "undefined/user-survey/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/blog/*"
-      to = "https://devbranch.openstack.org/blog/:splat"
+      to = "undefined/blog/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/marketing/*"
-      to = "https://devbranch.openstack.org/marketing/:splat"
+      to = "undefined/marketing/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/summit/*"
-      to = "https://devbranch.openstack.org/summit/:splat"
+      to = "undefined/summit/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/brand/*"
-      to = "https://devbranch.openstack.org/brand/:splat"
+      to = "undefined/brand/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/community/*"
-      to = "https://devbranch.openstack.org/community/:splat"
+      to = "undefined/community/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/events/*"
-      to = "https://devbranch.openstack.org/events/:splat"
+      to = "undefined/events/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/ptg/*"
-      to = "https://devbranch.openstack.org/ptg/:splat"
+      to = "undefined/ptg/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/videos/*"
-      to = "https://devbranch.openstack.org/videos/:splat"
+      to = "undefined/videos/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/summit-video-app/*"
-      to = "https://devbranch.openstack.org/summit-video-app/:splat"
+      to = "undefined/summit-video-app/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/news/*"
-      to = "https://devbranch.openstack.org/summit-video-app/:splat"
+      to = "undefined/summit-video-app/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/favicon/*"
-      to = "https://devbranch.openstack.org/favicon/:splat"
+      to = "undefined/favicon/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/errors_pages/*"
-      to = "https://devbranch.openstack.org/errors_pages/:splat"
+      to = "undefined/errors_pages/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/speaker_bureau/*"
-      to = "https://devbranch.openstack.org/speaker_bureau/:splat"
+      to = "undefined/speaker_bureau/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/coa/*"
-      to = "https://devbranch.openstack.org/coa/:splat"
+      to = "undefined/coa/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/learn/*"
-      to = "https://devbranch.openstack.org/learn/:splat"
+      to = "undefined/learn/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/Security/*"
-      to = "https://devbranch.openstack.org/Security/:splat"
+      to = "undefined/Security/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/OpenStackIdAuthenticator/*"
-      to = "https://devbranch.openstack.org/OpenStackIdAuthenticator/:splat"
+      to = "undefined/OpenStackIdAuthenticator/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/profile/*"
-      to = "https://devbranch.openstack.org/profile/:splat"
+      to = "undefined/profile/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/userprofile/*"
-      to = "https://devbranch.openstack.org/userprofile/:splat"
+      to = "undefined/userprofile/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/registration/*"
-      to = "https://devbranch.openstack.org/registration/:splat"
+      to = "undefined/registration/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/legal/*"
-      to = "https://devbranch.openstack.org/legal/:splat"
+      to = "undefined/legal/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/ICLA/*"
-      to = "https://devbranch.openstack.org/ICLA/:splat"
+      to = "undefined/ICLA/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/marketplaceadmin/*"
-      to = "https://devbranch.openstack.org/marketplaceadmin/:splat"
+      to = "undefined/marketplaceadmin/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}
 
     [[redirects]]
       from = "/api/*"
-      to = "https://devbranch.openstack.org/api/:splat"
+      to = "undefined/api/:splat"
       status = 200
       force = true
-      headers = {Authorization = "Basic b3BlbnN0YWNrOlF1YWNrZXI", X-From = "netlify", X-Forwarded-Host = "main--oif-marketing-site-dev.netlify.app"}
+      headers = {Authorization = "Basic undefined", X-From = "netlify", X-Forwarded-Host = "undefined"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [
@@ -15,7 +15,8 @@
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
     "prepare": "husky",
     "lint": "eslint src",
-    "precommit": "npx lint-staged --diff=origin/main --verbose"
+    "precommit": "npx lint-staged --diff=origin/main --verbose",
+    "publish": "yarn publish --access public"
   },
   "lint-staged": {
     "*.{js,jsx}": "eslint --fix",
@@ -32,6 +33,8 @@
     "@mui/material": "^5.15.15",
     "@ncwidgets/file-relation": "^0.8.0",
     "@ncwidgets/id": "^0.8.1",
+    "@openstack_dev/gatsby-plugin-emotion-cache-provider": "^1.0.0",
+    "@openstack_dev/gatsby-plugin-mui-theme-provider": "^1.0.0",
     "@react-pdf/renderer": "^3.1.12",
     "@react-spring/web": "^9.4.3",
     "@sentry/browser": "^7.39.0",

package/plugins/gatsby-plugin-emotion-cache-provider/package.json

@@ -1,3 +1,7 @@
 {
-  "name": "gatsby-plugin-emotion-cache-provider"
+  "name": "@openstack_dev/gatsby-plugin-emotion-cache-provider",
+  "version": "1.0.0",
+  "scripts": {
+    "publish": "yarn publish --access public"
+  }
 }

package/plugins/gatsby-plugin-mui-theme-provider/package.json

@@ -1,3 +1,7 @@
 {
-  "name": "gatsby-plugin-mui-theme-provider"
+  "name": "@openstack_dev/gatsby-plugin-mui-theme-provider",
+  "version": "1.0.0",
+  "scripts": {
+    "publish": "yarn publish --access public"
+  }
 }

package/src/components/Navbar/AuthUserSubNavBar/index.js

@@ -0,0 +1,145 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { navigate } from "gatsby";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+
+import styles from "../index.module.scss";
+
+function AuthUserSubNavBar({
+  member,
+  isMobile,
+  navbarMenu,
+  setActiveMenu,
+  isSearchBarOpen,
+  handleNavigation,
+}) {
+  const onClickLogout = () => {
+    navigate("/auth/logout", {
+      state: {
+        backUrl: window.location.pathname,
+      },
+    });
+  };
+
+  return isMobile ? (
+    <>
+      <Button
+        className={styles.mobileOption}
+        onClick={() => setActiveMenu("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
+      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>
+  );
+}
+
+AuthUserSubNavBar.propTypes = {
+  member: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]),
+  isMobile: PropTypes.bool.isRequired,
+  navbarMenu: PropTypes.string.isRequired,
+  setActiveMenu: PropTypes.func,
+  isSearchBarOpen: PropTypes.bool,
+  handleNavigation: PropTypes.func.isRequired,
+};
+
+AuthUserSubNavBar.defaultProps = {
+  member: null,
+  isSearchBarOpen: false,
+  setActiveMenu: (option) => console.log(option),
+};
+
+export default AuthUserSubNavBar;

package/src/components/Navbar/LoginButton/index.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { doLogin } from "openstack-uicore-foundation/lib/security/methods";
+import Button from "@mui/material/Button";
+
+import styles from "../index.module.scss";
+
+function LoginButton({ backUrl }) {
+  return (
+    <Button
+      className={`${styles.navbarOption} ${styles.login}`}
+      onClick={() => doLogin(backUrl)}
+      sx={{ my: 2, display: "block" }}
+      disableRipple
+    >
+      Log in
+    </Button>
+  );
+}
+
+LoginButton.propTypes = {
+  backUrl: PropTypes.string,
+};
+
+LoginButton.defaultProps = {
+  backUrl: "/",
+};
+
+export default LoginButton;

package/src/components/Navbar/MobileMenu/index.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+
+import styles from "./index.module.scss";
+
+function MobileMenu({ handleMobileMenuToggle }) {
+  return (
+    <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>
+  );
+}
+
+MobileMenu.propTypes = {
+  handleMobileMenuToggle: PropTypes.func.isRequired,
+};
+
+export default MobileMenu;

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

@@ -0,0 +1,9 @@
+.mobileMenuWrapper {
+  .toggleIcon {
+    color: #5a5a5a;
+    margin-left: auto;
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}