@laerdal/life-react-components 1.10.3-dev.37 → 1.10.3-dev.38.full
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.
|
@@ -65,7 +65,7 @@ var RowLayout = _styledComponents.default.div(_templateObject2 || (_templateObje
|
|
|
65
65
|
|
|
66
66
|
var HamburgerButton = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", " button {\n height: 56px;\n }\n\n ", " {\n display: none;\n }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
|
|
67
67
|
|
|
68
|
-
var RightSide = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n\n ", " {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), _styles.BREAKPOINTS.
|
|
68
|
+
var RightSide = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n\n ", " {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), _styles.BREAKPOINTS.XSMALL, HamburgerButton);
|
|
69
69
|
|
|
70
70
|
var MobileMenuBackdrop = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ", ";\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ", " 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ", " 0.3s ease-in-out;\n }\n\n ", " {\n visibility: hidden !important;\n }\n"])), _styles.Z_INDEXES.backdrop, _CommonStyles.fadeIn, _CommonStyles.fadeOut, _styles.BREAKPOINTS.LARGE);
|
|
71
71
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.SMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}/>\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={profile}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,aAAa,GAAGC,0BAAOC,MAAV,0aAGUC,eAAOC,WAHjB,EAKNC,kBAAUC,WALJ,EAUfC,oBAAYC,KAVG,EAcfD,oBAAYE,KAdG,CAAnB;;AA2BA,IAAMC,SAAS,GAAGT,0BAAOU,GAAV,iIAAf;;AAMA,IAAMC,eAAe,GAAGX,0BAAOU,GAAV,sKACjBJ,oBAAYC,KADK,EAKjBD,oBAAYE,KALK,CAArB;;AAUA,IAAMI,SAAS,GAAGZ,0BAAOU,GAAV,2QAIXJ,oBAAYO,MAJD,EASTF,eATS,CAAf;;AAiBA,IAAMG,kBAAkB,GAAGd,0BAAOU,GAAV,ohBAWXN,kBAAUW,QAXC,EAiBPC,oBAjBO,EAsBPC,qBAtBO,EAyBpBX,oBAAYE,KAzBQ,CAAxB;;AA8BA,IAAMU,eAAe,GAAGlB,0BAAOU,GAAV,+MACCR,eAAOiB,KADR,EAKjBb,oBAAYE,KALK,EAOR,UAACY,KAAD;AAAA,SAAYA,KAAK,CAACC,WAAN,aAAuBC,MAAM,CAACC,UAAP,GAAoBH,KAAK,CAACC,WAA1B,GAAwC,GAA/D,UAAyE,KAArF;AAAA,CAPQ,CAArB;;AA4BA;AACA;AACA;AACA;AACA;AACA,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAsB,OAU+E;AAAA;;AAAA,MAT5EC,IAS4E,QAT5EA,IAS4E;AAAA,MAR5EC,eAQ4E,QAR5EA,eAQ4E;AAAA,MAP5EC,IAO4E,QAP5EA,IAO4E;AAAA,MAN5EC,OAM4E,QAN5EA,OAM4E;AAAA,MAL5EC,MAK4E,QAL5EA,MAK4E;AAAA,MAJ5EC,OAI4E,QAJ5EA,OAI4E;AAAA,MAH5EC,MAG4E,QAH5EA,MAG4E;AAAA,8BAF5EC,WAE4E;AAAA,MAF5EA,WAE4E,iCAF9D,IAE8D;AAAA,MAD5EC,QAC4E,QAD5EA,QAC4E;;AACzG,wBAA4CC,KAAK,CAACC,QAAN,CAAe,KAAf,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,MAAMC,iBAAiB,GAAG,iCAAqBF,cAArB,CAA1B;;AAEA,yBAAwCF,KAAK,CAACC,QAAN,CAAe,KAAf,CAAxC;AAAA;AAAA,MAAOI,YAAP;AAAA,MAAqBC,eAArB;;AAEA,MAAMC,UAAU,GAAGP,KAAK,CAACQ,MAAN,CAAgC,IAAhC,CAAnB;AACA,MAAMC,gBAAgB,GAAGT,KAAK,CAACQ,MAAN,EAAzB;AACAC,EAAAA,gBAAgB,CAACC,OAAjB,GAA2BH,UAA3B,aAA2BA,UAA3B,8CAA2BA,UAAU,CAAEG,OAAvC,iFAA2B,oBAAqBC,OAAhD,oFAA2B,sBAA8BC,IAA9B,CAAmC,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACC,IAAF,KAAW,SAAf;AAAA,GAApC,CAA3B,qFAA2B,uBAA+DC,GAA1F,2DAA2B,uBAAoEL,OAA/F;AAEA,MAAMM,mBAAmB,GAAGhB,KAAK,CAACQ,MAAN,CAAgC,IAAhC,CAA5B;AAEA,MAAMS,YAAY,GAAGjB,KAAK,CAACQ,MAAN,CAAa,IAAb,CAArB;;AACA,yBAAsCR,KAAK,CAACC,QAAN,CAAuB,CAAvB,CAAtC;AAAA;AAAA,MAAOiB,WAAP;AAAA,MAAoBC,cAApB;;AAGA,MAAMC,WAAW,GAAG,gCAAmB;AAAA,WAAMd,eAAe,CAAC,KAAD,CAArB;AAAA,GAAnB,EAAiD,CAACG,gBAAD,CAAjD,CAApB;AACA,MAAMY,aAAa,GAAG,gCAAmB;AAAA,WAAMlB,iBAAiB,CAAC,KAAD,CAAvB;AAAA,GAAnB,EAAmD,CAACa,mBAAD,CAAnD,CAAtB;AAEAhB,EAAAA,KAAK,CAACsB,SAAN,CAAgB,YAAM;AACpB,QAAI,CAACb,gBAAgB,CAACC,OAAtB,EAA+B;;AAE/B,QAAMa,YAAY,GAAG,SAAfA,YAAe,GAAM;AAAA;;AACzB,UAAMC,kBAAkB,4BAAGf,gBAAgB,CAACC,OAApB,oFAAG,sBAA0Be,qBAA1B,EAAH,2DAAG,uBAAmDC,KAA9E;AACAP,MAAAA,cAAc,CAACK,kBAAkB,IAAI,CAAvB,CAAd;AACD,KAHD;;AAKAD,IAAAA,YAAY;AACZnC,IAAAA,MAAM,CAACuC,gBAAP,CAAwB,QAAxB,EAAkCJ,YAAlC;AACA,WAAO;AAAA,aAAMnC,MAAM,CAACwC,mBAAP,CAA2B,QAA3B,EAAqCL,YAArC,CAAN;AAAA,KAAP;AACD,GAXD,EAWG,CAACd,gBAAgB,CAACC,OAAlB,CAXH;AAcA,sBACE;AAAA,4BACE,qBAAC,aAAD;AAAe,qBAAab,MAA5B;AAAA,6BACE,qBAAC,kBAAD;AAAW,QAAA,WAAW,EAAEC,WAAxB;AAAqC,QAAA,QAAQ,EAAEC,QAA/C;AAAA,+BACE,sBAAC,SAAD;AAAA,kCACE,qBAAC,aAAD;AAAM,YAAA,IAAI,EAAER,IAAI,IAAI,EAApB;AAAwB,YAAA,WAAW,EAAEE,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEoC,WAA3C;AAAwD,YAAA,OAAO,EAAEpC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEqC,OAAvE;AAAgF,YAAA,EAAE,EAAErC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEsC;AAA1F,YADF,EAGIvC,eAAe,iBACf,qBAAC,iBAAD;AAAU,YAAA,KAAK,EAAE,CAAAI,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEoC,KAAT,CAAeC,MAAf,CAAsB,UAAApB,CAAC;AAAA,qBAAI,CAACA,CAAC,CAACqB,MAAP;AAAA,aAAvB,MAAyC,EAA1D;AAA8D,YAAA,YAAY,EAAEjB;AAA5E,YAJJ,eAME,sBAAC,SAAD;AAAW,YAAA,SAAS,YAAKrB,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAEuC,qBAAT,GAAiC,SAAjC,GAA6C,EAAlD,CAApB;AACW,YAAA,GAAG,EAAElB,YADhB;AAAA,oCAEE,qBAAC,qBAAD;AAAc,cAAA,KAAK,EAAErB,OAAF,aAAEA,OAAF,yCAAEA,OAAO,CAAEoC,KAAX,mDAAE,eAAgBC,MAAhB,CAAuB,UAAApB,CAAC;AAAA,uBAAIA,CAAC,CAACqB,MAAN;AAAA,eAAxB,CAArB;AAA4D,cAAA,MAAM,EAAEtC,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEwC;AAA7E,cAFF,eAGE,qBAAC,uBAAD;AAAgB,cAAA,GAAG,EAAE7B,UAArB;AACgB,cAAA,OAAO,EAAEX,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEe,OADlC;AAEgB,cAAA,cAAc,EAAE;AAAA,uBAAML,eAAe,CAAC,CAACD,YAAF,CAArB;AAAA,eAFhC;AAGgB,cAAA,IAAI,EAAEX,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAE2C;AAH/B,cAHF,eAOE,qBAAC,eAAD;AAAiB,cAAA,MAAM,EAAE,CAAC7C,eAA1B;AAAA,qCACE,qBAAC,kBAAD;AAAY,gBAAA,MAAM,EAAE;AAAA,yBAAMW,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA,iBAApB;AACY,gBAAA,GAAG,EAAEc,mBADjB;AAEY,gBAAA,KAAK,EAAE,UAFnB;AAGY,gBAAA,OAAO,EAAE,WAHrB;AAAA,uCAIE,qBAAC,iBAAD;AAAM,kBAAA,IAAI,EAAC;AAAX;AAJF;AADF,cAPF;AAAA,YANF;AAAA;AADF;AADF,MADF,eA4BE,qBAAC,kBAAD;AAAoB,MAAA,SAAS,EAAEd,cAAc,GAAG,MAAH,GAAY,CAACG,YAAD,IAAiBD,iBAAjB,GAAqC,QAArC,GAAgD,EAAzG;AAAA,6BACE,qBAAC,kBAAD;AAAmB,QAAA,GAAG,EAAEiB,aAAxB;AACmB,QAAA,IAAI,EAAC,MADxB;AAEmB,2BAAgB,gBAFnC;AAAA,+BAGE,qBAAC,mBAAD,kCAAgB1B,MAAhB;AACY,UAAA,IAAI,EAAEO,cADlB;AAEY,UAAA,OAAO,EAAE;AAAA,mBAAMC,iBAAiB,CAAC,KAAD,CAAvB;AAAA,WAFrB;AAGY,UAAA,OAAO,EAAET;AAHrB;AAHF;AADF,MA5BF,EAuCI,CAAAE,OAAO,SAAP,IAAAA,OAAO,WAAP,gCAAAA,OAAO,CAAEe,OAAT,sEAAkB2B,IAAlB,CAAuB,UAAAzB,CAAC;AAAA,aAAIA,CAAC,CAACC,IAAF,KAAW,SAAf;AAAA,KAAxB,MAAqD,CAAC,CAACpB,OAAvD,iBACA,qBAAC,eAAD;AAAiB,MAAA,GAAG,EAAE0B,WAAtB;AACiB,MAAA,WAAW,EAAEF,WAD9B;AAEiB,qBAAY,qBAF7B;AAAA,6BAGE,qBAAC,iBAAD,kCAAcxB,OAAd;AACU,QAAA,IAAI,EAAEW,YADhB;AAEU,QAAA,cAAc,EAAE;AAAA,iBAAMC,eAAe,CAAC,KAAD,CAArB;AAAA;AAF1B;AAHF,MAxCJ;AAAA,IADF;AAmDD,CA9FD;;;AApBEd,EAAAA,e;AACAM,EAAAA,W;AACAC,EAAAA,Q;AAEAR,EAAAA,I;AACAE,EAAAA,I;AAASqC,IAAAA,O;AAAsBC,IAAAA,E;AAAaF,IAAAA,W;;AAO5ChC,EAAAA,M;;eAwGaP,mB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.XSMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}/>\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={profile}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.cjs"}
|
|
@@ -31,7 +31,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
|
31
31
|
var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n z-index: ", ";\n position: relative;\n\n height: 48px;\n\n ", " {\n height: 56px;\n }\n\n ", " {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
|
|
32
32
|
var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
33
33
|
var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", " button {\n height: 56px;\n }\n\n ", " {\n display: none;\n }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
|
|
34
|
-
var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n ", " {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), BREAKPOINTS.
|
|
34
|
+
var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n ", " {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), BREAKPOINTS.XSMALL, HamburgerButton);
|
|
35
35
|
var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ", ";\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ", " 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ", " 0.3s ease-in-out;\n }\n\n ", " {\n visibility: hidden !important;\n }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
|
|
36
36
|
var UserMenuWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
|
|
37
37
|
return props.offsetRight ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.SMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}/>\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={profile}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.XSMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}/>\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={profile}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}
|