feat: 💄 hide social links in top bar for mobile, show them on about page

package.json

@@ -12,6 +12,7 @@
     "@reach/visually-hidden": "^0.1.4",
     "@rebass/grid": "^6.1.0",
     "@sindresorhus/slugify": "^0.8.0",
+    "@styled-system/core": "^5.1.2",
     "axios": "^0.18.1",
     "date-fns": "^2.4.1",
     "disqus-react": "^1.0.7",

src/components/display.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+import { system } from '@styled-system/core'
+
+export let display = system({ display: true })
+
+export let Display = styled.div(display)

src/components/header.js

@@ -5,8 +5,10 @@ import styled from 'styled-components/macro'
 import { Flex } from '@rebass/grid'
 import VisuallyHidden from '@reach/visually-hidden'
 
-import Navigation from './navigation'
-import SocialLinks from './social-links'
+import { Navigation } from './navigation'
+import { SocialLinks } from './social-links'
+import { Display } from './display'
+import { media } from '../utils'
 
 let H = styled.header`
   background: ${({ theme }) => theme.colors.pale};
@@ -17,7 +19,11 @@ let StyledNavigation = styled(Navigation)`
   align-self: flex-end;
   position: relative;
   bottom: -11px;
-  margin-left: 20px;
+
+  margin-left: 10px;
+  ${media.tablet`
+    margin-left: 20px;
+  `};
 `
 
 let Header = () => {
@@ -34,7 +40,12 @@ let Header = () => {
   `)
 
   return (
-    <Flex as={H} p="10px 20px" justifyContent="space-between" alignItems="center">
+    <Flex
+      as={H}
+      p="10px 20px"
+      justifyContent="space-between"
+      alignItems="center"
+    >
       <Link to="/" title="Nikita Kirsanov">
         <h1 style={{ margin: 0, padding: 0, fontSize: 0, border: 'none' }}>
           <Img style={{ borderRadius: '50%' }} {...avatar.childImageSharp} />
@@ -45,7 +56,9 @@ let Header = () => {
 
       <StyledNavigation />
 
-      <SocialLinks />
+      <Display display={['none', 'block']}>
+        <SocialLinks />
+      </Display>
     </Flex>
   )
 }

src/components/navigation.js

@@ -41,7 +41,7 @@ let NavLink = ({ to, className, ...props }) => (
   />
 )
 
-let Navigation = ({ className }) => (
+export let Navigation = ({ className }) => (
   <nav className={className}>
     <Flex as="ul" m={0} css={{ listStyle: 'none' }}>
       <MenuItem>
@@ -62,5 +62,3 @@ let Navigation = ({ className }) => (
     </Flex>
   </nav>
 )
-
-export default Navigation

src/components/social-links.js

@@ -22,7 +22,8 @@ let SocialItem = styled.li`
     }
   }
 `
-let SocialLinks = () => (
+
+export let SocialLinks = () => (
   <Flex as="ul" m="0" style={{ listStyle: 'none' }}>
     {[
       {
@@ -31,7 +32,7 @@ let SocialLinks = () => (
         icon: TwitterIcon,
       },
       { href: 'https://github.com/kitos', text: 'GitHub', icon: GitHubIcon },
-      { href: '/blog/rss.xml', text: 'RSS Feads', icon: RSSIcon },
+      { href: '/blog/rss.xml', text: 'RSS Feed', icon: RSSIcon },
     ].map(({ href, text, icon: I }) => (
       <SocialItem key={href}>
         <a href={href} title={text} target="_blank" rel="noreferrer noopener">
@@ -42,6 +43,3 @@ let SocialLinks = () => (
     ))}
   </Flex>
 )
-
-export { SocialLinks }
-export default SocialLinks

src/pages/index.js

@@ -2,7 +2,8 @@ import React from 'react'
 import { graphql } from 'gatsby'
 import { Box, Flex } from '@rebass/grid'
 
-import { SEO, Shield } from '../components'
+import { SEO, Shield, SocialLinks } from '../components'
+import { Display } from '../components/display'
 
 const IndexPage = ({ data: { about } }) => (
   <>
@@ -20,6 +21,10 @@ const IndexPage = ({ data: { about } }) => (
       })}
     </Flex>
 
+    <Display display={['block', 'none']}>
+      <SocialLinks />
+    </Display>
+
     <div
       dangerouslySetInnerHTML={{
         __html: