-
Notifications
You must be signed in to change notification settings - Fork 23
/
Menu.js
117 lines (107 loc) · 2.94 KB
/
Menu.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import React, { useRef, useState } from 'react';
import { Link, StaticQuery, graphql } from 'gatsby';
import { createLocalLink } from '../utils';
import { BodyClass } from 'react-extras';
import MenuToggle from './MenuToggle';
const MENU_QUERY = graphql`
fragment MenuFields on WPGraphQL_MenuItem {
id
label
url
connectedObject {
__typename
}
}
query GET_MENU_ITEMS {
wpgraphql {
menuItems(where: { location: PRIMARY }) {
nodes {
...MenuFields
childItems {
nodes {
...MenuFields
}
}
}
}
}
}
`;
const renderLink = menuItem =>
menuItem.connectedObject.__typename === 'WPGraphQL_MenuItem' ? (
<a href={menuItem.url} target="_blank" rel="noopener noreferrer">
{menuItem.label}
</a>
) : createLocalLink(menuItem.url) ? (
<Link to={createLocalLink(menuItem.url)}>{menuItem.label}</Link>
) : (
menuItem.label
);
const renderMenuItem = menuItem => {
if (menuItem.childItems && menuItem.childItems.nodes.length) {
return renderSubMenu(menuItem);
} else {
return (
<li className="menu-item" key={menuItem.id}>
{renderLink(menuItem)}
</li>
);
}
};
const renderSubMenu = menuItem => {
return (
<li className="has-subMenu menu-item" key={menuItem.id}>
{renderLink(menuItem)}
<ul className="menuItemGroup sub-menu">
{menuItem.childItems.nodes.map(item => renderMenuItem(item))}
</ul>
</li>
);
};
const Menu = ({ location }) => {
const navRef = useRef();
const [navOpen, setNavOpen] = useState(false);
const openNav = () => {
navRef.current.classList.toggle('toggled-on');
navRef.current.classList.toggle('nav-enabled');
navOpen ? setNavOpen(false) : setNavOpen(true);
};
return (
<StaticQuery
query={MENU_QUERY}
render={data => {
if (data.wpgraphql.menuItems) {
return (
<nav
id="site-navigation"
className="main-navigation nav primary flex items-center justify-end"
role="navigation"
aria-label="Primary Menu"
ref={navRef}
>
<MenuToggle onClick={openNav} />
{navOpen && <BodyClass add="nav-open" />}
<div className="menu-primary-container">
<ul
id="menu-primary"
className="primary-menu header-font medium smooth gray list-reset"
>
{data.wpgraphql.menuItems.nodes.map(menuItem => {
if (menuItem.childItems.nodes.length) {
return renderSubMenu(menuItem);
} else {
return renderMenuItem(menuItem);
}
})}
</ul>
</div>
</nav>
);
} else {
return null;
}
}}
/>
);
};
export default Menu;