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

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

import { createElement } from 'react';
import styled from 'styled-components';

/**
 * @file index.tsx
 *
 * @fileoverview Main navigation for the website / header.
 */
const StyledNavblock = styled.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.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 (createElement(StyledNavblock, { "data-testid": "navbar" },
        createElement(StyledContainer, null, children)));
};

export { Navbar };