Respond to issue comments and remove any changes from the existing Nav

Author: Simon Reilly

src/components/header/components/Nav.tsx

@@ -1,22 +1,39 @@
-import React, { HTMLProps } from 'react';
-import NavTitle from './NavTitle';
-import NavItemList from './NavItemList';
-import NavMenuClose from './NavMenuClose';
-import NavContainer from './NavContainer';
+import React, { HTMLProps, useContext } from 'react';
+import classNames from 'classnames';
+import { Container } from '../../layout';
+import { Close as CloseIcon } from '../../icons';
+import HeaderContext, { IHeaderContext } from '../HeaderContext';
 
 const Nav: React.FC<HTMLProps<HTMLDivElement>> = ({
   className,
   children,
+  onClick,
   open,
   ...rest
-}) => (
-  <NavContainer open={open} className={className} {...rest}>
-    <NavTitle>
-      <span>Menu</span>
-      <NavMenuClose />
-    </NavTitle>
-    <NavItemList>{children}</NavItemList>
-  </NavContainer>
-);
+}) => {
+  const { menuOpen, toggleMenu } = useContext<IHeaderContext>(HeaderContext);
+
+  return (
+    <nav
+      className={classNames(
+        'nhsuk-header__navigation',
+        { 'js-show': open !== undefined ? open : menuOpen },
+        className,
+      )}
+      {...rest}
+    >
+      <Container>
+        <p className="nhsuk-header__navigation-title">
+          <span>Menu</span>
+          <button className="nhsuk-header__navigation-close" type="button" onClick={toggleMenu}>
+            <CloseIcon />
+            <span className="nhsuk-u-visually-hidden">Close menu</span>
+          </button>
+        </p>
+        <ul className="nhsuk-header__navigation-list">{children}</ul>
+      </Container>
+    </nav>
+  );
+};
 
 export default Nav;

stories/Header.stories.tsx

@@ -164,7 +164,7 @@ stories
       </Header>
     );
   })
-  .add('Custom Navigation header', () => (
+  .add('Header with custom NavMenuClose and NavItemList component', () => (
     <Header
       orgName="Anytown Anyplace"
       orgSplit="Anywhere"
@@ -184,9 +184,14 @@ stories
           <Header.NavMenuClose />
         </Header.NavTitle>
         <Header.NavItemList>
-          <Header.NavItem>
-            Link
+          <Header.NavItem href="/" mobileOnly>
+            Home
           </Header.NavItem>
+          <Header.NavItem href="/conditions">Health A-Z</Header.NavItem>
+          <Header.NavItem href="/live-well">Live Well</Header.NavItem>
+          <Header.NavItem href="/social-care-and-support">Care and support</Header.NavItem>
+          <Header.NavItem href="/news">Health news</Header.NavItem>
+          <Header.NavItem href="/service-search">Services near you</Header.NavItem>
         </Header.NavItemList>
       </Header.NavContainer>
     </Header>