@mjhls/mjh-framework 1.0.152 → 1.0.153

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.
package/dist/index.js CHANGED
@@ -9809,80 +9809,159 @@ var NavMagazine = function NavMagazine(props) {
9809
9809
  };
9810
9810
 
9811
9811
  var NavNative = function NavNative(props) {
9812
+ /*
9813
+ Example Nav with acceptable props
9814
+ <MagazineNav
9815
+ showLogin
9816
+ logo={props.settings.logo}
9817
+ dataObject={props.cache.mainNavCache}
9818
+ website={website}
9819
+ subNav={props.cache.subNavCache}
9820
+ />
9821
+ */
9822
+
9812
9823
  var logo = props.logo,
9824
+ mobileLogo = props.mobileLogo,
9813
9825
  dataObject = props.dataObject,
9814
- _props$variant = props.variant,
9815
- variant = _props$variant === undefined ? 'dark' : _props$variant,
9816
9826
  subNav = props.subNav,
9817
- website = props.website;
9827
+ website = props.website,
9828
+ _props$showLogin = props.showLogin,
9829
+ _props$userData = props.userData,
9830
+ _props$socialFooterNa = props.socialFooterNav,
9831
+ socialFooterNav = _props$socialFooterNa === undefined ? false : _props$socialFooterNa;
9832
+
9833
+ var navRef = React.useRef(null);
9834
+
9835
+ var _useState = React.useState(false),
9836
+ _useState2 = slicedToArray(_useState, 2),
9837
+ isSticky = _useState2[0],
9838
+ setIsSticky = _useState2[1];
9839
+
9840
+ var _useState3 = React.useState(0),
9841
+ _useState4 = slicedToArray(_useState3, 2),
9842
+ screenWidth = _useState4[0],
9843
+ setScreenWidth = _useState4[1];
9844
+
9845
+ React.useEffect(function () {
9846
+ document.addEventListener('scroll', trackScrolling);
9847
+ return function () {
9848
+ document.removeEventListener('scroll', trackScrolling);
9849
+ };
9850
+ // eslint-disable-next-line react-hooks/exhaustive-deps
9851
+ }, []);
9818
9852
 
9853
+ React.useEffect(function () {
9854
+ setScreenWidth(parseInt(window.innerWidth));
9855
+ }, []);
9856
+
9857
+ var trackScrolling = function trackScrolling() {
9858
+ var offsetTop = navRef.current.getBoundingClientRect().top;
9859
+
9860
+ if (offsetTop === 0) {
9861
+ setIsSticky(true);
9862
+ } else {
9863
+ setIsSticky(false);
9864
+ }
9865
+ };
9819
9866
 
9820
9867
  return React__default.createElement(
9821
- 'section',
9868
+ React__default.Fragment,
9822
9869
  null,
9823
9870
  React__default.createElement(
9824
9871
  Navbar,
9825
- { variant: variant, expand: 'lg', bg: 'primary' },
9872
+ {
9873
+ className: main_37 ? 'bottom-nav ios-nav' : 'bottom-nav android-nav',
9874
+ variant: 'dark',
9875
+ expand: 'xl',
9876
+ bg: 'primary',
9877
+ sticky: 'top',
9878
+ ref: navRef,
9879
+ style: { minHeight: '61px' } },
9826
9880
  React__default.createElement(
9827
9881
  Container,
9828
- null,
9829
- React__default.createElement(Navbar.Toggle, { 'aria-controls': 'basic-navbar-nav' }),
9882
+ { className: 'mobile-nav' },
9830
9883
  React__default.createElement(
9831
9884
  Navbar.Brand,
9832
- { href: '/', style: { margin: '0 auto' } },
9833
- React__default.createElement('img', { src: logo, style: { height: '40px' } })
9885
+ { id: 'nav-mobile-sm', className: 'nav-mobile-logo' },
9886
+ React__default.createElement(
9887
+ Link,
9888
+ { href: '/' },
9889
+ React__default.createElement(
9890
+ 'a',
9891
+ null,
9892
+ mobileLogo && screenWidth < 1200 ? React__default.createElement('img', { src: mobileLogo }) : React__default.createElement('img', { src: logo, className: 'logo', style: { height: '50px' } })
9893
+ )
9894
+ )
9834
9895
  ),
9835
9896
  React__default.createElement(
9897
+ 'div',
9898
+ { className: 'nav-toggle' },
9899
+ React__default.createElement(Navbar.Toggle, { 'aria-controls': 'basic-navbar-nav' }),
9900
+ React__default.createElement(
9901
+ Navbar.Brand,
9902
+ { id: 'nav-mobile-md', className: 'nav-mobile-logo' },
9903
+ React__default.createElement(
9904
+ Link,
9905
+ { href: '/' },
9906
+ React__default.createElement(
9907
+ 'a',
9908
+ null,
9909
+ mobileLogo && screenWidth < 1200 ? React__default.createElement('img', { src: mobileLogo }) : React__default.createElement('img', { src: logo, className: 'logo', style: { height: '50px' } })
9910
+ )
9911
+ )
9912
+ ),
9913
+ React__default.createElement(Search, { device: 'mobile' })
9914
+ ),
9915
+ subNav && React__default.createElement(
9836
9916
  Navbar.Collapse,
9837
- { id: 'basic-navbar-nav' },
9917
+ { id: 'basic-navbar-sub' },
9838
9918
  React__default.createElement(
9839
9919
  Nav,
9840
9920
  { className: 'mr-auto' },
9841
- dataObject && dataObject.map(function (row, index) {
9842
- if (row.subQuery.length > 1) {
9843
- return React__default.createElement(
9921
+ subNav && subNav.map(function (row, index) {
9922
+ if (row.subQuery && row.subQuery.length > 0) {
9923
+ return row.name ? React__default.createElement(
9844
9924
  NavDropdown,
9845
9925
  { key: index, title: row.name, id: 'basic-nav-dropdown' },
9846
9926
  row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
9847
9927
  if (ddRow.type === 'divider') {
9848
- return React__default.createElement(NavDropdown.Divider, null);
9928
+ return React__default.createElement(NavDropdown.Divider, { key: subIndex });
9849
9929
  } else {
9850
- return React__default.createElement(
9851
- Link,
9852
- { key: subIndex, href: ddRow.url || '#' },
9853
- React__default.createElement(
9854
- 'a',
9855
- { target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
9856
- ddRow.name
9857
- )
9858
- );
9930
+ if (ddRow.url && ddRow.name) {
9931
+ return ddRow.url && ddRow.name ? React__default.createElement(
9932
+ Link,
9933
+ { key: subIndex, href: ddRow.url },
9934
+ React__default.createElement(
9935
+ 'a',
9936
+ { target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
9937
+ ddRow.name
9938
+ )
9939
+ ) : null;
9940
+ } else return null;
9859
9941
  }
9860
9942
  })
9861
- );
9943
+ ) : null;
9862
9944
  } else {
9863
- // Link default
9864
- // return <Nav.Link href={row.url} key={index}>{row.name}</Nav.Link>
9865
- return React__default.createElement(
9945
+ return row.url && row.name ? React__default.createElement(
9866
9946
  Link,
9867
- { key: index, href: row.url || '#' },
9947
+ { key: index, href: row.url },
9868
9948
  React__default.createElement(
9869
9949
  'a',
9870
9950
  { target: row.blank ? '_blank' : '_self', className: 'nav-link' },
9871
9951
  row.name
9872
9952
  )
9873
- );
9953
+ ) : null;
9874
9954
  }
9875
9955
  })
9876
- ),
9877
- React__default.createElement(Search, null)
9956
+ )
9878
9957
  ),
9879
- subNav && React__default.createElement(
9958
+ React__default.createElement(
9880
9959
  Navbar.Collapse,
9881
- { id: 'basic-navbar-sub' },
9960
+ { id: 'basic-navbar-nav' },
9882
9961
  React__default.createElement(
9883
9962
  Nav,
9884
9963
  { className: 'mr-auto' },
9885
- subNav && subNav.map(function (row, index) {
9964
+ dataObject && dataObject.map(function (row, index) {
9886
9965
  if (row.subQuery && row.subQuery.length > 0) {
9887
9966
  return row.name ? React__default.createElement(
9888
9967
  NavDropdown,
@@ -9891,17 +9970,15 @@ var NavNative = function NavNative(props) {
9891
9970
  if (ddRow.type === 'divider') {
9892
9971
  return React__default.createElement(NavDropdown.Divider, { key: subIndex });
9893
9972
  } else {
9894
- if (ddRow.url && ddRow.name) {
9895
- return ddRow.url && ddRow.name ? React__default.createElement(
9896
- Link,
9897
- { key: subIndex, href: ddRow.url },
9898
- React__default.createElement(
9899
- 'a',
9900
- { target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
9901
- ddRow.name
9902
- )
9903
- ) : null;
9904
- } else return null;
9973
+ return ddRow.url && ddRow.name ? React__default.createElement(
9974
+ Link,
9975
+ { key: subIndex, href: ddRow.url },
9976
+ React__default.createElement(
9977
+ 'a',
9978
+ { target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
9979
+ ddRow.name
9980
+ )
9981
+ ) : null;
9905
9982
  }
9906
9983
  })
9907
9984
  ) : null;
@@ -9917,7 +9994,8 @@ var NavNative = function NavNative(props) {
9917
9994
  ) : null;
9918
9995
  }
9919
9996
  })
9920
- )
9997
+ ),
9998
+ React__default.createElement(Search, { device: 'mobile' })
9921
9999
  ),
9922
10000
  website && React__default.createElement(
9923
10001
  Navbar.Collapse,
@@ -9925,7 +10003,7 @@ var NavNative = function NavNative(props) {
9925
10003
  React__default.createElement(
9926
10004
  Nav,
9927
10005
  { className: 'mr-auto' },
9928
- React__default.createElement(NavFooter, { website: website })
10006
+ socialFooterNav ? React__default.createElement(SocialNavFooter, { website: website }) : React__default.createElement(NavFooter, { website: website })
9929
10007
  )
9930
10008
  )
9931
10009
  )
@@ -9933,7 +10011,7 @@ var NavNative = function NavNative(props) {
9933
10011
  React__default.createElement(
9934
10012
  'style',
9935
10013
  { jsx: 'true' },
9936
- '\n @media screen and (max-width: 991px) {\n .dropdown-menu {\n max-height: 315px;\n overflow: auto;\n }\n ::-webkit-scrollbar {\n width: 10px;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: rgba(214, 214, 214, 0.8);\n box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n }\n .navbar-expand-lg .show#basic-navbar-sub {\n display: block;\n }\n .navbar .mobile-nav .navbar-collapse.show {\n padding-bottom: 20px;\n border-bottom: 0.5px solid white;\n margin-bottom: 15px;\n }\n .navbar .mobile-nav .navbar-collapse .form-inline {\n margin: 5px 0px;\n }\n .navbar .mobile-nav .navbar-collapse:last-child {\n border-bottom: none;\n margin-bottom: 0px;\n padding-bottom: 0px;\n }\n .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n list-style-type: none;\n padding: inherit;\n margin-bottom: 0rem;\n }\n .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n text-transform: capitalize !important;\n font-weight: 300;\n }\n .navbar .mobile-nav .dropdown-item:focus {\n background-color: #696969;\n }\n .navbar .mobile-nav .dropdown-menu .dropdown-item {\n color: white;\n }\n .navbar .mobile-nav .dropdown-menu {\n background: inherit;\n border: none;\n }\n }\n @media screen and (min-width: 992px) {\n #basic-navbar-sub {\n display: none !important;\n }\n .navbar .mobile-nav .dropdown-menu .dropdown-item {\n color: #696969;\n }\n .navbar .mobile-nav .dropdown-menu {\n background: white;\n border: 1 px solid #708090;\n }\n }\n '
10014
+ '\n .sticky-home {\n position: relative;\n top: -3px;\n left: -6px;\n cursor: pointer;\n }\n .nav-item svg {\n margin-bottom: 2px;\n }\n #nav-login,\n #nav-logout,\n #nav-register {\n padding: 0.5rem;\n cursor: pointer;\n }\n #nav-mobile-login,\n #nav-mobile-logout,\n #nav-mobile-register {\n display: none;\n }\n #nav-mobile-logout,\n #nav-mobile-login {\n position: absolute;\n right: 1rem;\n }\n #nav-mobile-register {\n position: absolute;\n left: 1rem;\n }\n \n #nav-mobile-sm{\n display: none;\n }\n \n\n @media screen and (max-width: 1399px) {\n .mobile-nav .nav-toggle {\n width: 100%;\n display: flex;\n justify-content: space-between;\n }\n .nav-mobile-logo {\n margin-left: 1.5rem;\n \n }\n #nav-mobile-md{\n margin-right: auto;\n }\n .nav-mobile-logo img {\n height: 48px!important;\n \n }\n .nav-mobile-logo img {\n height: 38px !important;\n }\n .android-nav {\n max-height: 80vh;\n }\n\n .ios-nav {\n max-height: none;\n }\n\n .navbar.bg-primary {\n overflow: auto;\n }\n\n .mobile-nav .nav-toggle .navbar-toggler {\n float: left;\n height: 45px;\n }\n .mobile-nav .nav-toggle .form-inline {\n float: right;\n margin: 4px 0px 0px 0px;\n }\n .mobile-nav .form-inline .mobile-search {\n width: auto;\n }\n .sticky-home {\n display: none;\n }\n .dropdown-menu {\n max-height: 315px;\n overflow: auto;\n }\n ul::-webkit-scrollbar, .dropdown-menu::-webkit-scrollbar {\n width: 10px;\n background: rgba(0,0,0,.35);\n }\n ul::-webkit-scrollbar-thumb, .dropdown-menu::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: rgba(214, 214, 214, 0.8);\n box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n }\n .navbar-expand-lg .show#basic-navbar-sub {\n display: block;\n }\n .navbar .mobile-nav .navbar-collapse.show {\n padding-bottom: 10px;\n border-bottom: 0.5px solid white;\n }\n .navbar .mobile-nav .navbar-collapse .form-inline {\n display: none;\n }\n .navbar .mobile-nav .navbar-collapse {\n margin-top: 15px;\n }\n .navbar .mobile-nav .navbar-collapse:last-child {\n border-bottom: none;\n margin-bottom: 0px;\n padding-bottom: 0px;\n margin-top: 0px;\n padding-top: 10px;\n }\n .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n list-style-type: none;\n padding: inherit;\n margin-bottom: 0rem;\n }\n .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n text-transform: capitalize !important;\n font-weight: 300;\n }\n .navbar .mobile-nav .dropdown-item:focus {\n background-color: #696969;\n }\n .navbar .mobile-nav .dropdown-menu .dropdown-item {\n color: white;\n }\n .navbar .mobile-nav .dropdown-menu {\n background: inherit;\n border: none;\n }\n .navbar .mobile-nav .dropdown-menu.show {\n max-height: 100px;\n }\n }\n @media screen and (max-width: 1199px) {\n #nav-mobile-login,\n #nav-mobile-logout,\n #nav-mobile-register {\n display: block;\n }\n\n .navbar-top {\n flex-direction: row;\n justify-content: space-around !important;\n align-items: center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n width: 100%;\n }\n }\n\n @media screen and (min-width: 1399px) {\n #basic-navbar-sub {\n display: none !important;\n }\n .navbar .mobile-nav .dropdown-menu .dropdown-item {\n color: #696969;\n }\n .navbar .mobile-nav .dropdown-menu {\n background: white;\n border: 1 px solid #708090;\n }\n .mobile-nav .nav-toggle .form-inline {\n display: none;\n }\n }\n\n @media screen and (max-width: 376px) {\n .mobile-nav .nav-toggle .form-inline .mobile-search {\n width: 60%;\n }\n .mobile-nav .nav-toggle .form-inline {\n flex: 1 1 auto;\n margin-left: .25rem;\n }\n }\n @media screen and (max-width: 328px) {\n .mobile-nav .nav-toggle .form-inline .mobile-search {\n margin-right: 5px;\n }\n }\n @media screen and (max-width: 767px) {\n \n #nav-mobile-md{\n display: none;\n }\n #nav-mobile-sm{\n display: inline-block;\n margin: 0 auto .5rem;\n }\n .nav-toggle{\n margin:.5rem 0;\n }\n }\n \n '
9937
10015
  )
9938
10016
  );
9939
10017
  };