diff --git a/src/AppRouter.js b/src/AppRouter.js index 28df0868..edbadad4 100644 --- a/src/AppRouter.js +++ b/src/AppRouter.js @@ -185,11 +185,11 @@ class AppRouter extends Component { props.setAuthState(isJustFromGoogleAUth[0]); return null; } - if(getTakeTourFromURL() === "true" && !props.showTour){ - props.setTourState(true) - return null + if (getTakeTourFromURL() === "true" && !props.showTour) { + props.setTourState(true); + return null; } - return null + return null; } async fetch() { @@ -414,7 +414,11 @@ class AppRouter extends Component { if (children && children.length > 0) { children = children.map((child) => this.prependPrefix(child, prefix)); } - return { ...rest, link: `${prefix}${link}`, children }; + return { + ...rest, + link: rest?.is_link_external ? link : `${prefix}${link}`, + children, + }; } loadMenu(menus, prefix) { @@ -431,13 +435,14 @@ class AppRouter extends Component { content?.map((m) => this.prependPrefix(m, prefix)) || []; // const finalMenu = this.modifiedMenu(initialMenu); const finalMenu = initialMenu; - this.setState({ navBarMenu: content }); + + this.setState({ navBarMenu: finalMenu }); const footerContent = menus.filter((menu) => { return menu.name === "PortalFooterQuickLinks"; }); // const footerLinks = this.addPrefix(footerContent[0].content.links); - const footerLinks = footerContent[0].content.links || []; + const footerLinks = footerContent[0]?.content?.links || []; const communitiesLink = { name: "All MassEnergize Community Sites", @@ -527,7 +532,6 @@ class AppRouter extends Component { !m.link.startsWith(this.state.prefix) ) { m.link = `${this.state.prefix}/${m.link}`.replace("//", "/"); - } if (m.children && m.children.length > 0) { m.children = this.addPrefix(m.children); diff --git a/src/assets/css/extras.css b/src/assets/css/extras.css index 1a3147cc..7a8ab101 100644 --- a/src/assets/css/extras.css +++ b/src/assets/css/extras.css @@ -6,14 +6,92 @@ --app-theme-error: #d44b4b; } +.c-d-t-as-child > a { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + margin-right: 10px; +} +.c-d-t-as-child > .dropdown-toggle::after { + margin-left: auto !important; +} + +.c-d-t-as-child:hover { + background-color: var(--app-theme-orange); + color: white; + transition: 0.2s ease-out; +} + +.c-d-t-as-child:hover > a > span, +.c-d-t-as-child:hover > .dropdown-toggle::after { + color: white !important; + transition: 0.1s ease-out; +} + +.child-link:hover { + background-color: var(--app-theme-orange); + color: white; + transition: 0.2s ease-out; +} +.child-link:hover > a { + color: white; + transition: 0.1s ease-out; +} +.c-d-t > .dropdown-toggle::after { + color: rgb(181, 181, 181) !important; + margin-left: 6px; +} +.c-d-t > .dropdown-menu { + box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); + border: solid 0px var(--app-theme-orange); + border-top-width: 5px; + border-radius: 0px; + /* animation: me-fade-from-top 0.3s forwards; + transform-box: fill-box; */ +} -.form-gen-inner-wrapper{ - padding:0px 30px; +/* .c-d-t > .n-l-item:hover { + background-color: var(--app-theme-orange); } -.rich-text-container p, .rich-text-container ul, .rich-text-container ol { + +.c-d-t > .n-l-item:hover > span { + color: white; +} */ +.n-l-item { + font-weight: bold; + cursor: pointer; + color: black; + font-size: 14px; +} + +.n-l-item:hover { + color: var(--app-theme-green); + transition: 0.3s ease-out; +} +/* link child item */ +.l-c-item { + cursor: pointer; + padding: 10px 20px; + color: var(--app-theme-green-darker); +} +.l-c-item:hover { + /* background-color: var(--app-theme-orange); */ + color: white; + transition: 0.4s; +} + +.form-gen-inner-wrapper { + padding: 0px 30px; +} +.rich-text-container p, +.rich-text-container ul, +.rich-text-container ol { margin: 1em !important; } -.rich-text-container ul, .rich-text-container ol { +.rich-text-container ul, +.rich-text-container ol { padding-left: 2.5em !important ; } .shared-badge { @@ -1805,8 +1883,8 @@ -webkit-box-shadow: 0 1px 0px 0 rgba(0, 0, 0, -1.84), 0 2px 10px 0 rgba(0, 0, 0, 0.1); } -.me-btn-union span { - color:white; +.me-btn-union span { + color: white; } .me-btn-union:hover { background: #f57b34; @@ -2563,7 +2641,7 @@ .me-light-footer { margin-top: 20px; } - .vendor-pending-approval-banner{ + .vendor-pending-approval-banner { right: 10%; top: 40%; } @@ -2580,10 +2658,10 @@ .redo-hori-filter-container { max-width: 96%; } - .vendor-pending-approval-banner{ + .vendor-pending-approval-banner { right: 10%; } - .testimonial-edit-btn-text{ + .testimonial-edit-btn-text { width: 100%; } .action-items-n-sidebar-container { @@ -2593,12 +2671,12 @@ width: 164px; } - .ical-btn{ - width: 37% !important; -} -.google-calendar-btn{ - width: 60% !important; -} + .ical-btn { + width: 37% !important; + } + .google-calendar-btn { + width: 60% !important; + } } @media screen and (width: 768px) { @@ -2609,34 +2687,33 @@ width: 154px; display: none; } - .tablet-force-show{ + .tablet-force-show { display: flex !important; - position: fixed; + position: fixed; bottom: 0px; right: 0px; left: 0px; width: 100%; z-index: 100; color: white !important; - background-color: var(--app-theme-green); + background-color: var(--app-theme-green); justify-content: space-around; - padding-top:15px; - padding-bottom:15px; + padding-top: 15px; + padding-bottom: 15px; + } + .act-stats-item { + display: flex; + flex-direction: column; } - .act-stats-item{ - display: flex; - flex-direction: column; - } - .act-stats-item small{ - font-size: 0.9rem; - } - + .act-stats-item small { + font-size: 0.9rem; + } } /* ------------------------ MOBILE PHONE AREA ------------------------- */ @media only screen and (max-width: 767px) { - .form-gen-inner-wrapper{ + .form-gen-inner-wrapper { padding: 0px 15px; } .new-sign-in { @@ -3141,7 +3218,7 @@ color: #8dc63f; transition: 0.4s; } - .testimonial-edit-btn-text{ + .testimonial-edit-btn-text { width: 100% !important; margin-bottom: 10px; } @@ -3163,12 +3240,12 @@ margin-top: -22px !important; right: 30% !important; } */ - .ical-btn{ - width: 35% !important; -} -.google-calendar-btn{ - width: 61% !important; -} + .ical-btn { + width: 35% !important; + } + .google-calendar-btn { + width: 61% !important; + } .mob-line-break { display: block; } @@ -3356,7 +3433,7 @@ margin-bottom: 15px !important; } - .vendor-pending-approval-banner{ + .vendor-pending-approval-banner { right: 50% !important; } @@ -3926,41 +4003,41 @@ z-index: 10; } -.testimonial-edit-btn-text{ +.testimonial-edit-btn-text { color: white; cursor: pointer; font-weight: bold; padding: 2px 20px; - background-color:var(--app-theme-green); + background-color: var(--app-theme-green); font-size: 0.8rem; border-radius: 5px; - width: 48%; + width: 48%; text-align: center; -border: 1px solid var(--app-theme-green); + border: 1px solid var(--app-theme-green); } -.testimonial-edit-btn-text:hover{ -background-color:white ; -color: var(--app-theme-green); +.testimonial-edit-btn-text:hover { + background-color: white; + color: var(--app-theme-green); } -.testimonial-add-btn-text{ +.testimonial-add-btn-text { color: white; cursor: pointer; font-weight: bold; padding: 2px 20px; - background-color:var(--app-theme-orange); + background-color: var(--app-theme-orange); font-size: 0.8rem; border-radius: 55px; width: 48%; text-align: center; border: 1px solid var(--app-theme-orange); } -.testimonial-add-btn-text:hover{ -background-color:white ; -color: var(--app-theme-orange); +.testimonial-add-btn-text:hover { + background-color: white; + color: var(--app-theme-orange); } -.pending-approval{ - color: var(--app-theme-orange); +.pending-approval { + color: var(--app-theme-orange); cursor: pointer; padding: 2px 10px; border: 1px solid var(--app-theme-orange); @@ -3977,7 +4054,6 @@ color: var(--app-theme-orange); --c: tomato; /* color */ --f: 0.8rem; /* ribbon font-size */ z-index: 1000; - } .ribbon-container::before { @@ -3996,29 +4072,41 @@ color: var(--app-theme-orange); background: linear-gradient(rgba(0, 0, 0, 0.5) 0 0) bottom/100% var(--d) no-repeat var(--c); background-clip: padding-box; - clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)),0 100%); - -webkit-mask: linear-gradient(135deg,transparent calc(50% - var(--d) * 0.707),#fff 0) bottom left, - linear-gradient(-135deg, transparent calc(50% - var(--d) * 0.707), #fff 0)bottom right; + clip-path: polygon( + 0 0, + 100% 0, + 100% 100%, + calc(100% - var(--d)) calc(100% - var(--d)), + var(--d) calc(100% - var(--d)), + 0 100% + ); + -webkit-mask: linear-gradient( + 135deg, + transparent calc(50% - var(--d) * 0.707), + #fff 0 + ) + bottom left, + linear-gradient(-135deg, transparent calc(50% - var(--d) * 0.707), #fff 0) + bottom right; -webkit-mask-size: 300vmax 300vmax; -webkit-mask-composite: destination-in; mask-composite: intersect; - z-index: 10; + z-index: 10; } - -.cal-btn{ +.cal-btn { background-color: grey; color: white; border: 1px solid grey !important; font-size: 0.7rem !important; } -.cal-btn:hover{ -background-color:white !important ; -color: grey; +.cal-btn:hover { + background-color: white !important ; + color: grey; } -.ical-btn{ +.ical-btn { width: 43%; } -.google-calendar-btn{ +.google-calendar-btn { width: 55%; -} \ No newline at end of file +} diff --git a/src/components/Menu/NavBarBurger.js b/src/components/Menu/NavBarBurger.js index f6bcd918..8afb8e06 100644 --- a/src/components/Menu/NavBarBurger.js +++ b/src/components/Menu/NavBarBurger.js @@ -9,6 +9,7 @@ import createImagefromInitials from "../AutoGeneratedIcon.js"; import { signMeOut } from "../../redux/actions/authActions"; import { reduxToggleGuestAuthDialog } from "../../redux/actions/pageActions"; import { apiCall } from "../../api/functions"; +import { NavDropdown, Nav } from "react-bootstrap"; function getHeight() { const navBar = document.getElementById("nav-bar"); return navBar ? navBar.offsetHeight + 1 : 91; @@ -41,9 +42,49 @@ class NavBarBurger extends React.Component { handleLinkClick() { this.setState({ menuOpen: !this.state.menuOpen }); } + + renderMenuForBurgeredState(menuItems, options) { + const { links, community } = this.props; + const communityName = community.name || "communities"; + const { isChild } = options || {}; + return menuItems?.map((val, index) => { + if (val.children) { + return ( + + this.renderMenuForBurgeredState(links, { isChild: true }) + } + navlink={val} + links={links} + index={index} + clickHandler={this.handleLinkClick} + > + ); + } + return ( + { + e.preventDefault(); + this.handleLinkClick(); + if (val?.is_link_external) window.location = val?.link; + else this.props.history.push(val?.link); + }} + href={val?.link} + > + {val?.name} + + ); + }); + } + render() { - const { links, community} = this.props; + const { links, community } = this.props; const communitylogo = community?.logo?.url; + const communityLogoLink = community?.community_logo_link; var header = null; const communityName = community.name || "communities"; @@ -116,7 +157,7 @@ class NavBarBurger extends React.Component { className="col-lg-4 col-md-8 col-sm-6 col-6 d-flex" style={{ display: "flex", alignItems: "center" }} > - +
{this.renderLogin()}
- {menuItems} + {/* {menuItems} */} + + {" "} + {/* {this.renderMenuItems(this.props.navLinks)} */} + {this.renderMenuForBurgeredState(this.props.navLinks)} + ) : ( @@ -165,9 +211,15 @@ class NavBarBurger extends React.Component { > {this.renderLogin()} @@ -182,76 +234,149 @@ class NavBarBurger extends React.Component { ); } - renderNavLinks(navLinks) { - if (!navLinks) { - return
  • No PageLinks to Display
    • ; - } + renderMenuItems = (navLinks, options) => { + const { isChild } = options || {}; const style = { borderTop: "5px solid #8dc63f", borderRadius: "0", padding: "0", minwidth: "100px", }; - return Object.keys(navLinks).map((key) => { var navLink = navLinks[key]; - const name = navLink?.name?.toLowerCase()?.replace(" ", "-"); const linkId = `menu-${name}-id`; - if (navLink.children) { - const CustomNavLink = React.forwardRef((props, ref) => ( - { - e.preventDefault(); - props.onClick(e); - }} - {...(navLink?.navItemId ? { id: navLink.navItemId } : {})} - > - {" "} - {props.navLink.name}{" "} - - - )); + const { is_link_external, link } = navLink || {}; + if (navLink.children && navLink.children.length > 0) return ( -
  • + {navLink?.name} + + } + {...(isChild ? { drop: "right" } : {})} > - null}> - - - {this.renderDropdownItems(navLink.children)} - - -
    • + {this.renderMenuItems(navLink.children, { isChild: true })} + ); - } + return ( -
  • { + e.preventDefault(); + if (is_link_external) window.location = link; + else this.props.history.push(link); + document.dispatchEvent(new MouseEvent("click")); + }} + className={`${isChild ? "child-link" : ""}`} > - - {navLink.name} + + {navLink?.name} -
    • + ); }); - } + }; + + // renderNavLinks(navLinks, options = {}) { + // // return this.renderMenuItems(navLinks); + // // if (!navLinks) { + // // return
  • No PageLinks to Display
    • ; + // // } + // const style = { + // borderTop: "5px solid #8dc63f", + // borderRadius: "0", + // padding: "0", + // minwidth: "100px", + // }; + // const { isChild } = options; + + // const classes = isChild + // ? "l-c-item" + // : "d-flex flex-column justify-content-center test-me-nav-menu-item"; + + // return Object.keys(navLinks).map((key) => { + // var navLink = navLinks[key]; + + // const name = navLink?.name?.toLowerCase()?.replace(" ", "-"); + // const linkId = `menu-${name}-id`; + // if (navLink.children) { + // const CustomNavLink = React.forwardRef((props, ref) => ( + // { + // e.preventDefault(); + // props.onClick(e); + // }} + // {...(navLink?.navItemId ? { id: navLink.navItemId } : {})} + // style={{ + // display: "flex", + // flexDirection: "row", + // alignItems: "center", + // }} + // > + // {" "} + // {props.navLink.name}{" "} + // + // + // )); + + // return ( + //
  • + // null}> + // + // + // {/* {this.renderDropdownItems(navLink.children)} */} + // {this.renderNavLinks(navLink.children, { isChild: true })} + // + // + //
    • + // ); + // } + // return ( + //
  • + // {navLink.name} + //
    • + // ); + // }); + // } + //----------- AREA TO PLAY WITH WEIRD MENU ITEMS -------- renderDropdownItems(children) { if (!this.props.links) return; @@ -460,6 +585,7 @@ class SubMenuItem extends React.Component { } render() { + const { customRender } = this.props; return ( <> {this.props.navlink.name} -
    +
    - {this.renderSubmenuItems(this.props.navlink.children)} + {customRender + ? customRender(this.props.navlink?.children) + : this.renderSubmenuItems(this.props.navlink.children)}