jobiqo-cl/lib/es/src/components/02-atoms/08-navigation/01-menu-link/index.js

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

import { __rest } from '../../../../../node_modules/tslib/tslib.es6.js';
import { forwardRef, createElement } from 'react';
import styled from 'styled-components';

/**
 * @file index.tsx
 *
 * @fileoverview A styled menu link item.
 */
const StyledMenuLink = styled.a `
  cursor: pointer;
  text-transform: ${props => props.theme.navigation.links.textTransform};
  text-decoration: ${props => props.theme.navigation.links.textDecoration};
  letter-spacing: ${props => props.theme.navigation.links.letterSpacing};
  color: ${props => props.theme.navigation.links.color};
  margin-right: ${props => props.theme.navigation.links.marginRight};
  font-size: ${props => props.theme.navigation.links.fontSize};

  &.is-active {
    color: ${props => props.theme.navigation.links.activeColor};
  }
`;
/**
 * Renders a link styled to be used as a navigation item. The theme object will provide some basic styling for
 * the element. Use this item in the main navigation of the website. it can also be used elsewhere as long as it needs to keep consistency
 * wit the main menu navigation which is the main purpose of the style of the component.
 */
const MenuLink = forwardRef((_a, ref) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    return (createElement(StyledMenuLink, Object.assign({ ref: ref }, props), children));
});

export { MenuLink };