feat(project): add mobile menu button to header

jwplayer · Apr 29, 2021 · 6576d5b · 6576d5b
1 parent c4057f3
commit 6576d5b
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 4 deletions.
diff --git a/src/components/Header/Header.test.tsx b/src/components/Header/Header.test.tsx
@@ -6,7 +6,7 @@ import Header from './Header';
 
 describe('<Header />', () => {
   test('renders header', () => {
-    const { container } = render(<Header />);
+    const { container } = render(<Header openSideBar={jest.fn()} />);
 
     expect(container).toMatchSnapshot();
   });

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -3,21 +3,26 @@ import classNames from 'classnames';
 
 import ButtonLink from '../ButtonLink/ButtonLink';
 import Logo from '../Logo/Logo';
+import Menu from '../../icons/Menu';
 
 import styles from './Header.module.scss';
 
 type TypeHeader = 'static' | 'fixed';
 
 type Props = {
   headerType?: TypeHeader;
+  openSideBar: (sideBarOpen: boolean) => void;
 };
 
-const Header: React.FC<Props> = ({ headerType = 'static' }) => {
+const Header: React.FC<Props> = ({ headerType = 'static', openSideBar }) => {
   return (
     <header className={classNames(styles.header, styles[headerType])}>
       <div className={styles.container}>
-        <div className={styles.menu}>
-          <span>Placeholder</span>
+        <div
+          className={styles.menu}
+          onClick={(sideBarOpen) => openSideBar(!sideBarOpen)}
+        >
+          <Menu />
         </div>
         <Logo src="https://cdn.jwplayer.com/images/HXyBCU5N.png" />
         <nav className={styles.nav}>
@@ -27,6 +32,7 @@ const Header: React.FC<Props> = ({ headerType = 'static' }) => {
           <ButtonLink label="Settings" to="/u" />
           {/* mock */}
         </nav>
+        <div className={styles.search}></div>
       </div>
     </header>
   );

diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -1,5 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Header /> renders header 1`] = `
+<div>
+  <header
+    class=""
+  >
+    <div>
+      <div>
+        <svg
+          class=""
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div>
+        <img
+          alt="logo"
+          src="https://cdn.jwplayer.com/images/HXyBCU5N.png"
+        />
+      </div>
+      <nav>
+        <a
+          aria-current="page"
+          class="function link() { [native code] } active"
+          href="/"
+        >
+          <span>
+            Home
+          </span>
+        </a>
+        <a
+          href="/p/:id"
+        >
+          <span>
+            Playlist
+          </span>
+        </a>
+        <a
+          href="/u"
+        >
+          <span>
+            Settings
+          </span>
+        </a>
+      </nav>
+      <div />
+    </div>
+  </header>
+</div>
+`;
+
 exports[`<Header /> renders headers 1`] = `
 <div>
   <header

diff --git a/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Layout /> renders layout 1`] = `
+<div>
+  <div>
+    <header
+      class=""
+    >
+      <div>
+        <div>
+          <svg
+            class=""
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M0 0h24v24H0V0z"
+                fill="none"
+              />
+              <path
+                d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+              />
+            </g>
+          </svg>
+        </div>
+        <div>
+          <img
+            alt="logo"
+            src="https://cdn.jwplayer.com/images/HXyBCU5N.png"
+          />
+        </div>
+        <nav>
+          <a
+            aria-current="page"
+            class="function link() { [native code] } active"
+            href="/"
+          >
+            <span>
+              Home
+            </span>
+          </a>
+          <a
+            href="/p/:id"
+          >
+            <span>
+              Playlist
+            </span>
+          </a>
+          <a
+            href="/u"
+          >
+            <span>
+              Settings
+            </span>
+          </a>
+        </nav>
+        <div />
+      </div>
+    </header>
+    <div
+      class=""
+    >
+      <div
+        class=""
+      >
+        <nav>
+          <svg
+            class=""
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </g>
+          </svg>
+        </nav>
+        <div>
+          <a
+            aria-current="page"
+            class="function link() { [native code] } active"
+            href="/"
+          >
+            <span>
+              Home
+            </span>
+          </a>
+          <a
+            aria-current="page"
+            class="function link() { [native code] } active"
+            href="/"
+          >
+            <span>
+              Test
+            </span>
+          </a>
+          <hr />
+          <a
+            aria-current="page"
+            class="function link() { [native code] } active"
+            href="/"
+          >
+            <span>
+              Settings
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;