This repository has been archived by the owner on Jun 10, 2023. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
483 additions
and
355 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { Link } from 'gatsby' | ||
|
|
||
| import Icon from './icon' | ||
|
|
||
| import style from '../styles/menu.module.css' | ||
|
|
||
| const MainMenu = ({ mainMenu, mainMenuItems, isMobileMenu }) => { | ||
| const menu = mainMenu.slice(0) | ||
| !isMobileMenu && menu.splice(mainMenuItems) | ||
|
|
||
| return menu.map((menuItem, index) => ( | ||
| <li key={index}> | ||
| <Link to={menuItem.path}>{menuItem.title}</Link> | ||
| </li> | ||
| )) | ||
| } | ||
|
|
||
| const SubMenu = ({ mainMenu, mainMenuItems, onToggleSubMenu }) => { | ||
| const menu = mainMenu.slice(0) | ||
| menu.splice(0, mainMenuItems) | ||
|
|
||
| const items = menu.map((menuItem, index) => ( | ||
| <li key={index}> | ||
| <Link to={menuItem.path}>{menuItem.title}</Link> | ||
| </li> | ||
| )) | ||
|
|
||
| return ( | ||
| <> | ||
| {items} | ||
| {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */} | ||
| <div | ||
| className={style.subMenuOverlay} | ||
| role="button" | ||
| tabIndex={0} | ||
| onClick={onToggleSubMenu} | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const menuIcon = `M4 34H40V30H4V34ZM4 24H40V20H4V24ZM4 10V14H40V10H4Z` | ||
| const toggleIcon = `M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22 | ||
| 3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7 | ||
| 13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z` | ||
|
|
||
| const Menu = ({ | ||
| mainMenu, | ||
| mainMenuItems, | ||
| menuMoreText, | ||
| isMobileMenuVisible, | ||
| isSubMenuVisible, | ||
| onToggleMobileMenu, | ||
| onToggleSubMenu, | ||
| onChangeTheme, | ||
| }) => { | ||
| const isSubMenu = !(mainMenuItems >= mainMenu.length) && mainMenuItems > 0 | ||
|
|
||
| return ( | ||
| <> | ||
| <div className={style.mobileMenuContainer}> | ||
| <> | ||
| {isMobileMenuVisible ? ( | ||
| <> | ||
| {/* eslint-enable */} | ||
| <ul className={style.mobileMenu}> | ||
| <MainMenu mainMenu={mainMenu} isMobileMenu /> | ||
| </ul> | ||
| {/* eslint-disable */} | ||
| <div | ||
| onClick={onToggleMobileMenu} | ||
| className={style.mobileMenuOverlay} | ||
| /> | ||
| </> | ||
| ) : null} | ||
| <button | ||
| className={style.menuTrigger} | ||
| style={{ color: 'inherit' }} | ||
| onClick={onToggleMobileMenu} | ||
| type="button" | ||
| > | ||
| <Icon style={{ cursor: 'pointer' }} size={24} d={menuIcon} /> | ||
| </button> | ||
| </> | ||
| </div> | ||
| <div className={style.desktopMenuContainer}> | ||
| <ul className={style.menu}> | ||
| <MainMenu mainMenu={mainMenu} mainMenuItems={mainMenuItems} /> | ||
| {isSubMenu ? ( | ||
| <> | ||
| <button | ||
| className={style.subMenuTrigger} | ||
| onClick={onToggleSubMenu} | ||
| type="button" | ||
| > | ||
| {menuMoreText || 'Menu'}{' '} | ||
| <span className={style.menuArrow}>></span> | ||
| </button> | ||
| {isSubMenuVisible ? ( | ||
| <ul className={style.subMenu}> | ||
| <SubMenu | ||
| mainMenu={mainMenu} | ||
| mainMenuItems={mainMenuItems} | ||
| onToggleSubMenu={onToggleSubMenu} | ||
| /> | ||
| </ul> | ||
| ) : null} | ||
| </> | ||
| ) : null} | ||
| </ul> | ||
| </div> | ||
| <button | ||
| className={style.themeToggle} | ||
| onClick={onChangeTheme} | ||
| type="button" | ||
| > | ||
| <Icon style={{ cursor: 'pointer' }} size={24} d={toggleIcon} /> | ||
| </button> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| Menu.propTypes = { | ||
| mainMenu: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| path: PropTypes.string, | ||
| }), | ||
| ), | ||
| mainMenuItems: PropTypes.number, | ||
| menuMoreText: PropTypes.string, | ||
| isMobileMenuVisible: PropTypes.bool, | ||
| isSubMenuVisible: PropTypes.bool, | ||
| onToggleMobileMenu: PropTypes.func, | ||
| onToggleSubMenu: PropTypes.func, | ||
| onChangeTheme: PropTypes.func, | ||
| } | ||
|
|
||
| SubMenu.propTypes = { | ||
| mainMenu: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| path: PropTypes.string, | ||
| }), | ||
| ), | ||
| mainMenuItems: PropTypes.number, | ||
| onToggleSubMenu: PropTypes.func, | ||
| } | ||
|
|
||
| export default Menu |
Oops, something went wrong.