alchemy-tech-ui
Version:
react component library for alchemy apps
27 lines (24 loc) • 2.53 kB
JavaScript
import { __makeTemplateObject } from 'tslib';
import styled from 'styled-components';
import React from 'react';
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: start;\n"], ["\n display: flex;\n justify-content: start;\n"])));
var NavigationContainer = styled.div(templateObject_4 || (templateObject_4 = __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 = __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;
export { TopBar as default };