jobiqo-cl/lib/src/components/02-atoms/08-navigation/02-mobile-menu-link/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 tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);

/**
 * @file index.tsx
 *
 * @fileoverview A styled menu link item as its displayed on mobile. Style differes from desktop as it can
 * provide a more clear active state due to the nature of touch events.
 */
const StyledMenuLink = styled__default.a `
  cursor: pointer;
  display: block;
  margin: 0;
  height: ${props => props.theme.navigation.mobile.links.height};
  line-height: ${props => props.theme.navigation.mobile.links.height};
  padding: ${props => props.theme.navigation.mobile.links.padding};
  text-transform: ${props => props.theme.navigation.mobile.links.textTransform};
  letter-spacing: ${props => props.theme.navigation.mobile.links.letterSpacing};
  text-decoration: ${props => props.theme.navigation.mobile.links.textDecoration};
  color: ${props => props.theme.navigation.mobile.links.color};
  font-size: ${props => props.theme.navigation.mobile.links.fontSize};

  &:focus,
  &:active {
    color: ${props => props.theme.navigation.mobile.links.hover.color};
    background: ${props => props.theme.navigation.mobile.links.hover.background};
  }

  &.is-active {
    color: ${props => props.theme.navigation.links.activeColor};
  }
`;
/**
 * Renders a link styled to be used as a navigation item as its displaye in mobile. The theme object will provide some basic styling for
 * the element. Use this item in the main navigation of the website. It can differ from the desktop item menu as due to the nature of touch events
 * providing a more clear "active" state can be useful.
 */
const MobileMenuLink = React.forwardRef((_a, ref) => {
    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
    return (React.createElement(StyledMenuLink, Object.assign({ ref: ref }, props), children));
});

exports.MobileMenuLink = MobileMenuLink;