From 8dd35eac1b778c2d48a61600e6ec917b6cccb4d6 Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 16 Sep 2026 15:59:48 -0500 Subject: [PATCH 1/9] refactor: Move side navigation bar into a hamburger menu button --- src/app.js | 45 ++++++++++++++++--- src/components/menu/index.js | 79 ++++++++++++---------------------- src/i18n/en.json | 1 + src/layouts/primary-layout.js | 16 ++++++- src/routes/authorized-route.js | 10 ++++- src/styles/landing.css | 17 -------- 6 files changed, 92 insertions(+), 76 deletions(-) diff --git a/src/app.js b/src/app.js index 612f8745b..454f9cbe6 100644 --- a/src/app.js +++ b/src/app.js @@ -32,6 +32,11 @@ import IdTokenVerifier from "idtoken-verifier"; import T from "i18n-react"; import { LocalizationProvider } from "@mui/x-date-pickers"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import Typography from "@mui/material/Typography"; +import IconButton from "@mui/material/IconButton"; +import MenuIcon from "@mui/icons-material/Menu"; // eslint-disable-next-line import * as Sentry from "@sentry/react"; import exclusiveSections from "./exclusive-sections.yml"; @@ -146,6 +151,8 @@ class App extends React.PureComponent { constructor(props) { super(props); props.resetLoading(); + this.state = { menuOpen: false }; + this.toggleMenu = this.toggleMenu.bind(this); } onClickLogin() { @@ -156,6 +163,10 @@ class App extends React.PureComponent { this.props.getTimezones(); } + toggleMenu() { + this.setState((prevState) => ({ menuOpen: !prevState.menuOpen })); + } + render() { const { isLoggedUser, @@ -165,6 +176,7 @@ class App extends React.PureComponent { backUrl, loading } = this.props; + const { menuOpen } = this.state; const idToken = getIdToken(); @@ -188,23 +200,46 @@ class App extends React.PureComponent {
-
-
- {T.translate("landing.os_summit_admin")} + + + {isLoggedUser && ( + + + + )} + + {T.translate("landing.os_summit_admin")} + -
-
+ + { - const [menuOpen, setMenuOpen] = useState(false); +const Menu = ({ currentSummit, member, history, menuOpen, toggleMenu }) => { const memberObj = new Member(member); const globalItems = getGlobalItems(); const summitItems = currentSummit ? getSummitItems(currentSummit.id) : []; - const closeMenu = () => setMenuOpen(false); + const closeMenu = () => { + if (menuOpen) toggleMenu(); + }; const onMenuItemClick = (ev, url) => { ev.preventDefault(); @@ -73,52 +72,30 @@ const Menu = ({ currentSummit, member, history }) => { }; return ( - <> - {menuOpen && ( - - )} - - - (menuOpen ? closeMenu() : setMenuOpen(true))} - > - - - - setMenuOpen(true)} - onMouseLeave={() => setMenuOpen(false)} - > - - - + + + + {globalItems.map(drawMenuItem)} + - - - {globalItems.map(drawMenuItem)} + {!!currentSummit?.id && ( + <> + + + {summitItems.map(drawMenuItem)} - - {!!currentSummit?.id && ( - <> - - - {summitItems.map(drawMenuItem)} - - - )} - - + + )} - + ); }; diff --git a/src/i18n/en.json b/src/i18n/en.json index f67120702..c17618841 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -139,6 +139,7 @@ "not_logged_in": "You are not logged in. Please log in to continue:" }, "menu": { + "toggle_navigation": "Toggle navigation menu", "general": "General", "directory": "Directory", "dashboard": "Dashboard", diff --git a/src/layouts/primary-layout.js b/src/layouts/primary-layout.js index cddc1f409..f4f8d5897 100644 --- a/src/layouts/primary-layout.js +++ b/src/layouts/primary-layout.js @@ -42,7 +42,14 @@ const AddOnTypesListPage = React.lazy(() => import("../pages/sponsors-global/add-on-types/add-on-types-list-page") ); -const PrimaryLayout = ({ match, currentSummit, location, member }) => { +const PrimaryLayout = ({ + match, + currentSummit, + location, + member, + menuOpen, + toggleMenu +}) => { let extraClass = "container"; // full width pages @@ -55,7 +62,12 @@ const PrimaryLayout = ({ match, currentSummit, location, member }) => { return (
- +
; + return ( + + ); } else { return ( Date: Wed, 16 Sep 2026 16:06:52 -0500 Subject: [PATCH 2/9] chore: Delete unused CSS module for old navbar --- src/components/menu/menu.module.less | 85 ---------------------------- 1 file changed, 85 deletions(-) delete mode 100644 src/components/menu/menu.module.less diff --git a/src/components/menu/menu.module.less b/src/components/menu/menu.module.less deleted file mode 100644 index 5664cc2d9..000000000 --- a/src/components/menu/menu.module.less +++ /dev/null @@ -1,85 +0,0 @@ -.wrapper { - top: 0; - left: 0; - position: fixed; - height: 100vh; - z-index: 99999; - - &.opened { - .burgerButton { - display: none; - } - - .expandButton { - display: none; - } - - .menuWrapper { - width: 260px; - } - - .menuItemsWrapper { - visibility: visible; - } - } - - &.closed { - overflow-y: hidden; - .burgerButton { - display: block; - pointer-events: auto; - - @media (min-width: 768px) { - display: none; - } - } - - .menuWrapper { - width: 0; - - .expandButton { - display: none; - } - - @media (min-width: 768px) { - width: 40px; - - .menuItemsWrapper { - visibility: hidden; - } - - .expandButton { - display: flex; - } - } - } - @media (max-width: 768px) { - pointer-events: none; - } - } - - .menuWrapper { - background-color: #ffffff; - border-right: 1px solid #e0e0e0; - cursor: pointer; - transition: width 200ms linear; - height: 100%; - - .expandButton { - justify-content: center; - align-items: center; - height: 100%; - } - - .menuItemsWrapper { - padding-bottom: 20px; - transition: visibility 200ms linear 200ms; - overflow-y: auto; - height: 100%; - } - } - - .burgerButton { - padding: 5px 0 0 5px; - } -} From 770ab8eccf1bf05c45d93531c3a4999a64e6fc4b Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 16 Sep 2026 16:07:53 -0500 Subject: [PATCH 3/9] refactor: Merge profile and sign out button into one button --- src/components/auth-button.js | 87 +++++++++++++---------------------- src/styles/landing.css | 25 ---------- 2 files changed, 33 insertions(+), 79 deletions(-) diff --git a/src/components/auth-button.js b/src/components/auth-button.js index 390450338..aa5e2ee8b 100644 --- a/src/components/auth-button.js +++ b/src/components/auth-button.js @@ -13,61 +13,40 @@ import React from "react"; import T from "i18n-react/dist/i18n-react"; +import Avatar from "@mui/material/Avatar"; +import Button from "@mui/material/Button"; -export default class AuthButton extends React.Component { - constructor(props) { - super(props); - - this.state = { - showLogOut: false - }; - - this.toggleLogOut = this.toggleLogOut.bind(this); +const AuthButton = ({ isLoggedUser, doLogin, initLogOut, picture }) => { + if (isLoggedUser) { + return ( + + ); } - toggleLogOut(ev) { - this.setState({ showLogOut: !this.state.showLogOut }); - } + return ( +
+ {T.translate("landing.not_logged_in")} +
+
+ +
+ ); +}; - render() { - let { isLoggedUser, doLogin, initLogOut, picture } = this.props; - let { showLogOut } = this.state; - - if (isLoggedUser) { - return ( -
-
- {showLogOut && ( - - )} -
- ); - } else { - return ( -
- {T.translate("landing.not_logged_in")} -
-
- -
- ); - } - } -} +export default AuthButton; diff --git a/src/styles/landing.css b/src/styles/landing.css index 0a1152ea4..ba75b21e7 100644 --- a/src/styles/landing.css +++ b/src/styles/landing.css @@ -5,15 +5,6 @@ body { #root { } -.user-menu { - position: absolute; - top: 7px; - right: 30px; - height: 40px; - width: 140px; - cursor: pointer; -} - .login { margin-top: 60px; padding: 30px 0 50px 0; @@ -21,22 +12,6 @@ body { font-size: 22px; } -.logout { - position: absolute; - top: 4px; - right: 55px; -} - -.profile-pic { - height: 40px; - width: 40px; - border: 1px solid #afafaf; - border-radius: 20px; - overflow: hidden; - float: right; - background-size: cover; -} - .primary-layout { margin: 30px 0; } From 1c3bf5a4e926c0335ae1dfad47aa7f8056b35de2 Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 16 Sep 2026 16:55:25 -0500 Subject: [PATCH 4/9] refactor: Move breadcrumb to top nav bar --- src/app.js | 20 +++++- src/layouts/primary-layout.js | 118 ++++++++++++++-------------------- src/styles/general.less | 17 +---- 3 files changed, 67 insertions(+), 88 deletions(-) diff --git a/src/app.js b/src/app.js index 454f9cbe6..82f747da2 100644 --- a/src/app.js +++ b/src/app.js @@ -30,6 +30,7 @@ import { } from "openstack-uicore-foundation/lib/security/methods"; import IdTokenVerifier from "idtoken-verifier"; import T from "i18n-react"; +import { Breadcrumbs } from "react-breadcrumbs"; import { LocalizationProvider } from "@mui/x-date-pickers"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import AppBar from "@mui/material/AppBar"; @@ -219,7 +220,9 @@ class App extends React.PureComponent { onClick={this.toggleMenu} sx={{ mr: 2 }} > - + )} @@ -232,6 +235,21 @@ class App extends React.PureComponent { initLogOut={initLogOut} /> + {isLoggedUser && ( + + + + )} const PrimaryLayout = ({ match, currentSummit, - location, member, menuOpen, toggleMenu -}) => { - let extraClass = "container"; - - // full width pages - if ( - location.pathname.includes("schedule") || - location.pathname.includes("bulk-actions") - ) { - extraClass = ""; - } - - return ( -
- ( +
+ +
+ , pathname: match.url }} /> -
- - , pathname: match.url }} - /> - - }> - - - - - - - - - - - - - - - - } /> - - -
-
- ); -}; + }> + + + + + + + + + + + + + + + + } /> + + +
+
+); const mapStateToProps = ({ currentSummitState, loggedUserState }) => ({ currentSummit: currentSummitState.currentSummit, diff --git a/src/styles/general.less b/src/styles/general.less index cc0256ffe..01b906615 100644 --- a/src/styles/general.less +++ b/src/styles/general.less @@ -68,16 +68,9 @@ h3 { } .breadcrumbs-wrapper { - padding: 10px 30px; - margin-bottom: 20px; color: grey; font-size: 12px; - background-color: white; -} - -.breadcrumbs-wrapper:not(.container) { - padding: 10px 12px; - margin: 0 16px 20px 16px; + white-space: nowrap; } .breadcrumbs__separator { @@ -220,11 +213,3 @@ h3 { .copy-button { cursor: pointer; } - -/* MOBILE SPECIFIC */ - -@media only screen and (max-width: 768px) { - .breadcrumbs-wrapper { - padding: 10px 16px; - } -} From 8ab061411dced51f628416dff3e2ae5c9b1e955b Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 16 Sep 2026 17:06:54 -0500 Subject: [PATCH 5/9] style: Increase size of screen tables take up --- src/styles/landing.css | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/styles/landing.css b/src/styles/landing.css index ba75b21e7..17cf06141 100644 --- a/src/styles/landing.css +++ b/src/styles/landing.css @@ -12,13 +12,10 @@ body { font-size: 22px; } -.primary-layout { - margin: 30px 0; -} - .container { + width: 100%; background-color: white; - padding: 30px; + padding: 10px 30px; } .form-check-label { From b233294614292ad2d3d3fd22d88d5f85a96fc400 Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 16 Sep 2026 17:42:13 -0500 Subject: [PATCH 6/9] fix: Fix appearence of a selected event's dashboard --- src/pages/summits/summit-dashboard-page.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/summits/summit-dashboard-page.js b/src/pages/summits/summit-dashboard-page.js index 21e5fb931..0fbc5ee3d 100644 --- a/src/pages/summits/summit-dashboard-page.js +++ b/src/pages/summits/summit-dashboard-page.js @@ -16,7 +16,6 @@ import { connect } from "react-redux"; import T from "i18n-react/dist/i18n-react"; import { Breadcrumb } from "react-breadcrumbs"; import Box from "@mui/material/Box"; -import Container from "@mui/material/Container"; import Grid2 from "@mui/material/Grid2"; import Stack from "@mui/material/Stack"; import Tab from "@mui/material/Tab"; @@ -61,7 +60,7 @@ function SummitDashboardPage({ ).length; return ( - +
)} - +
); } From c9c06eb5638666cd34f9c8964dfe98db34707bc5 Mon Sep 17 00:00:00 2001 From: anna Date: Thu, 17 Sep 2026 13:11:27 -0500 Subject: [PATCH 7/9] feat: Add hover on and off capabilities back to side nav --- src/app.js | 39 ++++++++++++++++++++++++++++++++++- src/components/menu/index.js | 21 ++++++++++++++++--- src/layouts/primary-layout.js | 6 +++++- 3 files changed, 61 insertions(+), 5 deletions(-) diff --git a/src/app.js b/src/app.js index 82f747da2..aab66460b 100644 --- a/src/app.js +++ b/src/app.js @@ -122,6 +122,8 @@ if (exclusiveSections.hasOwnProperty(process.env.APP_CLIENT_NAME)) { window.EXCLUSIVE_SECTIONS = exclusiveSections[process.env.APP_CLIENT_NAME]; } +const MENU_CLOSE_DELAY_MS = 200; + if (window.SENTRY_DSN && window.SENTRY_DSN !== "") { console.log("app init sentry ..."); // Initialize Sentry @@ -153,7 +155,11 @@ class App extends React.PureComponent { super(props); props.resetLoading(); this.state = { menuOpen: false }; + this.menuCloseTimeout = null; this.toggleMenu = this.toggleMenu.bind(this); + this.openMenu = this.openMenu.bind(this); + this.cancelMenuClose = this.cancelMenuClose.bind(this); + this.scheduleMenuClose = this.scheduleMenuClose.bind(this); } onClickLogin() { @@ -164,10 +170,34 @@ class App extends React.PureComponent { this.props.getTimezones(); } + componentWillUnmount() { + this.cancelMenuClose(); + } + toggleMenu() { + this.cancelMenuClose(); this.setState((prevState) => ({ menuOpen: !prevState.menuOpen })); } + openMenu() { + this.cancelMenuClose(); + this.setState({ menuOpen: true }); + } + + cancelMenuClose() { + if (this.menuCloseTimeout) { + clearTimeout(this.menuCloseTimeout); + this.menuCloseTimeout = null; + } + } + + scheduleMenuClose() { + this.cancelMenuClose(); + this.menuCloseTimeout = setTimeout(() => { + this.setState({ menuOpen: false }); + }, MENU_CLOSE_DELAY_MS); + } + render() { const { isLoggedUser, @@ -218,6 +248,8 @@ class App extends React.PureComponent { edge="start" aria-label={T.translate("menu.toggle_navigation")} onClick={this.toggleMenu} + onMouseEnter={this.openMenu} + onMouseLeave={this.scheduleMenuClose} sx={{ mr: 2 }} > { +const Menu = ({ + currentSummit, + member, + history, + menuOpen, + toggleMenu, + onMenuMouseEnter, + onMenuMouseLeave +}) => { const memberObj = new Member(member); const globalItems = getGlobalItems(); const summitItems = currentSummit ? getSummitItems(currentSummit.id) : []; @@ -78,10 +86,17 @@ const Menu = ({ currentSummit, member, history, menuOpen, toggleMenu }) => { onClose={closeMenu} slotProps={{ root: { keepMounted: true }, - paper: { sx: { width: DRAWER_WIDTH } } + paper: { + sx: { width: DRAWER_WIDTH }, + onMouseEnter: onMenuMouseEnter, + onMouseLeave: onMenuMouseLeave + } }} > - + {globalItems.map(drawMenuItem)} diff --git a/src/layouts/primary-layout.js b/src/layouts/primary-layout.js index caeb3ebf9..23b8d1b75 100644 --- a/src/layouts/primary-layout.js +++ b/src/layouts/primary-layout.js @@ -47,7 +47,9 @@ const PrimaryLayout = ({ currentSummit, member, menuOpen, - toggleMenu + toggleMenu, + onMenuMouseEnter, + onMenuMouseLeave }) => (
Date: Thu, 17 Sep 2026 13:47:57 -0500 Subject: [PATCH 8/9] fix: Revert to smaller container size on screens shown for selected event to maintain formatting --- src/layouts/summit-id-layout.js | 2 +- src/styles/landing.css | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/layouts/summit-id-layout.js b/src/layouts/summit-id-layout.js index 816bc92b7..b6a839aa0 100644 --- a/src/layouts/summit-id-layout.js +++ b/src/layouts/summit-id-layout.js @@ -144,7 +144,7 @@ const SummitIdLayout = ({ currentSummit, loading, match, ...props }) => { return null; return ( -
+
}> diff --git a/src/styles/landing.css b/src/styles/landing.css index 17cf06141..4a698240d 100644 --- a/src/styles/landing.css +++ b/src/styles/landing.css @@ -18,6 +18,38 @@ body { padding: 10px 30px; } +/* Selected-event pages (everything under summit-id-layout.js) keep the + original, narrower container width instead of the widened default used + elsewhere, centered like a standard Bootstrap container. */ +.summit-scope .container { + width: auto; + margin: 30px auto; +} + +@media (min-width: 768px) { + .summit-scope .container { + width: 750px; + } +} + +@media (min-width: 992px) { + .summit-scope .container { + width: 970px; + } +} + +@media (min-width: 1200px) { + .summit-scope .container { + width: 1170px; + } +} + +.table-container { + width: 100%; + background-color: white; + padding: 10px 30px; +} + .form-check-label { padding-left: 10px !important; padding-top: 2px; From 42b783178aefcd4062427971c8008c64b54176f1 Mon Sep 17 00:00:00 2001 From: anna Date: Thu, 17 Sep 2026 15:45:56 -0500 Subject: [PATCH 9/9] fix: Log out screen formatting returned to original appearance --- src/app.js | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/src/app.js b/src/app.js index aab66460b..3c1811a2a 100644 --- a/src/app.js +++ b/src/app.js @@ -257,15 +257,24 @@ class App extends React.PureComponent { /> )} - + {T.translate("landing.os_summit_admin")} - + {isLoggedUser && ( + + )} {isLoggedUser && ( )} + {!isLoggedUser && ( + + )}