nice-ui
Version:
React design system, components, and utilities
90 lines (89 loc) • 3.67 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SubNav = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const rxjs_1 = require("rxjs");
const operators_1 = require("rxjs/operators");
const useObservable_1 = require("react-use/lib/useObservable");
const useWindowSize_1 = require("react-use/lib/useWindowSize");
const iconista_1 = require("iconista");
const constants_1 = require("../../constants");
const BasicButton_1 = require("../../2-inline-block/BasicButton");
const showBorder$ = (0, rxjs_1.fromEvent)(window, 'scroll').pipe((0, operators_1.map)(() => window.scrollY), (0, operators_1.map)((scroll) => scroll > 10), (0, operators_1.distinctUntilChanged)(), (0, operators_1.share)());
const blockClass = (0, nano_theme_1.rule)({
bxz: 'border-box',
pos: 'sticky',
top: constants_1.NiceUiSizes.TopNavHeight + 'px',
h: constants_1.NiceUiSizes.TopNavHeight + 'px',
maxH: constants_1.NiceUiSizes.TopNavHeight + 'px',
z: 10,
backdropFilter: 'saturate(160%) blur(13px)',
// bgc: 'rgba(255,255,255,.7)',
bdb: '1px solid transparent',
pad: '0 32px',
minH: '64px',
'@media only screen and (max-width: 600px)': {
pad: '0px 16px',
},
});
const wrapClass = (0, nano_theme_1.rule)({
maxW: constants_1.NiceUiSizes.SiteWidth + 'px',
w: '100%',
h: constants_1.NiceUiSizes.TopNavHeight + 'px',
maxH: constants_1.NiceUiSizes.TopNavHeight + 'px',
mar: 'auto auto -1px',
bdb: '1px solid transparent',
});
const splitClass = (0, nano_theme_1.rule)({
d: 'flex',
justifyContent: 'space-between',
bxz: 'border-box',
w: '100%',
h: constants_1.NiceUiSizes.TopNavHeight + 'px',
maxH: constants_1.NiceUiSizes.TopNavHeight + 'px',
});
const backClass = (0, nano_theme_1.rule)({
d: 'flex',
alignItems: 'center',
marr: '-2px',
});
const leftClass = (0, nano_theme_1.rule)({
d: 'flex',
alignItems: 'center',
h: constants_1.NiceUiSizes.TopNavHeight + 'px',
maxH: constants_1.NiceUiSizes.TopNavHeight + 'px',
});
const backButtonWrapperClass = (0, nano_theme_1.rule)({
d: 'flex',
alignItems: 'center',
});
const backButtonClass = (0, nano_theme_1.rule)({
marl: '-12px',
marr: '8px',
});
const SubNav = ({ noBorder, right, backTo, children }) => {
const showBorder = (0, useObservable_1.default)(showBorder$, false);
const { width } = (0, useWindowSize_1.default)();
const showBorder2 = showBorder || width < 800;
const style = {};
const wrapStyle = {
borderColor: noBorder ? 'transparent' : showBorder2 ? 'transparent' : 'rgba(0,0,0,.08)',
};
if (showBorder2) {
style.borderBottom = '1px solid rgba(0,0,0,.08)';
}
let content = children;
if (!!backTo) {
content = (React.createElement("div", { className: backButtonWrapperClass, style: { marginLeft: width < 600 ? 0 : undefined } },
React.createElement(BasicButton_1.default, { key: backTo, noOutline: true, to: backTo, round: true, size: 40, className: backButtonClass },
React.createElement(iconista_1.default, { set: "ibm_16", icon: "arrow--left", width: 16, height: 16 })),
content));
}
return (React.createElement("div", { className: blockClass, style: style },
React.createElement("div", { className: wrapClass, style: wrapStyle },
React.createElement("div", { className: splitClass },
React.createElement("div", { className: leftClass }, content),
!!right && React.createElement("div", { className: backClass }, right)))));
};
exports.SubNav = SubNav;