jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
46 lines (43 loc) • 2.13 kB
JavaScript
import { __rest } from '../../../../../node_modules/tslib/tslib.es6.js';
import React__default from 'react';
import styled from 'styled-components';
import { CloseIcon } from '../../../../icons/Close.js';
/**
* @file index.tsx
*
* @fileoverview Shows a mobile navigation on a sidebar.
*/
const StyledNav = styled.ul `
padding: 0;
list-style: none;
margin: 0;
`;
const StyledMobileBranding = styled.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.img `
max-height: ${props => props.theme.navigation.mobile.sidenav.branding.logoMaxHeight};
`;
const StyledIcon = styled.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 = __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(CloseIcon, { height: "30", width: "30", title: "Close" })))),
React__default.createElement("nav", { id: "global-nav", "aria-label": "Main navigation" },
React__default.createElement(StyledNav, null, children))));
};
export { MobileSideNav, StyledIcon, StyledLogo, StyledMobileBranding };