@netfoundry/docusaurus-theme 0.10.10 → 0.10.12

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 (7) hide show
  1. package/css/layout.css +0 -5
  2. package/dist/css/layout.css +0 -5
  3. package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.d.ts.map +1 -1
  4. package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js +7 -43
  5. package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js.map +1 -1
  6. package/package.json +1 -1
  7. package/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx +81 -125
package/css/layout.css CHANGED
@@ -22,11 +22,6 @@ html {
22
22
  color: inherit;
23
23
  }
24
24
 
25
- /* Logo fills the navbar height (overrides Docusaurus default of 2rem) */
26
- .navbar__logo {
27
- height: var(--ifm-navbar-height);
28
- }
29
-
30
25
  /* Separator between navbar logo and nav items */
31
26
  .navbar__brand::after {
32
27
  content: '';
package/dist/css/layout.css CHANGED
@@ -22,11 +22,6 @@ html {
22
22
  color: inherit;
23
23
  }
24
24
 
25
- /* Logo fills the navbar height (overrides Docusaurus default of 2rem) */
26
- .navbar__logo {
27
- height: var(--ifm-navbar-height);
28
- }
29
-
30
25
  /* Separator between navbar logo and nav items */
31
26
  .navbar__brand::after {
32
27
  content: '';
package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx"],"names":[],"mappings":"AAgBA,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,GAAG,2CAsGL"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,GAAG,2CAkEL"}
package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js CHANGED
@@ -1,13 +1,5 @@
1
1
  import { createElement as _createElement } from "react";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- /**
4
- * Swizzled DropdownNavbarItemDesktop
5
- *
6
- * Opens on hover. The panel stays open until the user actually moves their
7
- * cursor into it — so the gap between the trigger and the fixed panel never
8
- * causes a flicker. Once the cursor has entered the panel, leaving it
9
- * (or clicking outside) closes it normally.
10
- */
11
3
  import { useState, useRef, useEffect, useCallback } from 'react';
12
4
  import clsx from 'clsx';
13
5
  import NavbarNavLinkOrig from '@theme/NavbarItem/NavbarNavLink';
@@ -16,14 +8,12 @@ const NavbarNavLink = NavbarNavLinkOrig;
16
8
  const NavbarItem = NavbarItemOrig;
17
9
  export default function DropdownNavbarItemDesktop({ items, position, className, onClick, ...props }) {
18
10
  const dropdownRef = useRef(null);
19
- const hasEnteredPanel = useRef(false);
20
11
  const [showDropdown, setShowDropdown] = useState(false);
21
12
  // Close on click / touch outside
22
13
  useEffect(() => {
23
14
  const close = (e) => {
24
15
  if (!dropdownRef.current?.contains(e.target)) {
25
16
  setShowDropdown(false);
26
- hasEnteredPanel.current = false;
27
17
  }
28
18
  };
29
19
  document.addEventListener('mousedown', close);
@@ -33,50 +23,24 @@ export default function DropdownNavbarItemDesktop({ items, position, className,
33
23
  document.removeEventListener('touchstart', close);
34
24
  };
35
25
  }, []);
36
- // Sync: close other open megamenus when this one opens
26
+ // Close when a NavbarPicker opens
37
27
  useEffect(() => {
38
- const onOtherOpen = (e) => {
39
- if (e.detail.label !== props.label) {
40
- setShowDropdown(false);
41
- hasEnteredPanel.current = false;
42
- }
43
- };
28
+ const onOtherOpen = () => setShowDropdown(false);
44
29
  window.addEventListener('nf-picker:open', onOtherOpen);
45
30
  return () => window.removeEventListener('nf-picker:open', onOtherOpen);
46
- }, [props.label]);
47
- // Open on hover — reset entry state each time
48
- const handleMouseEnter = useCallback(() => {
49
- hasEnteredPanel.current = false;
50
- window.dispatchEvent(new CustomEvent('nf-picker:open', { detail: { label: props.label } }));
51
- setShowDropdown(true);
52
- console.log('[product-picker] popped open:', props.label);
53
- }, [props.label]);
54
- // Leaving the trigger: do nothing — the panel stays open until the user
55
- // either enters it (then leaves) or clicks outside.
56
- const handleTriggerLeave = useCallback(() => {
57
- console.log('[product-picker] trigger leave — hasEnteredPanel:', hasEnteredPanel.current);
58
- }, []);
59
- // Once the cursor enters the panel, normal leave/blur can close it
60
- const handlePanelEnter = useCallback(() => {
61
- hasEnteredPanel.current = true;
62
- console.log('[product-picker] panel focus obtained');
63
31
  }, []);
64
- const handlePanelLeave = useCallback(() => {
65
- console.log('[product-picker] panel focus lost — hasEnteredPanel:', hasEnteredPanel.current);
66
- if (hasEnteredPanel.current) {
67
- setShowDropdown(false);
68
- hasEnteredPanel.current = false;
69
- console.log('[product-picker] closing — cursor left panel');
70
- }
32
+ const handleClick = useCallback((e) => {
33
+ e.preventDefault();
34
+ setShowDropdown(prev => !prev);
71
35
  }, []);
72
36
  return (_jsxs("div", { ref: dropdownRef, className: clsx('navbar__item', 'dropdown', {
73
37
  'dropdown--right': position === 'right',
74
38
  'dropdown--show': showDropdown,
75
- }), onMouseEnter: handleMouseEnter, onMouseLeave: handleTriggerLeave, children: [_jsx(NavbarNavLink, { "aria-haspopup": "true", "aria-expanded": showDropdown, role: "button", href: props.to ? undefined : '#', className: clsx('navbar__link', className), ...props, onClick: props.to ? undefined : (e) => e.preventDefault(), onKeyDown: (e) => {
39
+ }), children: [_jsx(NavbarNavLink, { "aria-haspopup": "true", "aria-expanded": showDropdown, role: "button", href: props.to ? undefined : '#', className: clsx('navbar__link', className), ...props, onClick: props.to ? undefined : handleClick, onKeyDown: (e) => {
76
40
  if (e.key === 'Enter') {
77
41
  e.preventDefault();
78
42
  setShowDropdown(prev => !prev);
79
43
  }
80
- }, children: props.children ?? props.label }), _jsx("ul", { className: "dropdown__menu", onMouseEnter: handlePanelEnter, onMouseLeave: handlePanelLeave, children: items.map((childItemProps, i) => (_createElement(NavbarItem, { isDropdownItem: true, activeClassName: "dropdown__link--active", ...childItemProps, key: i }))) })] }));
44
+ }, children: props.children ?? props.label }), _jsx("ul", { className: "dropdown__menu", children: items.map((childItemProps, i) => (_createElement(NavbarItem, { isDropdownItem: true, activeClassName: "dropdown__link--active", ...childItemProps, key: i }))) })] }));
81
45
  }
