style: Adjust Header's padding below 380px (#162)

BeniCheni · ZYSzys · commit b18d235cc98a · 2019-03-04T10:51:39.000+08:00
While checking out responsive styles, observed a style bug that below 380px, the header nav items would display in an odd layout, which would cause UX issue like the hamburger menu wouldn’t open. Tried out this PR to: * use `emotion` for styles in header's JSX so that it can support existing style code and hook into media query * use padding 0 up to 380px, where the original problemetcal breakpoint started to occur * update test snapshot. * ~~update code format with "format" script.~~ ##### Before Fix <img width="377" alt="screen shot 2019-03-02 at 9 33 39 pm" src="https://user-images.githubusercontent.com/6441326/53690219-6db9d600-3d34-11e9-95c7-41077e4c211d.png"> ##### With Fix @ 320px breakpoint (common like the legacy iPhone 5) <img width="326" alt="screen shot 2019-03-02 at 9 57 10 pm" src="https://user-images.githubusercontent.com/6441326/53690323-27657680-3d36-11e9-9eec-cc81873125ae.png">
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,44 +1,44 @@
-import { Link } from 'gatsby'
-import React from 'react'
-import logo from '../images/logo.svg'
+import { Link } from 'gatsby';
+import React from 'react';
+import { css } from 'emotion';
+import logo from '../images/logo.svg';
 
 const Header = () => (
   <nav className="nav">
     <ul
-      style={{
-        margin: '0 auto',
-        padding: '0 4.8rem',
-        display: 'flex',
-        alignItems: 'center',
-        listStyle: 'none',
-      }}
+      css={css`
+        @media (max-width: 380px) {
+          padding: 0;
+        }
+        margin: 0 auto;
+        padding: 0 4.8rem;
+        display: flex;
+        align-items: center;
+        list-style: none;
+      `}
     >
       <li>
         <Link to="/" style={{ display: 'block' }}>
           <img src={logo} alt="Node.js" className="nav__logo" />
         </Link>
       </li>
-
       <li className="nav__tabs">
         <a target="_blank" href="https://nodejs.org/en/download/">
           Download
         </a>
       </li>
-
       <li className="nav__tabs">
         <a target="_blank" href="https://nodejs.org/en/docs/">
           API Docs
         </a>
       </li>
-
       <li className="nav__tabs">
         <a target="_blank" href="https://github.com/nodejs/nodejs.dev">
           GitHub
         </a>
       </li>
-
     </ul>
   </nav>
-)
+);
 
-export default Header
+export default Header;
diff --git a/src/components/navigation-item.tsx b/src/components/navigation-item.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 const NavigationItem = ({ isDone, isActive, slug, title, onClick }: Props) => {
   const element = useRef<HTMLAnchorElement | null>(null);
-  
+
   const handleRef = (ref?: HTMLAnchorElement | null) => {
     if (ref && isActive) {
       element.current = ref;
diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap
@@ -5,15 +5,7 @@ exports[`Tests for Header component renders correctly 1`] = `
   className="nav"
 >
   <ul
-    style={
-      Object {
-        "alignItems": "center",
-        "display": "flex",
-        "listStyle": "none",
-        "margin": "0 auto",
-        "padding": "0 4.8rem",
-      }
-    }
+    css="css-k9ksbg"
   >
     <li>
       <a
