MenuBar.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React, {useContext} from 'react';
import { Link } from 'react-router-dom'
import { Container } from 'react-grid-system'
import logo from '../img/logo_small.svg'
import '../App.css';
import Dropdown from './Dropdown';
import { Button } from '@material-ui/core';
import IconSearch from '@material-ui/icons/Search'
import ExitToAppIcon from '@material-ui/icons/ExitToApp'
import styled from 'styled-components'
import { Store } from '../Store';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Notifications from "./Notifications.js"
import MenuList from './MenuList'

const ContainerStyled = styled(Container)`
    *{ text-decoration: none }
    display: flex;
    align-items: center;
    border-top: 1px rgba(0,0,0,.1) solid;
    padding: 5px;
    padding-top : 10px;

`
export const ButtonStyled = styled(Button)`
    text-transform: capitalize !important;
    margin : 0 8px !important;
    font-weight : normal !important;
`

const ButtonPublicarRecurso = styled(Button)`
    font-family : 'Roboto', sans serif;
    box-shadow : none !important;
    border : 1px transparent solid;
    background-color : #ff7f00 !important;
    align-content : center;
    font-weight : 500 !important;
    text-transform: capitalize !important;
    font-stretch : expanded;
    max-width: 200 !important;
    .MuiSvgIcon-root {
        vertical-align : middle !important;
        margin-right : 5px !important;
    }
`

const IconSearchStyled = styled(IconSearch)`
  color: #16b8dd;
`
const ImageStyled = styled.img`
    height: 50px;
    width: auto;
    cursor: pointer;
    margin: 0 10px;
`

const Right = styled.span`
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin-right : 10px;
`

const Left = styled.span `
    width: 100%;
    display: inline-flex;
    align-items: center;
`

export const ButtonPubRecursoStyled = styled(Button)`
    font-weight : 500 !important;
    border : 1.5px #666 solid !important;
    color: #666;
    box-shadow: none;
    margin : 0 8px !important;
    font-weight : normal !important;
`


export default function MenuBar(props){

  const { state, dispatch } = useContext(Store)

  const menuSobre = [
    { name: "Sobre a Plataforma", href: "sobre" },
    { name: "Portais Parceiros", href: "sobre#portaisparceiros" },
    { name: "Termos de Uso", href: "termos" },
    { name: "Contato", href: "contato" }
  ]

  const menuAjuda = [
    { name: "Central de Ajuda", href: "ajuda"},
    { name: "Publicando Recursos", href: "publicando-recurso"},
    { name: "Encontrando Recursos", href: "encontrando-recurso"},
    { name: "Participando da Rede", href: "participando-da-rede"},
    { name: "Gerenciando a Conta", href: "gerenciando-conta"}
  ]

  const minhaArea = [
      { name: "Perfil e Atividades", href: "/perfil", value : '0'},
      { name: "Recursos Publicados", href: "/perfil", value : '1'},
      { name: "Favoritos", href: "/perfil", value : '2'},
      { name: "Coleções", href: "/perfil", value : '3'},
      { name: "Rede", href: "/perfil", value : '4'},
      { name: "Configurações", href: "/editarperfil"},
  ]

  return(
    <ContainerStyled fluid={true} >
      <Left>
        <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
        <Dropdown name="Sobre" items={menuSobre}/>
        <Dropdown name="Ajuda" items={menuAjuda}/>
        <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
            <ButtonStyled >Educação Conectada</ButtonStyled>
        </a>
        {/*<Link to="/loja">
            <ButtonStyled>Lojinha</ButtonStyled>
        </Link>*/}
        <ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled>
     </Left>
     <Right>
        {
            state.userIsLoggedIn
            ? (
                    <>
                        <div style={{boxSizing:"border-box"}}>
                            <Link to="/termos-publicar-recurso" cameFromPublishButton={true}>
                                <ButtonPublicarRecurso>
                                    <CloudUploadIcon style={{color:"white", marginLeft : "0"}}/>
                                        <span style={{color : "#fff", textAlign: "center", alignSelf : "center", fontWeight:"500"}} >
                                            PUBLICAR RECURSO
                                        </span>

                                </ButtonPublicarRecurso>
                            </Link>
                        </div>

                        <div>
                            <Notifications/>
                        </div>

                        <MenuList items={minhaArea}/>

                    </>
            )
            : (
                    <React.Fragment>
                        <ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
                        <ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{color:"#00bcd4"}}/>Entrar</ButtonStyled>
                        <ButtonStyled onClick={props.openSignUp}>Cadastre-se</ButtonStyled>
                    </React.Fragment>
            )
        }

     </Right>
    </ContainerStyled>
  );
}