82
46
  //# sourceMappingURL=index.js.map
package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx"],"names":[],"mappings":";;AAAA;;;;;;;GAOG;AACH,OAAc,EAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,OAAO,CAAC;AACtE,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,iBAAiB,MAAM,iCAAiC,CAAC;AAChE,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,MAAM,aAAa,GAAG,iBAA6C,CAAC;AACpE,MAAM,UAAU,GAAM,cAA6C,CAAC;AAEpE,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACJ;IACJ,MAAM,WAAW,GAAO,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,CAAC,CAA0B,EAAE,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;gBACrD,eAAe,CAAC,KAAK,CAAC,CAAC;gBACvB,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAC9C,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;YACjD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uDAAuD;IACvD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,CAAC,CAAM,EAAE,EAAE;YAC7B,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,EAAE,CAAC;gBACnC,eAAe,CAAC,KAAK,CAAC,CAAC;gBACvB,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,8CAA8C;IAC9C,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;QAChC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAC,EAAC,CAAC,CAAC,CAAC;QACxF,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,OAAO,CAAC,GAAG,CAAC,+BAA+B,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,wEAAwE;IACxE,oDAAoD;IACpD,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,OAAO,CAAC,GAAG,CAAC,mDAAmD,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAC5F,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,mEAAmE;IACnE,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,OAAO,CAAC,GAAG,CAAC,uCAAuC,CAAC,CAAC;IACvD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,OAAO,CAAC,GAAG,CAAC,sDAAsD,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;QAC7F,IAAI,eAAe,CAAC,OAAO,EAAE,CAAC;YAC5B,eAAe,CAAC,KAAK,CAAC,CAAC;YACvB,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;YAChC,OAAO,CAAC,GAAG,CAAC,8CAA8C,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eACE,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE;YAC1C,iBAAiB,EAAE,QAAQ,KAAK,OAAO;YACvC,gBAAgB,EAAG,YAAY;SAChC,CAAC,EACF,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,kBAAkB,aAChC,KAAC,aAAa,qBACE,MAAM,mBACL,YAAY,EAC3B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAChC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,KACtC,KAAK,EACT,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAmB,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAC3E,SAAS,EAAE,CAAC,CAAsB,EAAE,EAAE;oBACpC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;oBACjC,CAAC;gBACH,CAAC,YACA,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,GAChB,EAChB,aACE,SAAS,EAAC,gBAAgB,EAC1B,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,YAC7B,KAAK,CAAC,GAAG,CAAC,CAAC,cAAmB,EAAE,CAAS,EAAE,EAAE,CAAC,CAC7C,eAAC,UAAU,IACT,cAAc,QACd,eAAe,EAAC,wBAAwB,KACpC,cAAc,EAClB,GAAG,EAAE,CAAC,GACN,CACH,CAAC,GACC,IACD,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@netfoundry/docusaurus-theme",
3
- "version": "0.10.10",
3
+ "version": "0.10.12",
4
4
  "description": "NetFoundry Docusaurus theme with shared layout, footer, and styling",
