import React from 'react';
import styled from 'styled-components';
import { Navbar } from 'react-bootstrap';
import './TopBar.scss';
import { COLORS } from '../../theme';
import { HomeButton } from './HomeButton';

const TopBar: React.FC = () => {
    return (
        <StyledNavbar collapseOnSelect expand="sm">
            <Navbar.Brand>
                <HomeButton url={`${process.env.REACT_APP_CORE_URL}`} />
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        </StyledNavbar>
    );
};

export default TopBar;

const StyledNavbar = styled(Navbar)`
    height: 60px;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: ${COLORS.TECHSOPHY_THEME};
`;
