@mjhls/mjh-framework 1.0.620 → 1.0.621

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 (12) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/HamMagazine.js +8 -187
  3. package/dist/cjs/NavMagazine.js +249 -331
  4. package/dist/cjs/SocialSearchComponent-5cbde5e0.js +196 -0
  5. package/dist/cjs/TemplateNormal.js +1 -0
  6. package/dist/cjs/index.js +1 -0
  7. package/dist/esm/HamMagazine.js +9 -188
  8. package/dist/esm/NavMagazine.js +250 -332
  9. package/dist/esm/SocialSearchComponent-00385695.js +191 -0
  10. package/dist/esm/TemplateNormal.js +1 -0
  11. package/dist/esm/index.js +1 -0
  12. package/package.json +1 -1
package/dist/esm/NavMagazine.js CHANGED
@@ -14,18 +14,19 @@ import './asyncToGenerator-d25aac66.js';
14
14
  import './_set-species-75f77d40.js';
15
15
  import { S as Segment } from './beam-c40d77ae.js';
16
16
  import './react-social-icons-a7d5c5c7.js';
17
- import { I as IconContext } from './iconBase-602d52fe.js';
17
+ import './iconBase-602d52fe.js';
18
18
  import { b as IoMdLogIn } from './index.esm-85cb09e6.js';
19
- import Button from 'react-bootstrap/Button';
19
+ import 'react-bootstrap/Button';
20
20
  import Nav from 'react-bootstrap/Nav';
21
21
  import Navbar from 'react-bootstrap/Navbar';
22
22
  import NavDropdown from 'react-bootstrap/NavDropdown';
23
23
  import { M as MdEmail } from './index.esm-b08f4b04.js';
24
24
  import { N as NavFooter } from './NavFooter-e27bd93b.js';
25
- import { S as SocialNavFooter, G as GoSearch } from './index.esm-73e847d2.js';
26
- import SocialIcons from './SocialIcons.js';
27
- import Form from 'react-bootstrap/Form';
28
- import FormControl from 'react-bootstrap/FormControl';
25
+ import { S as SocialNavFooter } from './index.esm-73e847d2.js';
26
+ import './SocialIcons.js';
27
+ import 'react-bootstrap/Form';
28
+ import 'react-bootstrap/FormControl';
29
+ import { S as SocialSearchComponent } from './SocialSearchComponent-00385695.js';
29
30
 
