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

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

import React__default from 'react';
import styled from 'styled-components';
import { useScrollYPosition } from '../../../../hooks/useScrollPosition.js';

/**
 * @file index.tsx
 *
 * @fileoverview Main navigation for the website / header.
 */
const StyledFixedNavblock = 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};

  ${props => props.theme.mediaQueries.small} {
    border-width: 0;
    box-shadow: none;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;

    ${props => props.scrollPosition > props.theme.navigation.fixed.scrollingShowHeader
    ? `
    position: fixed;
    border-bottom-width: ${props.theme.navigation.borderWidth};
  border-bottom-style: ${props.theme.navigation.borderStyle};
  border-bottom-color: ${props.theme.navigation.borderColor};
  box-shadow: ${props.theme.navigation.boxShadow};
  background: ${props.theme.navigation.background};
  `
    : `
      a {
        color: ${props.theme.navigation.fixed.linksColor};
      }
      `};
  }

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

  a {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
`;
const StyledFixedNavContainer = 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 FixedNavbar = ({ children }) => {
    const scrollY = useScrollYPosition();
    return (React__default.createElement(StyledFixedNavblock, { scrollPosition: scrollY, "data-testid": "fixed-navbar" },
        React__default.createElement(StyledFixedNavContainer, null, children)));
};

export { FixedNavbar };