@openstack_dev/gatsby-theme-marketing-oif-core 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/gatsby-config.js +0 -2
  2. package/gatsby-ssr.js +6 -31
  3. package/package.json +3 -1
  4. package/src/components/Layout.js +21 -14
  5. package/src/components/Navbar/index.js +336 -347
  6. package/src/components/Navbar/index.module.scss +1 -0
  7. package/src/content/site-settings/index.json +1 -1
  8. package/src/utils/createEmotionCache.js +5 -0
package/gatsby-config.js CHANGED
@@ -221,9 +221,7 @@ module.exports = {
221
221
  description,
222
222
  },
223
223
  plugins,
224
- /*
225
224
  flags: {
226
225
  DEV_SSR: true,
227
226
  },
228
- */
229
227
  };
package/gatsby-ssr.js CHANGED
@@ -1,50 +1,25 @@
1
- import * as ReactDOMServer from "react-dom/server";
2
1
  import { JSDOM } from "jsdom";
3
2
  import { XMLHttpRequest } from "xmlhttprequest";
4
- import { ThemeProvider } from "@mui/material/styles";
5
- import CssBaseline from "@mui/material/CssBaseline";
6
- import theme from "./src/theme";
7
3
  import ReduxWrapper from "./src/state/ReduxWrapper";
8
4
  import { HeadComponents } from "./src/components/head-components";
9
5
 
