From f9a112b43e4e7fb200760d6f41f9a83e4a68ec67 Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Fri, 4 Oct 2019 18:00:17 +0300 Subject: [PATCH] feat: add toggle nav (#36956) * feat: re-add toggle menu * Update client/src/components/Header/components/universalNav.css Co-Authored-By: Oliver Eyton-Williams * Update client/src/components/Header/components/universalNav.css Co-Authored-By: Oliver Eyton-Williams * Update client/src/components/Header/components/universalNav.css Co-Authored-By: Oliver Eyton-Williams * fix: fix lint error --- client/src/components/Header/Header.test.js | 20 +-- .../Header/components/MenuButton.js | 26 ++++ .../components/Header/components/NavLinks.js | 20 ++- .../Header/components/UniversalNav.js | 37 +++-- .../Header/components/universalNav.css | 132 +++++++++++++----- client/src/components/Header/index.js | 61 ++++++-- .../components/search/searchBar/searchbar.css | 45 +++--- 7 files changed, 250 insertions(+), 91 deletions(-) create mode 100644 client/src/components/Header/components/MenuButton.js diff --git a/client/src/components/Header/Header.test.js b/client/src/components/Header/Header.test.js index 3797dd3515..79ab0ec124 100644 --- a/client/src/components/Header/Header.test.js +++ b/client/src/components/Header/Header.test.js @@ -2,19 +2,17 @@ import React from 'react'; import ShallowRenderer from 'react-test-renderer/shallow'; import TestRenderer from 'react-test-renderer'; - -import Header from './'; +import { UniversalNav } from './components/UniversalNav'; import NavLinks from './components/NavLinks'; -describe('
', () => { +describe('', () => { it('renders to the DOM', () => { const shallow = new ShallowRenderer(); - shallow.render(
); + shallow.render(); const result = shallow.getRenderOutput(); expect(result).toBeTruthy(); }); }); - describe('', () => { const root = TestRenderer.create().root; const aTags = root.findAllByType('a'); @@ -25,17 +23,23 @@ describe('', () => { return acc; }, []); - const expectedLinks = ['/', '/portfolio']; + const expectedLinks = ['/learn', '/', '/portfolio']; it('renders to the DOM', () => { expect(root).toBeTruthy(); }); - it('has 3 a tags', () => { + it('has 3 links', () => { expect(aTags.length === 3).toBeTruthy(); }); - it('has link to portfolio', () => { + it('has links to learn, main, and portfolio', () => { // checks if all links in expected links exist in links expect(expectedLinks.every(elem => links.indexOf(elem) > -1)).toBeTruthy(); }); }); + +const UniversalNavProps = { + displayMenu: false, + menuButtonRef: {}, + toggleDisplayMenu: function() {} +}; diff --git a/client/src/components/Header/components/MenuButton.js b/client/src/components/Header/components/MenuButton.js new file mode 100644 index 0000000000..1b6667aede --- /dev/null +++ b/client/src/components/Header/components/MenuButton.js @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const MenuButton = React.forwardRef((props, ref) => { + return ( + + ); +}); + +MenuButton.displayName = 'MenuButton'; +MenuButton.propTypes = { + className: PropTypes.string, + displayMenu: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired +}; + +export default MenuButton; diff --git a/client/src/components/Header/components/NavLinks.js b/client/src/components/Header/components/NavLinks.js index 245dddedb5..535b9d8908 100644 --- a/client/src/components/Header/components/NavLinks.js +++ b/client/src/components/Header/components/NavLinks.js @@ -1,16 +1,25 @@ import React from 'react'; import { Link } from '../../helpers'; -export function NavLinks() { +import PropTypes from 'prop-types'; + +const propTypes = { + displayMenu: PropTypes.bool +}; + +function NavLinks({ displayMenu }) { return (
-
    -
  • - Projects -
    • +
    • Light
      • +
    • + Projects +
    • Portfolio
      • @@ -19,5 +28,6 @@ export function NavLinks() { ); } +NavLinks.propTypes = propTypes; NavLinks.displayName = 'NavLinks'; export default NavLinks; diff --git a/client/src/components/Header/components/UniversalNav.js b/client/src/components/Header/components/UniversalNav.js index ce6230d4c0..53ac87e344 100644 --- a/client/src/components/Header/components/UniversalNav.js +++ b/client/src/components/Header/components/UniversalNav.js @@ -1,27 +1,48 @@ import React from 'react'; +import PropTypes from 'prop-types'; + import { Link } from '../../helpers'; import NavLogo from './NavLogo'; import SearchBar from '../../search/searchBar/SearchBar'; +import MenuButton from './MenuButton'; import NavLinks from './NavLinks'; import './universalNav.css'; -export function UniversalNav() { - return ( -