feat: add responsive header (#33)

Co-authored-by: Stephan Meijer <stephan.meijer@gmail.com>

Author: marcosvega91

README.md

@@ -1,7 +1,9 @@
 # Testing-Playground ([demo][playground])
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 **Playground for [testing-library/dom]**
@@ -103,6 +105,7 @@ Thanks goes to these people ([emoji key][emojis]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

src/components/Header.js

@@ -10,28 +10,42 @@ const headerLinks = [
 
 function Header() {
   return (
-    <nav className="flex items-center justify-between bg-gray-900 px-8 text-white w-full h-full">
-      <div className="flex items-center flex-shrink-0 text-white">
-        <a className="title" href="/">
-          <h1 className="font-light text-xl tracking-tight flex space-x-4 items-center justify-start">
-            <img width={24} height={24} src={icon} />️{' '}
-            <span>Testing Playground</span>
-          </h1>
-        </a>
-      </div>
+    <nav className="text-white w-full h-20 md:h-16">
+      <div className="flex items-center justify-between bg-gray-900 px-8 h-10 md:h-16">
+        <div className="flex items-center flex-shrink-0 text-white">
+          <a className="title" href="/">
+            <h1 className="font-light text-xl tracking-tight flex space-x-4 items-center justify-start">
+              <img width={24} height={24} src={icon} />️{' '}
+              <span>Testing Playground</span>
+            </h1>
+          </a>
+        </div>
+
+        <div className="flex items-center space-x-8">
+          <a
+            href="https://github.com/smeijer/testing-playground"
+            className="hover:underline"
+          >
+            GitHub
+          </a>
+
+          <div className="border-r border-gray-600 mx-4 h-8 hidden md:block" />
 
-      <div>
-        <a
-          href="https://github.com/smeijer/testing-playground"
-          className="hover:underline"
-        >
-          GitHub
-        </a>
+          {headerLinks.map((x) => (
+            <a
+              className="hover:underline hidden md:block"
+              key={x.title}
+              href={x.url}
+            >
+              {x.title}
+            </a>
+          ))}
+        </div>
       </div>
 
-      <div className="flex space-x-8">
+      <div className="flex justify-between sm:justify-end items-center bg-gray-800 px-8 h-10 md:hidden space-x-8">
         {headerLinks.map((x) => (
-          <a className="hover:underline" key={x.title} href={x.url}>
+          <a className="hover:underline truncate" key={x.title} href={x.url}>
             {x.title}
           </a>
         ))}

src/components/Layout.js

@@ -5,7 +5,7 @@ import Footer from './Footer';
 function Layout({ children }) {
   return (
     <div className="flex flex-col h-screen">
-      <div className="h-16 mb-8 flex-none">
+      <div className="mb-8 flex-none">
         <Header />
       </div>