Skip to content
Snippets Groups Projects
Select Git revision
  • Develop
  • master default protected
  • Develop_copy_to_implement_acessibility
  • Develop_copy_to_implement_acessibility_in_admin
  • vinicius_accessibility_from_copy
  • luis_accesibility_before_develop
  • vinicius_accessiblity
  • Fixing_bugs
  • Otimizando_Vinicius
  • Password_recovery_fix
  • fix_admin_bugs_luis
  • luis_gamefication
  • gamificacaoLucas
  • GameficationAdmin
  • fixHomeScreen
  • Fix_perfil
  • fix_remaining_bugs
  • homologa
  • centraliza-axios
  • Gamification
  • v1.2.0
  • v1.1.1
  • v1.1.0
  • V1.0.1
  • V1.0.0
  • V1.0.0-RC
26 results

MenuBar.js

Blame
  • MenuBar.js 5.98 KiB
    /*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;
    
    
    `
    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: "" },
        { 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: "Status e Conquistas", href: "/perfil", value: '1'},
          { name: "Recursos Publicados", href: "/perfil", value : '2'},
          { name: "Favoritos", href: "/perfil", value : '3'},
          { name: "Coleções", href: "/perfil", value : '4'},
          { name: "Rede", href: "/perfil", value : '5'},
          { 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>
      );
    }