alchemy-tech-ui
Version:
react component library for alchemy apps
60 lines (57 loc) • 3.78 kB
JavaScript
import { __makeTemplateObject } from 'tslib';
import React, { useState } from 'react';
import styled from 'styled-components';
import { Popover } from 'react-tiny-popover';
import Icon from './Icon.mjs';
var StyledTopBar = styled.div(templateObject_1 || (templateObject_1 = __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 = __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 = __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 = __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 = __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(Popover)(templateObject_6 || (templateObject_6 = __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 = useState(false), isNavigationMenuOpen = _b[0], setIsNavigationMenuOpen = _b[1];
var _c = 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;
export { MobileTopBar as default };