jobiqo-cl/lib/src/components/03-molecules/03-layout/01-header/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);

/**
 * @file index.tsx
 *
 * @fileoverview Main navigation for the website / header.
 */
const StyledNavblock = styled__default.div `
  width: 100%;
  border-bottom-width: ${props => props.theme.navigation.borderWidth};
  border-bottom-style: ${props => props.theme.navigation.borderStyle};
  border-bottom-color: ${props => props.theme.navigation.borderColor};
  box-shadow: ${props => props.theme.navigation.boxShadow};
  background: ${props => props.theme.navigation.background};

  img {
    max-height: ${props => props.theme.navigation.logoMaxHeight};
    width: auto;
  }

  a {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
`;
const StyledContainer = styled__default.div `
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0px auto;
  padding: ${props => props.theme.navigation.paddingMobile};
  ${props => props.theme.mediaQueries.small} {
    padding: ${props => props.theme.navigation.padding};
  }
  max-width: ${props => props.theme.navigation.maxWidth
    ? props.theme.layout.maxWidth[props.theme.navigation.maxWidth]
    : 'none'};
  position: relative;
  z-index: 2;
  @media (min-width: ${props => props.theme.layout.maxWidth}) {
    flex-direction: row;
  }
`;
/**
 * Main site navigation / header. Should be used to include the main navigation for the site and
 * branding of the website.
 */
const Navbar = ({ children }) => {
    return (React.createElement(StyledNavblock, { "data-testid": "navbar" },
        React.createElement(StyledContainer, null, children)));
};

exports.Navbar = Navbar;