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

react component library for alchemy apps

'use strict';

var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var reactTinyPopover = require('react-tiny-popover');
var Icon = require('./Icon.js');

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: center;\n"], ["\n  display: flex;\n  justify-content: center;\n"])));
var NavigationContainer = styled.div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  display: flex;\n  height: 56px;\n  align-items: center;\n\n  margin-left: 16px;\n"], ["\n  display: flex;\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"])));
var StyledPopover = styled(reactTinyPopover.Popover)(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n  z-index: 20;\n"], ["\n  z-index: 20;\n"])));
function MobileTopBar(_a) {
  var navigationMenu = _a.navigationMenu, userMenu = _a.userMenu, logo = _a.logo;
  var _b = React.useState(false), isNavigationMenuOpen = _b[0], setIsNavigationMenuOpen = _b[1];
  var _c = React.useState(false), isUserMenuOpen = _c[0], setIsUserMenuOpen = _c[1];
  return React.createElement(
    StyledTopBar,
    null,
    React.createElement(
      TopbarContainer,
      null,
      React.createElement(NavigationContainer, null, navigationMenu ? React.createElement(
        StyledPopover,
        { isOpen: isNavigationMenuOpen, positions: ["bottom"], onClickOutside: function() {
          return setIsNavigationMenuOpen(false);
        }, content: function() {
          return React.createElement("div", null, navigationMenu);
        } },
        React.createElement(
          "button",
          { onClick: function() {
            return setIsNavigationMenuOpen(!isNavigationMenuOpen);
          } },
          React.createElement(Icon, { type: "Menu" })
        )
      ) : null),
      React.createElement(StyledLogoContainer, null, logo),
      React.createElement(UserMenuContainer, null, userMenu ? React.createElement(
        StyledPopover,
        { isOpen: isUserMenuOpen, positions: ["bottom"], onClickOutside: function() {
          return setIsUserMenuOpen(false);
        }, content: function() {
          return React.createElement("div", null, userMenu);
        } },
        React.createElement(
          "button",
          { onClick: function() {
            return setIsUserMenuOpen(!isUserMenuOpen);
          } },
          React.createElement(Icon, { type: "Profile" })
        )
      ) : null)
    )
  );
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

module.exports = MobileTopBar;