@os-design/website/lib/Navigation/NavigationMenu.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const core_1 = require("@emotion/core");
const utils_1 = require("@os-design/utils");
const react_1 = __importDefault(require("react"));
const styled_1 = __importDefault(require("@os-design/styled"));
const resetUl_1 = __importDefault(require("../utils/resetUl"));
/**
 * Sets the vertical menu on small screens.
 */
const vertical = (p) => p.direction === 'vertical' && core_1.css `
  display: flex;
  flex-direction: column;
  
  font-size: ${p.theme.sizing.large}em;
  
  // Sets the margin between children
  & > li:not(:last-of-type) {
    margin-bottom: 2em;
  }
  
  // Make links full width
  & > li > a {
    display: flex;
    width: 100%;
  }
`;
/**
 * Sets the horizontal menu on large screens.
 */
const horizontal = (p) => p.direction === 'horizontal' && core_1.css `
  display: none;

  ${utils_1.m.md} {
    display: flex;
    flex-direction: row;
    align-items: center;

    // Sets the margin between children
    & > li:not(:last-of-type) {
      margin-right: 1.2em;
    }
  }
`;
const NavigationMenuContainer = styled_1.default('ul', utils_1.omitProps(['direction'])) `
  ${resetUl_1.default};
  ${vertical}; 
  ${horizontal};
`;
const NavigationMenu = props => {
    const items = [];
    // Wrap each child in the li element and pass the darkMode prop to them
    let index = 0;
    react_1.default.Children.forEach(props.children, child => {
        const clonedChild = props.darkMode && react_1.default.isValidElement(child)
            ? react_1.default.cloneElement(child, { darkMode: true })
            : child;
        if (clonedChild) {
            items.push(react_1.default.createElement("li", { key: index }, clonedChild));
            index += 1;
        }
    });
    return (react_1.default.createElement(NavigationMenuContainer, { direction: props.direction }, items));
};
exports.default = NavigationMenu;
//# sourceMappingURL=NavigationMenu.js.map