30
31
  var NavMagazine = function NavMagazine(props) {
31
32
  /*
@@ -59,8 +60,6 @@ var NavMagazine = function NavMagazine(props) {
59
60
 
60
61
  var navRef = useRef(null);
61
62
  var topNavRef = useRef(null);
62
- // reference to mobile search component
63
- var searchRef = useRef(null);
64
63
 
65
64
  var _useState = useState(false),
66
65
  _useState2 = _slicedToArray(_useState, 2),
@@ -72,65 +71,108 @@ var NavMagazine = function NavMagazine(props) {
72
71
  screenWidth = _useState4[0],
73
72
  setScreenWidth = _useState4[1];
74
73
 
74
+ var _useState5 = useState(null),
75
+ _useState6 = _slicedToArray(_useState5, 2),
76
+ userAgent = _useState6[0],
77
+ setUserAgent = _useState6[1];
78
+
79
+ var _useState7 = useState(0),
80
+ _useState8 = _slicedToArray(_useState7, 2),
81
+ resolution = _useState8[0],
82
+ setResolution = _useState8[1];
83
+
84
+ var _useState9 = useState(true),
85
+ _useState10 = _slicedToArray(_useState9, 2),
86
+ isDesktop = _useState10[0],
87
+ setIsDesktop = _useState10[1];
88
+
89
+ var _useState11 = useState(0),
90
+ _useState12 = _slicedToArray(_useState11, 2),
91
+ topOffset = _useState12[0],
92
+ setTopOffset = _useState12[1];
93
+
75
94
  useEffect(function () {
76
95
  // handling the top mast component
77
96
  var topNavHeight = document.querySelector('.top-nav-secondary') && document.querySelector('.top-nav-secondary').offsetHeight;
78
- // Setting the top of the search component based on the offset of navigation component.
79
- searchRef.current.style.top = (topNavHeight ? topNavHeight + navRef.current.offsetHeight : navRef.current.offsetHeight) + 1 + 'px';
80
- document.addEventListener('scroll', trackScrolling);
81
- return function () {
82
- document.removeEventListener('scroll', trackScrolling);
83
- };
84
- // eslint-disable-next-line react-hooks/exhaustive-deps
85
97
  }, []);
86
98
 
87
99
  useEffect(function () {
100
+ // Check for desktop or mobile device
101
+ if (window && window.innerWidth < 1200) setIsDesktop(false);
102
+
103
+ // Hiding light-nav with logo on mobile devices
104
+ if (window && window.innerWidth < 1200 && topNavRef) topNavRef.current.style.display = 'none';
105
+
106
+ // Initial User agent setup on refresh or on load
107
+ setUserAgent(navigator.userAgent.toString());
108
+
109
+ // Initial screenwidth setup on refresh or on load
88
110
  setScreenWidth(parseInt(window.innerWidth));
89
111
  }, []);
90
112
 
113
+ // Check for browser resize
114
+ useEffect(function () {
115
+ if (resolution === 0) {
116
+ setResolution(window.innerWidth);
117
+ }
118
+ var handleResize = function handleResize() {
119
+ if (resolution === 0) {
120
+ setResolution(window.innerWidth);
121
+ } else {
122
+ if (window.innerWidth < 768 && resolution >= 768) {
123
+ console.log('Detected Mobile Resolution');
124
+ window.location.reload();
125
+ } else if (window.innerWidth >= 768 && resolution < 768) {
126
+ console.log('Detected Tablet/Desktop Resolution');
127
+ window.location.reload();
128
+ }
129
+ }
130
+ };
131
+ window.addEventListener('resize', handleResize);
132
+ }, [resolution]);
133
+
134
+ // Check for change in useragent with change in screen resolution
135
+ useEffect(function () {
136
+ var handleResize = function handleResize() {
137
+ if (userAgent && userAgent !== navigator.userAgent.toString()) {
138
+ console.log('Browser change detected, refreshing');
139
+ window.location.reload();
140
+ }
141
+ };
142
+ window.addEventListener('resize', handleResize);
143
+ }, [userAgent]);
144
+
145
+ // Handling navigation and logo position on scroll
91
146
  useEffect(function () {
92
147
  var navOffsetTop = document.getElementById('navbar-ham') && document.getElementById('navbar-ham').offsetTop;
93
148
  var adSection = document.querySelector('.AD728x90');
149
+ var navLinks = document.getElementById('nav-links');
150
+ var mastNav = document.querySelector('.nav-brands');
151
+ if (mastNav && mastNav.offsetHeight) setTopOffset(mastNav.offsetHeight - 3);
152
+
94
153
  if (window.pageYOffset > navOffsetTop) {
95
154
  if (navRef.current && navRef.current.style) {
96
- topNavRef.current.style.paddingBottom = navRef.current.offsetHeight + 'px';
97
155
  navRef.current.style.position = 'fixed';
98
- navRef.current.style.top = 0;
99
- navRef.current.style.width = '100%';
100
- navRef.current.style.zIndex = '99999';
101
- // Making the search Sticky on scroll
102
- searchRef.current.style.position = 'fixed';
103
- searchRef.current.style.top = navRef.current.offsetHeight + 1 + 'px';
104
- searchRef.current.style.zIndex = '99999';
105
- searchRef.current.style.width = '100%';
156
+ if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
106
157
  }
107
158
  }
108
159
  var stickyNav = window.addEventListener('scroll', function () {
109
160
  if (window.pageYOffset > navOffsetTop) {
110
161
  if (navRef.current && navRef.current.style) {
111
- topNavRef.current.style.paddingBottom = navRef.current.offsetHeight + 'px';
112
162
  navRef.current.style.position = 'fixed';
113
- navRef.current.style.top = 0;
114
- navRef.current.style.width = '100%';
115
- navRef.current.style.zIndex = '99999';
116
- // Making the search Sticky on scroll
117
- searchRef.current.style.position = 'fixed';
118
- searchRef.current.style.top = navRef.current.offsetHeight + 1 + 'px';
119
- searchRef.current.style.zIndex = '99999';
120
- searchRef.current.style.width = '100%';
163
+ if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
121
164
  }
165
+ setIsSticky(true);
166
+ navLinks.style.margin = 'auto';
122
167
  } else {
123
- var topNavHeight = document.querySelector('.top-nav-secondary') && document.querySelector('.top-nav-secondary').offsetHeight;
124
168
  if (navRef.current && navRef.current.style) {
125
169
  topNavRef.current.style.paddingBottom = '0';
126
170
  navRef.current.style.position = 'relative';
127
- navRef.current.style.top = '';
128
171
  if (adSection) adSection.style.marginTop = '';
129
- // Making the search Sticky on scroll
130
- searchRef.current.style.position = 'fixed';
131
- searchRef.current.style.top = (topNavHeight ? topNavHeight + navRef.current.offsetHeight : navRef.current.offsetHeight) + 1 + 'px';
132
- searchRef.current.style.width = '100%';
172
+ if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
133
173
  }
174
+ setIsSticky(false);
175
+ navLinks.style.margin = '0px auto 0px 0px';
134
176
  }
135
177
  });
136
178
  return function () {
@@ -138,38 +180,24 @@ var NavMagazine = function NavMagazine(props) {
138
180
  };
139
181
  }, []);
140
182
 
141
- var trackScrolling = function trackScrolling() {
142
- var offsetTop = navRef.current.getBoundingClientRect().top;
143
- var navLinks = document.getElementById('nav-links');
144
- if (offsetTop === 0) {
145
- setIsSticky(true);
146
- navLinks.style.margin = 'auto';
147
- navLinks.style.padding = '0px 8% 0px 0px';
148
- } else {
149
- setIsSticky(false);
150
- navLinks.style.margin = '0px auto 0px 0px';
151
- navLinks.style.padding = '0px';
152
- }
153
- };
154
-
155
183
  //const userLoggedIn = props.user ? true : false
156
184
 
157
- var _useState5 = useState(false),
158
- _useState6 = _slicedToArray(_useState5, 2),
159
- userLoggedIn = _useState6[0],
160
- setUserLoggedIn = _useState6[1];
185
+ var _useState13 = useState(false),
186
+ _useState14 = _slicedToArray(_useState13, 2),
187
+ userLoggedIn = _useState14[0],
188
+ setUserLoggedIn = _useState14[1];
161
189
 
162
- var _useState7 = useState(false),
163
- _useState8 = _slicedToArray(_useState7, 2),
164
- userChecked = _useState8[0],
165
- setUserChecked = _useState8[1];
190
+ var _useState15 = useState(false),
191
+ _useState16 = _slicedToArray(_useState15, 2),
192
+ userChecked = _useState16[0],
193
+ setUserChecked = _useState16[1];
166
194
  // Search Term
167
195
 
168
196
 
169
- var _useState9 = useState(''),
170
- _useState10 = _slicedToArray(_useState9, 2),
171
- searchKey = _useState10[0],
172
- setSearchKey = _useState10[1];
197
+ var _useState17 = useState(''),
198
+ _useState18 = _slicedToArray(_useState17, 2),
199
+ searchKey = _useState18[0],
200
+ setSearchKey = _useState18[1];
173
201
 
174
202
  useEffect(function () {
175
203
  setUserLoggedIn(props.user ? true : false);
@@ -178,130 +206,6 @@ var NavMagazine = function NavMagazine(props) {
178
206
  }
179
207
  }, [props.user, userChecked]);
180
208
 
181
- // Search function
182
- var submitSearch = function submitSearch(e) {
183
- e.preventDefault();
184
- window.location.href = '/search?searchTerm=' + searchKey;
185
- };
186
-
187
- // Toggling class of an element.Can't use toggle() as IE doesn't support toggle()
188
- var toggleClass = function toggleClass(selector, type, addOn) {
189
- if (type === 'id') {
190
- var searchBar = document.getElementById(selector);
191
- if (searchBar && searchBar.classList && searchBar.classList.contains(addOn)) {
192
- searchBar.classList.remove(addOn);
193
- } else if (searchBar && searchBar.classList) {
194
- searchBar.classList.add(addOn);
195
- }
196
- } else if (type === 'class') {
197
- var searchBtn = document.getElementsByClassName(selector)[0];
198
- if (searchBtn && searchBtn.classList && searchBtn.classList.contains(addOn)) {
199
- searchBtn.classList.remove(addOn);
200
- } else if (searchBtn && searchBtn.classList) {
201
- searchBtn.classList.add(addOn);
202
- }
203
- }
204
- };
205
-
206
- // Search Component
207
- var socialSearchComponent = function socialSearchComponent(type) {
208
- if (type === 'mobile') {
209
- return React__default.createElement(
210
- 'div',
211
- { id: 'search-content-mobile' },
212
- React__default.createElement(
213
- 'div',
214
- { id: 'search-bar-mobile', ref: searchRef },
215
- React__default.createElement(
216
- Form,
217
- { inline: true, onSubmit: function onSubmit(e) {
218
- return submitSearch(e);
219
- } },
220
- React__default.createElement(FormControl, { placeholder: 'Search', type: 'text', value: searchKey, onChange: function onChange(e) {
221
- return setSearchKey(e.target.value);
222
- } }),
223
- React__default.createElement(
224
- Button,
225
- { variant: 'primary', style: { backgroundColor: 'var(--secondary)', border: 'none' }, onClick: function onClick(e) {
226
- return submitSearch(e);
227
- } },
228
- 'Search'
229
- )
230
- )
231
- ),
232
- React__default.createElement(
233
- IconContext.Provider,
234
- { value: { color: socialIconVariant === 'light' ? 'white' : 'black', className: 'search-btn-mobile', size: '50px' } },
235
- React__default.createElement(GoSearch, {
236
- onClick: function onClick() {
237
- var navToggle = document.getElementsByClassName('navbar-toggler')[0];
238
- if (navToggle && navToggle.classList && !navToggle.classList.contains('collapsed')) {
239
- var nav = document.querySelectorAll('.navbar-collapse');
240
- for (var i = 0; i < nav.length; i++) {
241
- if (nav[i] && nav[i].classList) nav[i].classList.remove('show');
242
- }
243
- if (navToggle && navToggle.classList) navToggle.classList.add('collapsed');
244
- }
245
-
246
- toggleClass('search-bar-mobile', 'id', 'show');
247
- toggleClass('search-btn-mobile', 'class', 'active-search');
248
- }
249
- })
250
- ),
251
- React__default.createElement(
252
- 'style',
253
- { jsx: 'true' },
254
- '\n #search-content-mobile {\n display: flex;\n }\n @media screen and (min-width: 1200px) {\n #search-content-mobile {\n display: none;\n }\n }\n #search-content-mobile .search-btn-mobile {\n padding: 5px;\n position: absolute;\n right: 4%;\n height: 35px;\n width: 35px;\n margin-top: 4px;\n cursor: pointer;\n top: 12px;\n }\n #search-content-mobile #search-bar-mobile {\n position: fixed;\n display: none;\n left: 0px;\n width: 100%;\n border-radius: 5px;\n padding: 10px;\n background-color: var(--primary);\n }\n #search-content-mobile #search-bar-mobile .form-inline {\n margin-top: 0px;\n width: 100% !important;\n }\n #search-content-mobile #search-bar-mobile .form-inline .form-control {\n width: 78%;\n border-radius: 5px;\n height: 45px;\n }\n #search-content-mobile #search-bar-mobile .form-inline .btn {\n width: 20%;\n border-radius: 5px;\n background-color: #040c5a;\n height: 45px;\n margin-left: 5px;\n padding: 1px;\n }\n .show {\n display: block !important;\n }\n .active-search {\n border-radius: 5px;\n border: 1px solid var(--secondary);\n }\n '
255
- )
256
- );
257
- } else if (type === 'desktop') {
258
- return React__default.createElement(
259
- 'div',
260
- { id: 'search-content-desktop' },
261
- React__default.createElement(
262
- 'div',
263
- { id: 'search-bar-desktop' },
264
- React__default.createElement(
265
- Form,
266
- { inline: true, onSubmit: function onSubmit(e) {
267
- return submitSearch(e);
268
- } },
269
- React__default.createElement(FormControl, { placeholder: 'Search', type: 'text', value: searchKey, onChange: function onChange(e) {
270
- return setSearchKey(e.target.value);
271
- } }),
272
- React__default.createElement(
273
- Button,
274
- { variant: 'primary', style: { backgroundColor: 'var(--secondary)', border: 'none' }, onClick: function onClick(e) {
275
- return submitSearch(e);
276
- } },
277
- 'Search'
278
- )
279
- )
280
- ),
281
- React__default.createElement(
282
- IconContext.Provider,
283
- { value: { color: socialIconVariant === 'light' ? 'white' : 'black', className: 'search-btn-desktop', size: '50px' } },
284
- React__default.createElement(GoSearch, {
285
- onClick: function onClick() {
286
- toggleClass('search-bar-desktop', 'id', 'show');
287
- toggleClass('search-btn-desktop', 'class', 'active-search');
288
- }
289
- })
290
- ),
291
- settings && settings.socialLinks && settings.socialLinks.length !== 0 && React__default.createElement(
292
- 'div',
293
- { id: 'social-tab-desktop', style: { display: 'flex' } },
294
- settings.socialLinks && React__default.createElement(SocialIcons, { socialLinks: settings.socialLinks, variant: socialIconVariant })
295
- ),
296
- React__default.createElement(
297
- 'style',
298
- { jsx: 'true' },
299
- '\n #social-tab-desktops {\n position: relative;\n display: flex;\n left: 0px;\n }\n #social-tab-desktops svg {\n height: 25px !important;\n width: 25px !important;\n }\n @media screen and (max-width: 1199px) {\n #search-content-desktop {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .mobile-nav {\n width: 100% !important;\n }\n }\n #search-content-desktop {\n display: flex;\n padding-top: 1px;\n height: 35px;\n position: absolute;\n right: 5%;\n top: 14px;\n }\n #search-content-desktop .search-btn-desktop {\n padding: 5px;\n height: 35px;\n width: 32px;\n margin: -2px 5px 0px 0px;\n cursor: pointer;\n }\n #search-content-desktop #search-bar-desktop {\n display: none;\n background-color: var(--primary);\n position: relative;\n width: 400px;\n border-radius: 5px;\n height: 48px;\n top: 50px;\n }\n #search-content-desktop #search-bar-desktop .form-inline {\n padding: 5px;\n }\n #search-content-desktop #search-bar-desktop .form-inline .form-control {\n width: 78%;\n border-radius: 5px;\n }\n #search-content-desktop #search-bar-desktop .form-inline .btn {\n width: 20%;\n border-radius: 5px;\n padding: 7px;\n margin-left: 5px;\n }\n .show {\n display: block !important;\n }\n .active-search {\n border-radius: 5px;\n border: 1px solid var(--secondary);\n }\n '
300
- )
301
- );
302
- }
303
- };
304
-
305
209
  return React__default.createElement(
306
210
  React__default.Fragment,
307
211
  null,
@@ -398,18 +302,33 @@ var NavMagazine = function NavMagazine(props) {
398
302
  ),
399
303
  React__default.createElement(
400
304
  Navbar,
401
- { id: 'navbar-ham', className: main_40 ? 'bottom-nav ios-nav' : 'bottom-nav ', variant: 'dark', expand: 'xl', bg: 'primary', sticky: 'top', ref: navRef },
305
+ {
306
+ id: 'navbar-ham',
307
+ style: { width: '100%', display: 'flex', top: topOffset, overflow: 'auto' },
308
+ className: main_40 ? 'bottom-nav ios-nav' : 'bottom-nav ',
309
+ variant: 'dark',
310
+ expand: 'xl',
311
+ bg: 'primary',
312
+ sticky: 'top',
313
+ ref: navRef },
402
314
  React__default.createElement(
403
315
  Container,
404
316
  { className: 'mobile-nav android-nav', style: { display: 'flex' } },
405
317
  React__default.createElement(
406
318
  'div',
407
- { className: 'nav-toggle' },
319
+ { className: 'nav-toggle', style: { display: 'flex' } },
408
320
  React__default.createElement(Navbar.Toggle, {
409
321
  'aria-controls': 'basic-navbar-nav',
410
322
  onClick: function onClick() {
323
+ // Set overflow fix for iPhones safari browsers
324
+ if (main_40) {
325
+ var mainNav = document.querySelector('#navbar-ham');
326
+ if (mainNav && mainNav.style) mainNav.style.overflow = 'auto';
327
+ }
328
+
411
329
  var searchBar = document.getElementById('search-bar-mobile');
412
330
  var searchBtn = document.getElementsByClassName('search-btn-mobile');
331
+
413
332
  if (searchBar && searchBar.classList) {
414
333
  searchBar.classList.remove('show');
415
334
  }
@@ -417,85 +336,63 @@ var NavMagazine = function NavMagazine(props) {
417
336
  searchBtn[0].classList.remove('active-search');
418
337
  }
419
338
  }
420
- })
339
+ }),
340
+ !isDesktop && React__default.createElement(
341
+ 'div',
342
+ { className: 'site-logo-wrapper', style: { margin: 'auto' } },
343
+ React__default.createElement(
344
+ 'a',
345
+ { href: '/' },
346
+ React__default.createElement('img', { src: invertedLogo ? invertedLogo : logo, style: { padding: '0px ', objectFit: 'contain', maxHeight: '45px' } })
347
+ )
348
+ ),
349
+ !isDesktop && React__default.createElement(SocialSearchComponent, { type: 'mobile', socialIconVariant: socialIconVariant, website: website, navID: 'navbar-ham' })
421
350
  ),
422
351
  React__default.createElement(
423
352
  'div',
424
- { className: 'site-logo-wrapper', style: { display: 'none' } },
425
- React__default.createElement(
426
- 'a',
427
- { href: '/' },
428
- invertedLogo ? React__default.createElement('img', { src: invertedLogo, style: { padding: '0px ' } }) : React__default.createElement('img', { src: logo, style: { padding: '0px ' } })
429
- ),
430
- React__default.createElement(
431
- 'style',
432
- { jsx: 'true' },
433
- '\n @media screen and (max-width: 1199px) {\n .site-logo-wrapper {\n display: block !important;\n margin: auto;\n }\n .site-logo-wrapper img {\n object-fit: contain;\n max-height: 45px;\n }\n .nav-mobile-logo {\n display: none !important;\n }\n }\n @media screen and (max-width: 767px) {\n .site-logo-wrapper {\n padding-right: 10%;\n }\n }\n @media (min-width: 768px) and (max-width: 1199px) {\n .site-logo-wrapper {\n padding-right: 5%;\n }\n }\n @media screen and (max-width: 420px) {\n .site-logo-wrapper img {\n max-width: 200px;\n }\n }\n '
434
- )
435
- ),
436
- socialSearchComponent('mobile'),
437
- subNav && React__default.createElement(
438
- Navbar.Collapse,
439
- { id: 'basic-navbar-sub' },
440
- React__default.createElement(
441
- Nav,
442
- { className: 'mr-auto' },
443
- showLogin && userChecked && userLoggedIn && React__default.createElement(
444
- React__default.Fragment,
445
- null,
446
- React__default.createElement(
447
- 'a',
448
- { key: 'mobile-profile', href: '/auth/profile', className: 'nav-link' },
449
- 'Profile'
353
+ { className: 'navigation-menu-list', style: { width: '100%', maxHeight: '85vh' } },
354
+ subNav && React__default.createElement(
355
+ Navbar.Collapse,
356
+ { id: 'basic-navbar-sub' },
357
+ React__default.createElement(
358
+ Nav,
359
+ { className: 'mr-auto' },
360
+ showLogin && userChecked && userLoggedIn && React__default.createElement(
361
+ React__default.Fragment,
362
+ null,
363
+ React__default.createElement(
364
+ 'a',
365
+ { key: 'mobile-profile', href: '/auth/profile', className: 'nav-link' },
366
+ 'Profile'
367
+ ),
368
+ React__default.createElement(
369
+ 'a',
370
+ { key: 'mobile-logout', href: '/api/auth/logout', className: 'nav-link' },
371
+ 'Log Out'
372
+ )
450
373
  ),
451
- React__default.createElement(
452
- 'a',
453
- { key: 'mobile-logout', href: '/api/auth/logout', className: 'nav-link' },
454
- 'Log Out'
455
- )
456
- ),
457
- showLogin && userChecked && !userLoggedIn && React__default.createElement(
458
- React__default.Fragment,
459
- null,
460
- React__default.createElement(
461
- 'a',
462
- { key: 'mobile-signup', href: '/auth/signup', className: 'nav-link' },
463
- 'Sign Up'
374
+ showLogin && userChecked && !userLoggedIn && React__default.createElement(
375
+ React__default.Fragment,
376
+ null,
377
+ React__default.createElement(
378
+ 'a',
379
+ { key: 'mobile-signup', href: '/auth/signup', className: 'nav-link' },
380
+ 'Sign Up'
381
+ ),
382
+ React__default.createElement(
383
+ 'a',
384
+ { key: 'mobile-login', href: '/auth/login', className: 'nav-link' },
385
+ 'Log In'
386
+ )
464
387
  ),
465
- React__default.createElement(
466
- 'a',
467
- { key: 'mobile-login', href: '/auth/login', className: 'nav-link' },
468
- 'Log In'
469
- )
470
- ),
471
- subNav && subNav.map(function (row, index) {
472
- if (row.subQuery && row.subQuery.length > 0) {
473
- return row.name ? React__default.createElement(
474
- 'div',
475
- null,
476
- React__default.createElement(
477
- NavDropdown,
478
- { key: index, title: row.name, id: 'basic-nav-dropdown' },
479
- row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
480
- if (ddRow.type === 'divider') {
481
- return React__default.createElement(NavDropdown.Divider, { key: subIndex });
482
- } else {
483
- if (ddRow.url && ddRow.name) {
484
- return ddRow.url && ddRow.name ? React__default.createElement(
485
- 'a',
486
- { key: subIndex, href: Segment.getURL(ddRow.url, ddRow), target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
487
- ddRow.name
488
- ) : null;
489
- } else return null;
490
- }
491
- })
492
- ),
493
- React__default.createElement(
494
- 'noscript',
388
+ subNav && subNav.map(function (row, index) {
389
+ if (row.subQuery && row.subQuery.length > 0) {
390
+ return row.name ? React__default.createElement(
391
+ 'div',
495
392
  null,
496
393
  React__default.createElement(
497
- 'div',
498
- null,
394
+ NavDropdown,
395
+ { key: index, title: row.name, id: 'basic-nav-dropdown' },
499
396
  row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
500
397
  if (ddRow.type === 'divider') {
501
398
  return React__default.createElement(NavDropdown.Divider, { key: subIndex });
@@ -509,60 +406,62 @@ var NavMagazine = function NavMagazine(props) {
509
406
  } else return null;
510
407
  }
511
408
  })
409
+ ),
410
+ React__default.createElement(
411
+ 'noscript',
412
+ null,
413
+ React__default.createElement(
414
+ 'div',
415
+ null,
416
+ row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
417
+ if (ddRow.type === 'divider') {
418
+ return React__default.createElement(NavDropdown.Divider, { key: subIndex });
419
+ } else {
420
+ if (ddRow.url && ddRow.name) {
421
+ return ddRow.url && ddRow.name ? React__default.createElement(
422
+ 'a',
423
+ { key: subIndex, href: Segment.getURL(ddRow.url, ddRow), target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
424
+ ddRow.name
425
+ ) : null;
426
+ } else return null;
427
+ }
428
+ })
429
+ )
512
430
  )
513
- )
514
- ) : null;
515
- } else {
516
- return row.url && row.name ? React__default.createElement(
517
- 'a',
518
- { key: index, href: Segment.getURL(row.url, row), target: row.blank ? '_blank' : '_self', className: 'nav-link' },
519
- row.name
520
- ) : null;
521
- }
522
- })
523
- )
524
- ),
525
- React__default.createElement(
526
- Navbar.Collapse,
527
- { id: 'basic-navbar-nav' },
528
- isSticky && invertedLogo && React__default.createElement(
529
- Nav.Item,
530
- { className: 'nav-mobile-logo' },
531
- React__default.createElement(
532
- 'a',
533
- { href: '/' },
534
- React__default.createElement('img', { src: invertedLogo, className: 'mobile-logo', style: { height: '38px' }, alt: website.title ? website.title : website.name ? website.name : 'Website Logo' })
431
+ ) : null;
432
+ } else {
433
+ return row.url && row.name ? React__default.createElement(
434
+ 'a',
435
+ { key: index, href: Segment.getURL(row.url, row), target: row.blank ? '_blank' : '_self', className: 'nav-link' },
436
+ row.name
437
+ ) : null;
438
+ }
439
+ })
535
440
  )
536
441
  ),
537
442
  React__default.createElement(
538
- Nav,
539
- { id: 'nav-links', style: { marginRight: 'auto' } },
540
- dataObject && dataObject.map(function (row, index) {
541
- if (row.subQuery && row.subQuery.length > 0) {
542
- return row.name ? React__default.createElement(
543
- 'div',
544
- null,
545
- React__default.createElement(
546
- NavDropdown,
547
- { key: index, title: row.name, id: 'basic-nav-dropdown' },
548
- row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
549
- if (ddRow.type === 'divider') {
550
- return React__default.createElement(NavDropdown.Divider, { key: subIndex });
551
- } else {
552
- return ddRow.url && ddRow.name ? React__default.createElement(
553
- 'a',
554
- { key: subIndex, href: Segment.getURL(ddRow.url, ddRow), target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
555
- ddRow.name
556
- ) : null;
557
- }
558
- })
559
- ),
560
- React__default.createElement(
561
- 'noscript',
443
+ Navbar.Collapse,
444
+ { id: 'basic-navbar-nav' },
445
+ isSticky && invertedLogo && isDesktop && React__default.createElement(
446
+ Nav.Item,
447
+ { className: 'nav-mobile-logo' },
448
+ React__default.createElement(
449
+ 'a',
450
+ { href: '/' },
451
+ React__default.createElement('img', { src: invertedLogo, className: 'mobile-logo', style: { height: '38px' }, alt: website.title ? website.title : website.name ? website.name : 'Website Logo' })
452
+ )
453
+ ),
454
+ React__default.createElement(
455
+ Nav,
456
+ { id: 'nav-links', style: { marginRight: 'auto' } },
457
+ dataObject && dataObject.map(function (row, index) {
458
+ if (row.subQuery && row.subQuery.length > 0) {
459
+ return row.name ? React__default.createElement(
460
+ 'div',
562
461
  null,
563
462
  React__default.createElement(
564
- 'div',
565
- null,
463
+ NavDropdown,
464
+ { key: index, title: row.name, id: 'basic-nav-dropdown' },
566
465
  row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
567
466
  if (ddRow.type === 'divider') {
568
467
  return React__default.createElement(NavDropdown.Divider, { key: subIndex });
@@ -574,29 +473,48 @@ var NavMagazine = function NavMagazine(props) {
574
473
  ) : null;
575
474
  }
576
475
  })
476
+ ),
477
+ React__default.createElement(
478
+ 'noscript',
479
+ null,
480
+ React__default.createElement(
481
+ 'div',
482
+ null,
483
+ row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
484
+ if (ddRow.type === 'divider') {
485
+ return React__default.createElement(NavDropdown.Divider, { key: subIndex });
486
+ } else {
487
+ return ddRow.url && ddRow.name ? React__default.createElement(
488
+ 'a',
489
+ { key: subIndex, href: Segment.getURL(ddRow.url, ddRow), target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
490
+ ddRow.name
491
+ ) : null;
492
+ }
493
+ })
494
+ )
577
495
  )
578
- )
579
- ) : null;
580
- } else {
581
- return row.url && row.name ? React__default.createElement(
582
- 'a',
583
- { key: index, href: Segment.getURL(row.url, row), target: row.blank ? '_blank' : '_self', className: 'nav-link' },
584
- row.name
585
- ) : null;
586
- }
587
- })
588
- )
589
- ),
590
- website && React__default.createElement(
591
- Navbar.Collapse,
592
- { id: 'basic-navbar-sub' },
593
- React__default.createElement(
594
- Nav,
595
- { className: 'mr-auto' },
596
- socialFooterNav ? React__default.createElement(SocialNavFooter, { website: website, showLogo: true }) : React__default.createElement(NavFooter, { website: website, showLogo: true })
496
+ ) : null;
497
+ } else {
498
+ return row.url && row.name ? React__default.createElement(
499
+ 'a',
500
+ { key: index, href: Segment.getURL(row.url, row), target: row.blank ? '_blank' : '_self', className: 'nav-link' },
501
+ row.name
502
+ ) : null;
503
+ }
504
+ })
505
+ )
506
+ ),
507
+ website && React__default.createElement(
508
+ Navbar.Collapse,
509
+ { id: 'basic-navbar-sub' },
510
+ React__default.createElement(
511
+ Nav,
512
+ { className: 'mr-auto' },
513
+ socialFooterNav ? React__default.createElement(SocialNavFooter, { website: website, showLogo: true }) : React__default.createElement(NavFooter, { website: website, showLogo: true })
514
+ )
597
515
  )
598
516
  ),
599
- socialSearchComponent('desktop')
517
+ isDesktop && React__default.createElement(SocialSearchComponent, { type: 'desktop', socialIconVariant: socialIconVariant, website: website, navID: 'navbar-ham' })
600
518
  )
601
519
  ),
602
520
  React__default.createElement(
@@ -611,7 +529,7 @@ var NavMagazine = function NavMagazine(props) {
611
529
  React__default.createElement(
612
530
  'style',
613
531
  { jsx: 'true' },
614
- '\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 @media screen and (max-width: 1192px) {\n #nav-mobile-login,\n #nav-mobile-logout,\n #nav-mobile-register {\n display: block;\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 @media screen and (max-width: 1192px) {\n .android-nav {\n max-height: 80vh;\n }\n .ios-nav {\n max-height: none;\n }\n .navbar.bg-primary {\n overflow: auto;\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 ::-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: 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 /* To break text into next line */\n white-space: inherit !important;\n margin-bottom: 5px;\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 (min-width: 992px) {\n #search-content-mobile {\n position: absolute;\n right: 4%;\n top: 10%;\n }\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 @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 width: 70%;\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 .logo {\n max-width: 100%;\n padding-left: 10px;\n padding-right: 10px;\n }\n }\n '
532
+ '\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 @media screen and (max-width: 767px) {\n .logo {\n width: 100%;\n padding-left: 10px;\n padding-right: 10px;\n }\n }\n @media screen and (max-width: 1199px) {\n .mobile-nav .nav-toggle {\n width: 100%;\n }\n .nav-open {\n position: relative;\n }\n .mobile-nav .nav-toggle {\n width: 100%;\n }\n .android-nav {\n max-height: 80vh;\n }\n .ios-nav {\n max-height: none;\n }\n .mobile-nav .nav-toggle .navbar-toggler {\n float: left;\n height: 45px;\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 ::-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-xl .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 white-space: inherit !important;\n margin-bottom: 5px;\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 (min-width: 1200px) {\n #navbar-ham {\n overflow: visible !important;\n }\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 .navbar.bg-primary {\n z-index: 3000000 !important;\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 .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 '
615
533
  )
616
534
  );
617
535
  };