alchemy-tech-ui/dist/components/TopBar.js

react component library for alchemy apps

'use strict';

var tslib = require('tslib');
var styled = require('styled-components');
var React = require('react');

var StyledTopBar = styled.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px,\n    rgba(17, 17, 26, 0.05) 0px 8px 32px;\n"], ["\n  display: flex;\n  justify-content: center;\n  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px,\n    rgba(17, 17, 26, 0.05) 0px 8px 32px;\n"])));
var TopbarContainer = styled.div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: 56px;\n\n  z-index: 10;\n  position: relative;\n"], ["\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: 56px;\n\n  z-index: 10;\n  position: relative;\n"])));
var StyledLogoContainer = styled.div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n"], ["\n  display: flex;\n  justify-content: start;\n"])));
var NavigationContainer = styled.div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  height: 56px;\n  align-items: center;\n\n  margin-left: 16px;\n"], ["\n  display: flex;\n  justify-content: center;\n  height: 56px;\n  align-items: center;\n\n  margin-left: 16px;\n"])));
var UserMenuContainer = styled.div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n  display: flex;\n  height: 56px;\n  align-items: center;\n  justify-content: end;\n  margin-right: 16px;\n"], ["\n  display: flex;\n  height: 56px;\n  align-items: center;\n  justify-content: end;\n  margin-right: 16px;\n"])));
function TopBar(_a) {
  var navigationMenu = _a.navigationMenu, userMenu = _a.userMenu, logo = _a.logo, _b = _a.maxWidth, maxWidth = _b === void 0 ? "auto" : _b;
  return React.createElement(
    StyledTopBar,
    null,
    React.createElement(
      TopbarContainer,
      { style: { maxWidth: maxWidth } },
      React.createElement(StyledLogoContainer, null, logo),
      React.createElement(NavigationContainer, null, navigationMenu ? React.createElement("div", null, navigationMenu) : null),
      React.createElement(UserMenuContainer, null, userMenu ? React.createElement("div", null, userMenu) : null)
    )
  );
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

module.exports = TopBar;