Skip to content
Permalink
Browse files

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

  • Loading branch information
kitos committed Oct 16, 2019
1 parent 3ab3533 commit 5e5316565de8e43b4efb136997a7a2b404578e8c
Showing with 35 additions and 14 deletions.
  1. +1 −0 package.json
  2. +6 −0 src/components/display.js
  3. +18 −5 src/components/header.js
  4. +1 −3 src/components/navigation.js
  5. +3 −5 src/components/social-links.js
  6. +6 −1 src/pages/index.js
@@ -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",
@@ -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)
@@ -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>
)
}
@@ -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
@@ -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
@@ -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:

0 comments on commit 5e53165

Please sign in to comment.
You can’t perform that action at this time.