{"size": 1237, "ext": "js", "max_stars_repo_path": "src/components/menu.js", "max_stars_repo_name": "globalpix/learn-point", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/menu.js", "max_issues_repo_name": "globalpix/learn-point", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/menu.js", "max_forks_repo_name": "globalpix/learn-point", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.2786885246, "max_line_length": 68, "alphanum_fraction": 0.6378334681}
import React from "react"
import { Link } from "gatsby"
import styled from "styled-components"

const Menu = () => {
    return ( 
      <Content>
          <Container>
            <TitleHead>Bling</TitleHead>       
            <SubTitle to="/bling/">Início</SubTitle>
            <SubTitle to="/bling/cadastros">Cadastros</SubTitle>
            <SubTitle to="/bling/suprimentos">Suprimentos</SubTitle>
            <SubTitle to="/bling/vendas">Vendas</SubTitle>
            <SubTitle to="/bling/financas">Finanças</SubTitle>
          </Container>
          
      </Content>            
        
      )
}

const Content = styled.aside`
background:#335566;
position:fixed;
flex:1;
display: flex;
flex-direction:column;
width:16vw;
padding:0.5em 0.5em 0 0.5em;
min-height:70vh;
margin-bottom:2vh;
margin-top:10vh;
overflow:auto;
height:100%;
`
const Container = styled.nav`
width:100%;
width:14vw;

`

const TitleHead = styled.div`
color:#b1d9ed;
width:100%;
padding:0.1em 0.2em;
text-transform:uppercase;
margin:0;
`
const SubTitle = styled(props => <Link {...props} />)`
display:block;
color:#b1d9ed;
font-size:0.8em;
margin:0.2em 1em;
text-transform:uppercase;
text-decoration:none;
:hover{
  color:#ffffff;
},
`

export default Menu