jobiqo-cl/lib/src/components/04-organisms/07-navigation/01-mobile-menu/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);
var Close = require('../../../../icons/Close.js');

/**
 * @file index.tsx
 *
 * @fileoverview Shows a mobile navigation on a sidebar.
 */
const StyledNav = styled__default.ul `
  padding: 0;
  list-style: none;
  margin: 0;
`;
const StyledMobileBranding = styled__default.div `
  display: flex;
  justify-content: space-between;
  padding: ${props => props.theme.navigation.mobile.sidenav.branding.padding};
  border-bottom-width: ${props => props.theme.navigation.mobile.sidenav.branding.borderBottomWidth};
  border-bottom-color: ${props => props.theme.navigation.mobile.sidenav.branding.borderBottomColor};
  border-bottom-style: ${props => props.theme.navigation.mobile.sidenav.branding.borderBottomStyle};
`;
const StyledLogo = styled__default.img `
  max-height: ${props => props.theme.navigation.mobile.sidenav.branding.logoMaxHeight};
`;
const StyledIcon = styled__default.span `
  fill: ${props => props.theme.navigation.mobile.sidenav.iconsColor};
`;
/**
 * The mobile menu is used to show navigation information on the site.
 */
const MobileSideNav = (_a) => {
    var { children, logoUrl, sitename, onToggleNav, theme } = _a, props = tslib_es6.__rest(_a, ["children", "logoUrl", "sitename", "onToggleNav", "theme"]);
    return (React__default.createElement("div", null,
        React__default.createElement(StyledMobileBranding, { "data-testid": "mobile-menu-branding" },
            logoUrl && (React__default.createElement(StyledLogo, { src: logoUrl, alt: sitename, title: sitename })),
            React__default.createElement("button", { onClick: onToggleNav },
                React__default.createElement(StyledIcon, null,
                    React__default.createElement(Close.CloseIcon, { height: "30", width: "30", title: "Close" })))),
        React__default.createElement("nav", { id: "global-nav", "aria-label": "Main navigation" },
            React__default.createElement(StyledNav, null, children))));
};

exports.MobileSideNav = MobileSideNav;
exports.StyledIcon = StyledIcon;
exports.StyledLogo = StyledLogo;
exports.StyledMobileBranding = StyledMobileBranding;