@elacity-js/uikit/dist/layouts/Navbar.js

React / Material UI Design kit for Elacity project

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import React__default from 'react';
import { Icon } from '@iconify/react';
import menu2Fill from '@iconify/icons-eva/menu-fill';
import { styled } from '@mui/material/styles';
import { AppBar as AppBar$1, Toolbar as Toolbar$1, IconButton, Box, Stack } from '@mui/material';
import useAppSettings from '../hooks/useAppSettings.js';
import Breadcrumbs from '../components/Breadcrumbs.js';
import { RouterLink } from '../components/Link.js';
import MHidden from '../components/MHidden.js';
import Searchbar, { SearchbarVisible } from '../components/Search/Searchbar.js';
import ThemeSwitcher from '../components/ThemeSwitcher.js';
import Nav from '../components/Nav/index.js';
import AccountPopover from '../components/AccountPopover.js';
import Button from '../components/Button/index.js';

// @TODO: Ensure to make this component a working component, even without any customization
// Just implement elacity behavior
// in prior, resolve searchbar context implementation
const searchProps = {
    // just a placeholder for now: no result, never fetching
    useQuery: () => ({ data: [], isFetching: false }),
    renderResult: () => (jsx("div", { children: "Not Implemented" })),
};
const AppBar = styled(AppBar$1)(({ theme }) => (Object.assign(Object.assign({ boxShadow: theme.shadows[0] }, theme.glassy(theme.palette.background.default, 0.4, 3.5)), { [theme.breakpoints.up('lg')]: {
        '&.shadowed': {
            boxShadow: theme.shadows[4],
        },
    } })));
const Toolbar = styled(Toolbar$1)(({ theme }) => ({
    minHeight: theme.layoutSettings.appBarMobile,
    [theme.breakpoints.up('lg')]: {
        minHeight: theme.layoutSettings.appBarDesktop,
        padding: theme.spacing(0, 1),
    },
}));
function Navbar({ onOpenSidebar, menus, shadowEffect, children }) {
    const breadcrumbsProps = {};
    const appbarRef = React__default.useRef(null);
    const { appName, logo, setValues, values } = useAppSettings();
    React__default.useEffect(() => {
        // these rules will only apply on large screen
        // when scrolling document we will
        // - add `shadowed` class on AppBar when scrolling down from 10% of window heigh
        // - remove `shadowed` class on AppBar when comming near of top
        const handleTopScroll = (e) => {
            if (!shadowEffect) {
                return;
            }
            const scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
            if (appbarRef.current) {
                if (scrollPosition > 120) {
                    // when there is no sticky we will add the shadowed class
                    // as sticky element has already this shadow effect
                    if (document.getElementsByClassName('sticky').length === 0) {
                        appbarRef.current.classList.add('shadowed');
                    }
                }
                else {
                    appbarRef.current.classList.remove('shadowed');
                }
            }
        };
        window.addEventListener('scroll', handleTopScroll, false);
        return () => {
            window.removeEventListener('scroll', handleTopScroll);
        };
    }, []);
    return (jsx(AppBar, Object.assign({ ref: appbarRef }, { children: jsxs(Toolbar, { children: [jsx(MHidden, Object.assign({ width: "lgUp" }, { children: jsx(IconButton, Object.assign({ onClick: onOpenSidebar, sx: { color: 'text.primary' } }, { children: jsx(Icon, { icon: menu2Fill }) })) })), jsx(MHidden, Object.assign({ width: "lgDown" }, { children: jsx(Box, Object.assign({ sx: { mx: 1 } }, { children: jsx(RouterLink, Object.assign({ to: "/" }, { children: jsx("img", { style: { width: 'auto', height: 48 }, src: logo.primary, alt: appName }) })) })) })), jsx(Box, { children: jsx(Breadcrumbs, Object.assign({}, breadcrumbsProps)) }), jsxs(Fragment, { children: [jsx(MHidden, Object.assign({ width: "lgDown" }, { children: jsx(SearchbarVisible, Object.assign({}, searchProps)) })), jsx(MHidden, Object.assign({ width: "lgUp" }, { children: jsx(Searchbar, Object.assign({}, searchProps)) }))] }), jsx(MHidden, Object.assign({ width: "lgDown" }, { children: jsx(Nav.HorizontalMenu, { menus: menus }) })), jsx(Box, { sx: { flexGrow: 1 } }), jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", spacing: { xs: 0, sm: 1.5 }, sx: { pl: 1 } }, { children: [jsx(Button.Mint, { responsive: true }), jsx(Box, Object.assign({ sx: { justifyContent: 'center', ml: -1 } }, { children: jsx(ThemeSwitcher, { value: values.theme || 'light', onChange: (themeValue) => setValues({ theme: themeValue }) }) })), children, !children && jsx(AccountPopover, {})] }))] }) })));
}
Navbar.defaultProps = {
    shadowEffect: true,
    menus: [],
    onOpenSidebar: () => console.warn('[Navbar.onOpenSidebar] Not implemented!')
};

export { Navbar as default };
//# sourceMappingURL=Navbar.js.map