5
5
  "main": "dist/src/index.js",
6
6
  "types": "dist/src/index.d.ts",
package/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx CHANGED
@@ -1,125 +1,81 @@
1
- /**
2
- * Swizzled DropdownNavbarItemDesktop
3
- *
4
- * Opens on hover. The panel stays open until the user actually moves their
5
- * cursor into it — so the gap between the trigger and the fixed panel never
6
- * causes a flicker. Once the cursor has entered the panel, leaving it
7
- * (or clicking outside) closes it normally.
8
- */
9
- import React, {useState, useRef, useEffect, useCallback} from 'react';
10
- import clsx from 'clsx';
11
- import NavbarNavLinkOrig from '@theme/NavbarItem/NavbarNavLink';
12
- import NavbarItemOrig from '@theme/NavbarItem';
13
-
14
- const NavbarNavLink = NavbarNavLinkOrig as React.ComponentType<any>;
15
- const NavbarItem = NavbarItemOrig as React.ComponentType<any>;
16
-
17
- export default function DropdownNavbarItemDesktop({
18
- items,
19
- position,
20
- className,
21
- onClick,
22
- ...props
23
- }: any) {
24
- const dropdownRef = useRef<HTMLDivElement>(null);
25
- const hasEnteredPanel = useRef(false);
26
- const [showDropdown, setShowDropdown] = useState(false);
27
-
28
- // Close on click / touch outside
29
- useEffect(() => {
30
- const close = (e: MouseEvent | TouchEvent) => {
31
- if (!dropdownRef.current?.contains(e.target as Node)) {
32
- setShowDropdown(false);
33
- hasEnteredPanel.current = false;
34
- }
35
- };
36
- document.addEventListener('mousedown', close);
37
- document.addEventListener('touchstart', close);
38
- return () => {
39
- document.removeEventListener('mousedown', close);
40
- document.removeEventListener('touchstart', close);
41
- };
42
- }, []);
43
-
44
- // Sync: close other open megamenus when this one opens
45
- useEffect(() => {
46
- const onOtherOpen = (e: any) => {
47
- if (e.detail.label !== props.label) {
48
- setShowDropdown(false);
49
- hasEnteredPanel.current = false;
50
- }
51
- };
52
- window.addEventListener('nf-picker:open', onOtherOpen);
53
- return () => window.removeEventListener('nf-picker:open', onOtherOpen);
54
- }, [props.label]);
55
-
56
- // Open on hover — reset entry state each time
57
- const handleMouseEnter = useCallback(() => {
58
- hasEnteredPanel.current = false;
59
- window.dispatchEvent(new CustomEvent('nf-picker:open', {detail: {label: props.label}}));
60
- setShowDropdown(true);
61
- console.log('[product-picker] popped open:', props.label);
62
- }, [props.label]);
63
-
64
- // Leaving the trigger: do nothing — the panel stays open until the user
65
- // either enters it (then leaves) or clicks outside.
66
- const handleTriggerLeave = useCallback(() => {
67
- console.log('[product-picker] trigger leave — hasEnteredPanel:', hasEnteredPanel.current);
68
- }, []);
69
-
70
- // Once the cursor enters the panel, normal leave/blur can close it
71
- const handlePanelEnter = useCallback(() => {
72
- hasEnteredPanel.current = true;
73
- console.log('[product-picker] panel focus obtained');
74
- }, []);
75
-
76
- const handlePanelLeave = useCallback(() => {
77
- console.log('[product-picker] panel focus lost — hasEnteredPanel:', hasEnteredPanel.current);
78
- if (hasEnteredPanel.current) {
79
- setShowDropdown(false);
80
- hasEnteredPanel.current = false;
81
- console.log('[product-picker] closing — cursor left panel');
82
- }
83
- }, []);
84
-
85
- return (
86
- <div
87
- ref={dropdownRef}
88
- className={clsx('navbar__item', 'dropdown', {
89
- 'dropdown--right': position === 'right',
90
- 'dropdown--show': showDropdown,
91
- })}
92
- onMouseEnter={handleMouseEnter}
93
- onMouseLeave={handleTriggerLeave}>
94
- <NavbarNavLink
95
- aria-haspopup="true"
96
- aria-expanded={showDropdown}
97
- role="button"
98
- href={props.to ? undefined : '#'}
99
- className={clsx('navbar__link', className)}
100
- {...props}
101
- onClick={props.to ? undefined : (e: React.MouseEvent) => e.preventDefault()}
102
- onKeyDown={(e: React.KeyboardEvent) => {
103
- if (e.key === 'Enter') {
104
- e.preventDefault();
105
- setShowDropdown(prev => !prev);
106
- }
107
- }}>
108
- {props.children ?? props.label}
109
- </NavbarNavLink>
110
- <ul
111
- className="dropdown__menu"
112
- onMouseEnter={handlePanelEnter}
113
- onMouseLeave={handlePanelLeave}>
114
- {items.map((childItemProps: any, i: number) => (
115
- <NavbarItem
116
- isDropdownItem
117
- activeClassName="dropdown__link--active"
118
- {...childItemProps}
119
- key={i}
120
- />
121
- ))}
122
- </ul>
123
- </div>
124
- );
125
- }
1
+ import React, {useState, useRef, useEffect, useCallback} from 'react';
2
+ import clsx from 'clsx';
3
+ import NavbarNavLinkOrig from '@theme/NavbarItem/NavbarNavLink';
4
+ import NavbarItemOrig from '@theme/NavbarItem';
5
+
6
+ const NavbarNavLink = NavbarNavLinkOrig as React.ComponentType<any>;
7
+ const NavbarItem = NavbarItemOrig as React.ComponentType<any>;
8
+
9
+ export default function DropdownNavbarItemDesktop({
10
+ items,
11
+ position,
12
+ className,
13
+ onClick,
14
+ ...props
15
+ }: any) {
16
+ const dropdownRef = useRef<HTMLDivElement>(null);
17
+ const [showDropdown, setShowDropdown] = useState(false);
18
+
19
+ // Close on click / touch outside
20
+ useEffect(() => {
21
+ const close = (e: MouseEvent | TouchEvent) => {
22
+ if (!dropdownRef.current?.contains(e.target as Node)) {
23
+ setShowDropdown(false);
24
+ }
25
+ };
26
+ document.addEventListener('mousedown', close);
27
+ document.addEventListener('touchstart', close);
28
+ return () => {
29
+ document.removeEventListener('mousedown', close);
30
+ document.removeEventListener('touchstart', close);
31
+ };
32
+ }, []);
33
+
34
+ // Close when a NavbarPicker opens
35
+ useEffect(() => {
36
+ const onOtherOpen = () => setShowDropdown(false);
37
+ window.addEventListener('nf-picker:open', onOtherOpen);
38
+ return () => window.removeEventListener('nf-picker:open', onOtherOpen);
39
+ }, []);
40
+
41
+ const handleClick = useCallback((e: React.MouseEvent) => {
42
+ e.preventDefault();
43
+ setShowDropdown(prev => !prev);
44
+ }, []);
45
+
46
+ return (
47
+ <div
48
+ ref={dropdownRef}
49
+ className={clsx('navbar__item', 'dropdown', {
50
+ 'dropdown--right': position === 'right',
51
+ 'dropdown--show': showDropdown,
52
+ })}>
53
+ <NavbarNavLink
54
+ aria-haspopup="true"
55
+ aria-expanded={showDropdown}
56
+ role="button"
57
+ href={props.to ? undefined : '#'}
58
+ className={clsx('navbar__link', className)}
59
+ {...props}
60
+ onClick={props.to ? undefined : handleClick}
61
+ onKeyDown={(e: React.KeyboardEvent) => {
62
+ if (e.key === 'Enter') {
63
+ e.preventDefault();
64
+ setShowDropdown(prev => !prev);
65
+ }
66
+ }}>
67
+ {props.children ?? props.label}
68
+ </NavbarNavLink>
69
+ <ul className="dropdown__menu">
70
+ {items.map((childItemProps: any, i: number) => (
71
+ <NavbarItem
72
+ isDropdownItem
73
+ activeClassName="dropdown__link--active"
74
+ {...childItemProps}
75
+ key={i}
76
+ />
77
+ ))}
78
+ </ul>
79
+ </div>
80
+ );
81
+ }