10
-
11
- export const onRenderBody = ({
12
- setHtmlAttributes,
13
- setHeadComponents,
14
- setPreBodyComponents,
15
- setPostBodyComponents,
16
- }, pluginOptions) => {
17
- if (process.env.NODE_ENV === `production`) {
6
+ export const onRenderBody = ({ setHeadComponents }) => {
7
+ if (process.env.NODE_ENV === "production") {
18
8
  setHeadComponents(HeadComponents);
19
9
  }
20
10
  };
21
11
 
22
- export const replaceRenderer = ({
23
- bodyComponent,
24
- setHeadComponents,
25
- replaceBodyHTMLString,
26
- }) => {
27
-
28
- const html = ReactDOMServer.renderToString(
29
- <ThemeProvider theme={theme}>
30
- <CssBaseline />
31
- {bodyComponent}
32
- </ThemeProvider>
33
- );
34
-
35
- replaceBodyHTMLString(html);
36
- };
37
-
38
12
  export const wrapRootElement = ReduxWrapper;
39
13
 
40
14
  // build enabler polyfills
41
15
  global.dom = new JSDOM("...");
42
- global.window = dom.window;
43
- global.document = dom.window.document;
16
+ global.window = global.dom.window;
17
+ global.document = global.dom.window.document;
44
18
  global.navigator = global.window.navigator;
45
19
  global.window.matchMedia = () => ({
46
20
  matches: false,
47
21
  addListener: () => {},
48
- removeListener: () => {}
22
+ removeListener: () => {},
49
23
  });
24
+
50
25
  global.XMLHttpRequest = XMLHttpRequest;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "description": "Base theme for Marketing Sites",
5
5
  "author": "smarcet",
6
6
  "keywords": [
@@ -22,6 +22,8 @@
22
22
  "**/*": "prettier --write --ignore-unknown"
23
23
  },
24
24
  "dependencies": {
25
+ "@emotion/cache": "^11.11.0",
26
+ "@emotion/react": "^11.11.4",
25
27
  "@fortawesome/fontawesome-free": "^6.5.2",
26
28
  "@mui/icons-material": "^5.15.15",
27
29
  "@mui/material": "^5.15.15",
package/src/components/Layout.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import PropTypes from "prop-types";
3
3
  import CssBaseline from "@mui/material/CssBaseline";
4
+ import { CacheProvider } from "@emotion/react";
4
5
  import { ThemeProvider } from "@mui/material/styles";
5
6
  import Footer from "./Footer";
6
7
  import SponsoredProjectsNav from "./SponsoredProjectsNav";
@@ -10,24 +11,30 @@ import Header from "./Header";
10
11
  import Navbar from "./Navbar";
11
12
  import theme from "../theme";
12
13
 
14
+ import createEmotionCache from "../utils/createEmotionCache";
15
+
16
+ const cache = createEmotionCache();
17
+
13
18
  function Layout({ children }) {
14
19
  return (
15
- <ThemeProvider theme={theme}>
16
- <CssBaseline />
17
- <div>
18
- <SponsoredProjectsNav />
19
- <Navbar />
20
+ <CacheProvider value={cache}>
21
+ <ThemeProvider theme={theme}>
22
+ <CssBaseline />
20
23
  <div>
21
- <Header />
22
- <AnnouncementBanner />
23
- <main id="content-wrapper">
24
- {children}
25
- <SubscribeForm />
26
- </main>
27
- <Footer />
24
+ <SponsoredProjectsNav />
25
+ <Navbar />
26
+ <div>
27
+ <Header />
28
+ <AnnouncementBanner />
29
+ <main id="content-wrapper">
30
+ {children}
31
+ <SubscribeForm />
32
+ </main>
33
+ <Footer />
34
+ </div>
28
35
  </div>
29
- </div>
30
- </ThemeProvider>
36
+ </ThemeProvider>
37
+ </CacheProvider>
31
38
  );
32
39
  }
33
40
 
package/src/components/Navbar/index.js CHANGED
@@ -15,6 +15,7 @@ import AddIcon from "@mui/icons-material/Add";
15
15
  import RemoveIcon from "@mui/icons-material/Remove";
16
16
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
17
17
  import Button from "@mui/material/Button";
18
+ import Link from "../Link";
18
19
 
19
20
  import navbarContent from "../../content/navbar/index.json";
20
21
 
@@ -28,11 +29,6 @@ function Navbar({ isLoggedUser, member }) {
28
29
  const [navbarMenu, setNavbarMenu] = React.useState(null);
29
30
  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
30
31
  const [isSearchBarOpen, setIsSearchBarOpen] = React.useState(false);
31
- const [domLoaded, setDomLoaded] = React.useState(false);
32
-
33
- React.useEffect(() => {
34
- setDomLoaded(true);
35
- }, []);
36
32
 
37
33
  const handleSetActiveMenu = (option) => {
38
34
  setNavbarMenu(navbarMenu === option ? null : option);
@@ -78,399 +74,392 @@ function Navbar({ isLoggedUser, member }) {
78
74
  };
79
75
 
80
76
  return (
81
- <>
82
- {domLoaded && (
83
- <nav role="navigation">
84
- <Script
85
- src={`${getEnvVariable(
86
- SEARCH_WIDGET_BASE_URL,
87
- )}/widget/embed.min.js`}
88
- onLoad={() => console.log("Script loaded")}
89
- />
90
- <AppBar
91
- position="static"
92
- className={styles.navbar}
93
- sx={{ backgroundColor: "#fff", boxShadow: "none" }}
94
- >
95
- <Container maxWidth="xl">
96
- <Toolbar disableGutters sx={{ flexWrap: "wrap" }}>
97
- <Box className={styles.navbarHeader}>
98
- <div className={styles.brandWrapper}>
99
- <a
100
- className={styles.navbarBrand}
101
- href="/"
102
- alt="Openstack logo"
103
- aria-label="Go to homepage"
104
- />
105
- </div>
106
- <Box
107
- className={styles.searchWrapper}
108
- sx={{ display: { xs: "none", md: "flex" } }}
109
- >
110
- <div
111
- role="button"
112
- tabIndex={0}
113
- onKeyDown={(event) => {
114
- if (event.key === "Enter" || event.key === " ") setIsSearchBarOpen(true);
115
- }}
116
- onClick={() => setIsSearchBarOpen(true)}
117
- className={styles.searchComponent}
118
- >
119
- <SearchIcon className={styles.searchIcon} />
120
- <span className={styles.headerSearchText}>Search</span>
121
- </div>
122
- <Box
123
- className={`openstack-search-bar ${styles.openstackSearchBar}`}
124
- style={{
125
- visibility: isSearchBarOpen ? "visible" : "hidden",
126
- opacity: isSearchBarOpen ? "1" : "0",
127
- }}
128
- data-baseurl={getEnvVariable(SEARCH_WIDGET_BASE_URL)}
129
- data-context="www-openstack"
130
- />
131
- </Box>
132
- </Box>
133
- {/* Mobile Menu */}
134
- <Box
135
- className={styles.mobileMenuWrapper}
136
- sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
77
+ <nav role="navigation">
78
+ <Script
79
+ src={`${getEnvVariable(SEARCH_WIDGET_BASE_URL)}/widget/embed.min.js`}
80
+ />
81
+ <AppBar
82
+ position="static"
83
+ className={styles.navbar}
84
+ sx={{ backgroundColor: "#fff", boxShadow: "none" }}
85
+ >
86
+ <Container maxWidth="xl">
87
+ <Toolbar disableGutters sx={{ flexWrap: "wrap" }}>
88
+ <Box className={styles.navbarHeader}>
89
+ <div className={styles.brandWrapper}>
90
+ <a
91
+ className={styles.navbarBrand}
92
+ href="/"
93
+ alt="Openstack logo"
94
+ aria-label="Go to homepage"
95
+ />
96
+ </div>
97
+ <Box
98
+ className={styles.searchWrapper}
99
+ sx={{ display: { xs: "none", md: "flex" } }}
100
+ >
101
+ <div
102
+ role="button"
103
+ tabIndex={0}
104
+ onKeyDown={(event) => {
105
+ if (event.key === "Enter" || event.key === " ") setIsSearchBarOpen(true);
106
+ }}
107
+ onClick={() => setIsSearchBarOpen(true)}
108
+ className={styles.searchComponent}
137
109
  >
138
- <IconButton
139
- className={styles.toggleIcon}
140
- size="large"
141
- aria-label="account of current user"
142
- aria-controls="menu-appbar"
143
- aria-haspopup="true"
144
- onClick={() => handleMobileMenuToggle()}
145
- color="inherit"
146
- >
147
- <MenuIcon />
148
- </IconButton>
149
- </Box>
150
- {/* Desktop Menu */}
110
+ <SearchIcon className={styles.searchIcon} />
111
+ <span className={styles.headerSearchText}>Search</span>
112
+ </div>
151
113
  <Box
152
- sx={{
153
- flexGrow: 1,
154
- display: {
155
- xs: "none",
156
- md: isSearchBarOpen ? "none" : "flex",
157
- },
158
- justifyContent: "flex-end",
114
+ className={`openstack-search-bar ${styles.openstackSearchBar}`}
115
+ style={{
116
+ visibility: isSearchBarOpen ? "visible" : "hidden",
117
+ opacity: isSearchBarOpen ? "1" : "0",
159
118
  }}
119
+ data-baseurl={getEnvVariable(SEARCH_WIDGET_BASE_URL)}
120
+ data-context="www-openstack"
121
+ />
122
+ </Box>
123
+ </Box>
124
+ {/* Mobile Menu */}
125
+ <Box
126
+ className={styles.mobileMenuWrapper}
127
+ sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
128
+ >
129
+ <IconButton
130
+ className={styles.toggleIcon}
131
+ size="large"
132
+ aria-label="account of current user"
133
+ aria-controls="menu-appbar"
134
+ aria-haspopup="true"
135
+ onClick={() => handleMobileMenuToggle()}
136
+ color="inherit"
137
+ >
138
+ <MenuIcon />
139
+ </IconButton>
140
+ </Box>
141
+ {/* Desktop Menu */}
142
+ <Box
143
+ sx={{
144
+ flexGrow: 1,
145
+ display: {
146
+ xs: "none",
147
+ md: isSearchBarOpen ? "none" : "flex",
148
+ },
149
+ justifyContent: "flex-end",
150
+ }}
151
+ >
152
+ {navbarContent.items.map(
153
+ (item) => item.display && (
154
+ <Link
155
+ className={styles.navbarOption}
156
+ key={item.title}
157
+ sx={{ my: 2, display: "block" }}
158
+ href={item.link}
160
159
  >
161
- {navbarContent.items.map(
162
- (item) => item.display && (
163
- <Button
164
- className={styles.navbarOption}
165
- key={item.title}
166
- sx={{ my: 2, display: "block" }}
167
- disableRipple
168
- onClick={() => handleNavigation(item.link)}
169
- >
170
- {item.items?.length > 0 ? (
171
- <>
172
- {item.title}
173
- <ArrowDropDownIcon
174
- className={styles.arrowDownIcon}
160
+ {item.items?.length > 0 ? (
161
+ <>
162
+ {item.title}
163
+ <ArrowDropDownIcon className={styles.arrowDownIcon} />
164
+ <Box className={styles.dropDownMenu}>
165
+ {item.items.map((subItem) => (!subItem.title && !subItem.link ? (
166
+ <div
167
+ className={styles.divider}
168
+ key={subItem.title}
175
169
  />
176
- <Box className={styles.dropDownMenu}>
177
- {item.items.map((subItem) => (!subItem.title && !subItem.link ? (
178
- <div className={styles.divider} />
179
- ) : (
180
- <Button
181
- className={styles.dropdownMenuOption}
182
- key={subItem.title}
183
- onClick={() => handleNavigation(subItem.link)}
184
- sx={{ display: "block" }}
185
- disableRipple
186
- >
187
- {subItem.title}
188
- </Button>
189
- )))}
190
- </Box>
191
- </>
192
- ) : (
193
- item.title
194
- )}
195
- </Button>
196
- ),
170
+ ) : (
171
+ <Button
172
+ className={styles.dropdownMenuOption}
173
+ key={subItem.title}
174
+ onClick={() => handleNavigation(subItem.link)}
175
+ sx={{ display: "block" }}
176
+ disableRipple
177
+ >
178
+ {subItem.title}
179
+ </Button>
180
+ )))}
181
+ </Box>
182
+ </>
183
+ ) : (
184
+ item.title
197
185
  )}
198
- </Box>
199
- {isLoggedUser ? (
200
- <Box
201
- maxWidth="15%"
202
- sx={{
203
- display: {
204
- xs: "none",
205
- md: isSearchBarOpen ? "none" : "flex",
206
- },
207
- justifyContent: "flex-end",
208
- marginLeft: "auto",
209
- }}
210
- >
186
+ </Link>
187
+ ),
188
+ )}
189
+ </Box>
190
+ {isLoggedUser ? (
191
+ <Box
192
+ maxWidth="15%"
193
+ sx={{
194
+ display: {
195
+ xs: "none",
196
+ md: isSearchBarOpen ? "none" : "flex",
197
+ },
198
+ justifyContent: "flex-end",
199
+ marginLeft: "auto",
200
+ }}
201
+ >
202
+ <Box
203
+ className={`${styles.navbarOption}`}
204
+ sx={{ my: 2, display: "block" }}
205
+ >
206
+ My Account
207
+ <ArrowDropDownIcon className={styles.arrowDownIcon} />
208
+ <Box className={styles.dropDownMenu}>
211
209
  <Button
212
- className={`${styles.navbarOption}`}
213
- sx={{ my: 2, display: "block" }}
210
+ className={styles.dropdownMenuOption}
211
+ onClick={() => handleNavigation("/profile/")}
212
+ sx={{ display: "block" }}
214
213
  disableRipple
215
214
  >
216
- My Account
217
- <ArrowDropDownIcon className={styles.arrowDownIcon} />
218
- <Box className={styles.dropDownMenu}>
219
- <Button
220
- className={styles.dropdownMenuOption}
221
- onClick={() => handleNavigation("/profile/")}
222
- sx={{ display: "block" }}
223
- disableRipple
224
- >
225
- Edit Profile
226
- </Button>
227
- <Button
228
- className={styles.dropdownMenuOption}
229
- onClick={() => handleNavigation(
230
- `/community/members/profile/${
231
- member.id
232
- }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`,
233
- )}
234
- sx={{ display: "block" }}
235
- disableRipple
236
- >
237
- View Public Profile
238
- </Button>
239
- <div className={styles.divider} />
240
- <Button
241
- className={styles.dropdownMenuOption}
242
- sx={{ display: "block" }}
243
- onClick={onClickLogout}
244
- disableRipple
245
- >
246
- Log out
247
- </Button>
248
- </Box>
215
+ Edit Profile
249
216
  </Button>
250
- </Box>
251
- ) : (
252
- <Box
253
- maxWidth="15%"
254
- sx={{
255
- display: {
256
- xs: "none",
257
- md: isSearchBarOpen ? "none" : "flex",
258
- },
259
- justifyContent: "flex-end",
260
- marginLeft: "auto",
261
- }}
262
- >
263
217
  <Button
264
- className={`${styles.navbarOption} ${styles.join}`}
265
- sx={{ my: 2, display: "block" }}
218
+ className={styles.dropdownMenuOption}
219
+ onClick={() => handleNavigation(
220
+ `/community/members/profile/${
221
+ member.id
222
+ }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`,
223
+ )}
224
+ sx={{ display: "block" }}
266
225
  disableRipple
267
226
  >
268
- Join
269
- <ArrowDropDownIcon className={styles.arrowDownIcon} />
270
- <Box className={styles.dropDownMenu}>
271
- <Button
272
- className={styles.dropdownMenuOption}
273
- onClick={() => handleNavigation("https://openinfra.dev/join")}
274
- sx={{ display: "block" }}
275
- disableRipple
276
- >
277
- Sign up for Foundation Membership
278
- </Button>
279
- <Button
280
- className={styles.dropdownMenuOption}
281
- onClick={() => handleNavigation("https://openinfra.dev/join")}
282
- sx={{ display: "block" }}
283
- disableRipple
284
- >
285
- Sponsor the Foundation
286
- </Button>
287
- <Button
288
- className={styles.dropdownMenuOption}
289
- onClick={() => handleNavigation("https://openinfra.dev")}
290
- sx={{ display: "block" }}
291
- disableRipple
292
- >
293
- More about the Foundation
294
- </Button>
295
- </Box>
227
+ View Public Profile
296
228
  </Button>
229
+ <div className={styles.divider} />
297
230
  <Button
298
- className={`${styles.navbarOption} ${styles.login}`}
299
- onClick={() => doLogin("/")}
300
- sx={{ my: 2, display: "block" }}
231
+ className={styles.dropdownMenuOption}
232
+ sx={{ display: "block" }}
233
+ onClick={onClickLogout}
301
234
  disableRipple
302
235
  >
303
- Log in
236
+ Log out
304
237
  </Button>
305
238
  </Box>
306
- )}
307
- </Toolbar>
239
+ </Box>
240
+ </Box>
241
+ ) : (
308
242
  <Box
309
- className={`${styles.openstackSearchBarMobile} openstack-search-bar ossw-mobile`}
243
+ maxWidth="15%"
310
244
  sx={{
311
- visibility: {
312
- xs: isMobileMenuOpen ? "visible" : "hidden",
313
- md: "hidden",
245
+ display: {
246
+ xs: "none",
247
+ md: isSearchBarOpen ? "none" : "flex",
314
248
  },
315
- opacity: { xs: isMobileMenuOpen ? "1" : "0", md: "0" },
316
- height: { xs: isMobileMenuOpen ? "auto" : 0, md: 0 },
317
- color: "#8a959e",
249
+ justifyContent: "flex-end",
250
+ marginLeft: "auto",
318
251
  }}
319
- data-baseurl={getEnvVariable(SEARCH_WIDGET_BASE_URL)}
320
- data-context="www-openstack"
321
- />
322
- {isMobileMenuOpen && (
252
+ >
323
253
  <Box
324
- className={styles.navbarMobileMenu}
325
- sx={{
326
- display: { xs: "flex", md: "none" },
327
- }}
254
+ className={`${styles.navbarOption} ${styles.join}`}
255
+ sx={{ my: 2, display: "block" }}
328
256
  >
329
- {navbarContent.items.map(
330
- (item) => item.display && (
331
- <>
257
+ Join
258
+ <ArrowDropDownIcon className={styles.arrowDownIcon} />
259
+ <Box className={styles.dropDownMenu}>
260
+ <Button
261
+ className={styles.dropdownMenuOption}
262
+ onClick={() => handleNavigation("https://openinfra.dev/join")}
263
+ sx={{ display: "block" }}
264
+ disableRipple
265
+ >
266
+ Sign up for Foundation Membership
267
+ </Button>
268
+ <Button
269
+ className={styles.dropdownMenuOption}
270
+ onClick={() => handleNavigation("https://openinfra.dev/join")}
271
+ sx={{ display: "block" }}
272
+ disableRipple
273
+ >
274
+ Sponsor the Foundation
275
+ </Button>
276
+ <Button
277
+ className={styles.dropdownMenuOption}
278
+ onClick={() => handleNavigation("https://openinfra.dev")}
279
+ sx={{ display: "block" }}
280
+ disableRipple
281
+ >
282
+ More about the Foundation
283
+ </Button>
284
+ </Box>
285
+ </Box>
286
+ <Button
287
+ className={`${styles.navbarOption} ${styles.login}`}
288
+ onClick={() => doLogin("/")}
289
+ sx={{ my: 2, display: "block" }}
290
+ disableRipple
291
+ >
292
+ Log in
293
+ </Button>
294
+ </Box>
295
+ )}
296
+ </Toolbar>
297
+ <Box
298
+ className={`${styles.openstackSearchBarMobile} openstack-search-bar ossw-mobile`}
299
+ sx={{
300
+ visibility: {
301
+ xs: isMobileMenuOpen ? "visible" : "hidden",
302
+ md: "hidden",
303
+ },
304
+ opacity: { xs: isMobileMenuOpen ? "1" : "0", md: "0" },
305
+ height: { xs: isMobileMenuOpen ? "auto" : 0, md: 0 },
306
+ color: "#8a959e",
307
+ }}
308
+ data-baseurl={getEnvVariable(SEARCH_WIDGET_BASE_URL)}
309
+ data-context="www-openstack"
310
+ />
311
+ {isMobileMenuOpen && (
312
+ <Box
313
+ className={styles.navbarMobileMenu}
314
+ sx={{
315
+ display: { xs: "flex", md: "none" },
316
+ }}
317
+ >
318
+ {navbarContent.items.map(
319
+ (item) => item.display && (
320
+ <>
321
+ <Button
322
+ disableRipple
323
+ className={styles.mobileOption}
324
+ key={`${item.title}-mobile`}
325
+ onClick={() => handleSetActiveMenu(item.title)}
326
+ >
327
+ {item.title}
328
+ {item.items?.length > 0
329
+ && (item.title === navbarMenu ? (
330
+ <RemoveIcon aria-hidden="true" />
331
+ ) : (
332
+ <AddIcon aria-hidden="true" />
333
+ ))}
334
+ </Button>
335
+ {item.items?.length > 0 && item.title === navbarMenu && (
336
+ <Box className={styles.mobileDropdownMenu}>
337
+ {item.items.map((subItem) => (!subItem.title && !subItem.link ? (
338
+ <div
339
+ className={styles.divider}
340
+ key={subItem.title}
341
+ />
342
+ ) : (
332
343
  <Button
344
+ className={styles.mobileDropdownOption}
345
+ key={`${subItem.title}-mobile`}
346
+ onClick={() => handleNavigation(subItem.link)}
347
+ sx={{ display: "block" }}
333
348
  disableRipple
334
- className={styles.mobileOption}
335
- key={`${item.title}-mobile`}
336
- onClick={() => handleSetActiveMenu(item.title)}
337
349
  >
338
- {item.title}
339
- {item.items?.length > 0
340
- && (item.title === navbarMenu ? (
341
- <RemoveIcon aria-hidden="true" />
342
- ) : (
343
- <AddIcon aria-hidden="true" />
344
- ))}
350
+ {subItem.title}
345
351
  </Button>
346
- {item.items?.length > 0
347
- && item.title === navbarMenu && (
348
- <Box className={styles.mobileDropdownMenu}>
349
- {item.items.map((subItem) => (!subItem.title && !subItem.link ? (
350
- <div className={styles.divider} />
351
- ) : (
352
- <Button
353
- className={styles.mobileDropdownOption}
354
- key={subItem.title}
355
- onClick={() => handleNavigation(subItem.link)}
356
- sx={{ display: "block" }}
357
- disableRipple
358
- >
359
- {subItem.title}
360
- </Button>
361
- )))}
362
- </Box>
363
- )}
364
- </>
365
- ),
352
+ )))}
353
+ </Box>
366
354
  )}
367
- {isLoggedUser ? (
368
- <>
355
+ </>
356
+ ),
357
+ )}
358
+ {isLoggedUser ? (
359
+ <>
360
+ <Button
361
+ className={styles.mobileOption}
362
+ onClick={() => handleSetActiveMenu("My Account")}
363
+ disableRipple
364
+ >
365
+ My Account
366
+ {navbarMenu === "My Account" ? (
367
+ <RemoveIcon aria-hidden="true" />
368
+ ) : (
369
+ <AddIcon aria-hidden="true" />
370
+ )}
371
+ </Button>
372
+ {navbarMenu === "My Account" && (
373
+ <Box className={styles.mobileDropdownMenu}>
369
374
  <Button
370
- className={styles.mobileOption}
371
- onClick={() => handleSetActiveMenu("My Account")}
375
+ className={styles.mobileDropdownOption}
376
+ onClick={() => handleNavigation("/profile/")}
377
+ sx={{ display: "block" }}
372
378
  disableRipple
373
379
  >
374
- My Account
375
- {navbarMenu === "My Account" ? (
376
- <RemoveIcon aria-hidden="true" />
377
- ) : (
378
- <AddIcon aria-hidden="true" />
379
- )}
380
+ Edit Profile
380
381
  </Button>
381
- {navbarMenu === "My Account" && (
382
- <Box className={styles.mobileDropdownMenu}>
383
- <Button
384
- className={styles.mobileDropdownOption}
385
- onClick={() => handleNavigation("/profile/")}
386
- sx={{ display: "block" }}
387
- disableRipple
388
- >
389
- Edit Profile
390
- </Button>
391
- <Button
392
- className={styles.mobileDropdownOption}
393
- onClick={() => handleNavigation(
394
- `/community/members/profile/${
395
- member.id
396
- }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`,
397
- )}
398
- sx={{ display: "block" }}
399
- disableRipple
400
- >
401
- View Public Profile
402
- </Button>
403
- <div className={styles.divider} />
404
- <Button
405
- className={styles.mobileDropdownOption}
406
- sx={{ display: "block" }}
407
- onClick={onClickLogout}
408
- disableRipple
409
- >
410
- Log out
411
- </Button>
412
- </Box>
413
- )}
414
- </>
415
- ) : (
416
- <Box>
417
382
  <Button
418
- className={`${styles.navbarOption} ${styles.join}`}
419
- sx={{ my: 2, display: "block" }}
383
+ className={styles.mobileDropdownOption}
384
+ onClick={() => handleNavigation(
385
+ `/community/members/profile/${
386
+ member.id
387
+ }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`,
388
+ )}
389
+ sx={{ display: "block" }}
420
390
  disableRipple
421
391
  >
422
- Join
423
- <ArrowDropDownIcon className={styles.arrowDownIcon} />
424
- <Box className={styles.dropDownMenu}>
425
- <Button
426
- className={styles.dropdownMenuOption}
427
- onClick={() => handleNavigation("https://openinfra.dev/join")}
428
- sx={{ display: "block" }}
429
- disableRipple
430
- >
431
- Sign up for Foundation Membership
432
- </Button>
433
- <Button
434
- className={styles.dropdownMenuOption}
435
- onClick={() => handleNavigation("https://openinfra.dev/join")}
436
- sx={{ display: "block" }}
437
- disableRipple
438
- >
439
- Sponsor the Foundation
440
- </Button>
441
- <Button
442
- className={styles.dropdownMenuOption}
443
- onClick={() => handleNavigation("https://openinfra.dev")}
444
- sx={{ display: "block" }}
445
- disableRipple
446
- >
447
- More about the Foundation
448
- </Button>
449
- </Box>
392
+ View Public Profile
450
393
  </Button>
394
+ <div className={styles.divider} />
451
395
  <Button
452
- className={`${styles.navbarOption} ${styles.login}`}
453
- onClick={() => doLogin("/")}
454
- sx={{ my: 2, display: "block" }}
396
+ className={styles.mobileDropdownOption}
397
+ sx={{ display: "block" }}
398
+ onClick={onClickLogout}
455
399
  disableRipple
456
400
  >
457
- Log in
401
+ Log out
458
402
  </Button>
459
403
  </Box>
460
404
  )}
405
+ </>
406
+ ) : (
407
+ <Box>
408
+ <Box
409
+ className={`${styles.navbarOption} ${styles.join}`}
410
+ sx={{ my: 2, display: "block" }}
411
+ >
412
+ Join
413
+ <ArrowDropDownIcon className={styles.arrowDownIcon} />
414
+ <Box className={styles.dropDownMenu}>
415
+ <Button
416
+ className={styles.dropdownMenuOption}
417
+ onClick={() => handleNavigation("https://openinfra.dev/join")}
418
+ sx={{ display: "block" }}
419
+ disableRipple
420
+ >
421
+ Sign up for Foundation Membership
422
+ </Button>
423
+ <Button
424
+ className={styles.dropdownMenuOption}
425
+ onClick={() => handleNavigation("https://openinfra.dev/join")}
426
+ sx={{ display: "block" }}
427
+ disableRipple
428
+ >
429
+ Sponsor the Foundation
430
+ </Button>
431
+ <Button
432
+ className={styles.dropdownMenuOption}
433
+ onClick={() => handleNavigation("https://openinfra.dev")}
434
+ sx={{ display: "block" }}
435
+ disableRipple
436
+ >
437
+ More about the Foundation
438
+ </Button>
439
+ </Box>
440
+ </Box>
441
+ <Button
442
+ className={`${styles.navbarOption} ${styles.login}`}
443
+ onClick={() => doLogin("/")}
444
+ sx={{ my: 2, display: "block" }}
445
+ disableRipple
446
+ >
447
+ Log in
448
+ </Button>
461
449
  </Box>
462
450
  )}
463
- </Container>
464
- </AppBar>
465
- </nav>
466
- )}
467
- </>
451
+ </Box>
452
+ )}
453
+ </Container>
454
+ </AppBar>
455
+ </nav>
468
456
  );
469
457
  }
470
458
 
471
459
  Navbar.propTypes = {
472
460
  isLoggedUser: PropTypes.bool.isRequired,
473
- member: PropTypes.object.isRequired,
461
+ member: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])])
462
+ .isRequired,
474
463
  };
475
464
 
476
465
  const mapStateToProps = ({ loggedUserState }) => ({
package/src/components/Navbar/index.module.scss CHANGED
@@ -118,6 +118,7 @@
118
118
  white-space: nowrap;
119
119
  background-color: transparent;
120
120
  margin: 0;
121
+ align-items: center;
121
122
  &:hover {
122
123
  color: #333;
123
124
  background-color: transparent;
package/src/content/site-settings/index.json CHANGED
@@ -1 +1 @@
1
- { "staticJsonFilesBuildTime": [], "lastBuild": 1713872964380 }
1
+ { "staticJsonFilesBuildTime": [], "lastBuild": 1713949648791 }
package/src/utils/createEmotionCache.js ADDED
@@ -0,0 +1,5 @@
1
+ import createCache from "@emotion/cache";
2
+
3
+ const createEmotionCache = (options) => createCache(options ?? { key: "css" });
4
+
5
+ export default createEmotionCache;