/
NavToggle.js
36 lines (30 loc) · 1.09 KB
/
NavToggle.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
'use client';
import { useState, Fragment } from 'react';
import classNames from 'classnames';
import Collapse from 'react-bootstrap/Collapse';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
const NavToggle = ({ children }) => {
const [isOpen, toggleNav] = useState(false);
return (
<Fragment>
<button
type="button"
aria-label="Toggle navigation"
aria-expanded={isOpen}
aria-controls="nav-links"
className="d-block d-md-none btn btn-link text-center w-100 mt-4 py-1 bg-light bg-opacity-10 rounded"
onClick={() => toggleNav(!isOpen)}
>
<FontAwesomeIcon
icon={faChevronDown}
className={classNames('collapse-button', {
collapsed: !isOpen,
})}
/>
</button>
<Collapse in={isOpen}>{children}</Collapse>
</Fragment>
);
};
export default NavToggle;