nice-ui/lib/5-block/TopNav/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TopNav = void 0;
const React = require("react");
const rxjs_1 = require("rxjs");
const nano_theme_1 = require("nano-theme");
const useWindowSize_1 = require("react-use/lib/useWindowSize");
const useObservable_1 = require("react-use/lib/useObservable");
const context_1 = require("../../6-page/ContentSizer/context");
const constants_1 = require("../../constants");
const blockClass = (0, nano_theme_1.rule)({
    w: '100%',
    bxz: 'border-box',
    pos: 'fixed',
    top: 0,
    left: 0,
    pd: '0 32px',
    z: nano_theme_1.ZINDEX.TOP_NAV,
    bdfl: 'saturate(170%) blur(14px)',
    bdb: '1px solid transparent',
    '-webkit-app-region': 'drag', // Drag for Electron app.
    '@media only screen and (max-width: 600px)': {
        pad: '0px 16px',
    },
});
const useBlockClass = (0, nano_theme_1.makeRule)((theme) => ({
    bdb: `1px solid ${theme.g(0, 0.08)}`,
    '&:hover': {
        bdb: `1px solid ${theme.g(0, 0.12)}`,
    },
}));
const sizerClass = (0, nano_theme_1.rule)({
    maxW: constants_1.NiceUiSizes.SiteWidth + 'px',
    h: constants_1.NiceUiSizes.TopNavHeight + 'px',
    mar: 'auto auto -1px',
    bxz: 'border-box',
    d: 'flex',
    ai: 'center',
    jc: 'space-between',
});
const useSizerClass = (0, nano_theme_1.makeRule)((theme) => ({
    bdb: `1px solid ${theme.g(0, 0.04)}`,
    '&:hover': {
        bdb: `1px solid ${theme.g(0, 0.08)}`,
    },
}));
const showBorder$ = (0, rxjs_1.fromEvent)(window, 'scroll').pipe((0, rxjs_1.map)(() => window.scrollY > 10), (0, rxjs_1.distinctUntilChanged)());
const TopNav = (props) => {
    const { children, ...rest } = props;
    const { width } = (0, useWindowSize_1.default)();
    const showBorder = (0, useObservable_1.default)(showBorder$, false);
    const dynamicBlockClass = useBlockClass();
    const dynamicSizerClass = useSizerClass();
    const { paddingLeft } = (0, context_1.useContentSize)();
    const showBorder2 = showBorder || width < 800;
    return (React.createElement(React.Fragment, null,
        React.createElement("nav", { "data-testid": "TopNav", ...rest, className: (rest.className || '') + blockClass + (showBorder2 ? dynamicBlockClass : ''), style: { marginLeft: paddingLeft, width: `calc(100% - ${paddingLeft}px)` } },
            React.createElement("div", { className: sizerClass + dynamicSizerClass, style: { borderBottomColor: showBorder2 ? 'transparent' : undefined } }, children)),
        React.createElement("div", { style: { height: constants_1.NiceUiSizes.TopNavHeight } })));
};
exports.TopNav = TopNav;