import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import OutsideClick from "../../../../components/OutsideClick/OutsideClick.js";
import { block } from "../../../../utils/index.js";
import { Col, Grid, Row } from "../../../grid/index.js";
import { useActiveNavItem, useShowBorder } from "../../hooks/index.js";
import DesktopNavigation from "../DesktopNavigation/DesktopNavigation.js";
import MobileNavigation from "../MobileNavigation/MobileNavigation.js";
import './Navigation.css';
const b = block('navigation');
export const Navigation = ({ data, logo, className, mobilePortalContainer, onSidebarChange, }) => {
    const { leftItems = [], rightItems, customMobileHeaderItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data || {};
    const [isSidebarOpened, setIsSidebarOpened] = React.useState(false);
    const [showBorder] = useShowBorder(withBorder, withBorderOnScroll);
    const { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange } = useActiveNavItem(iconSize, leftItems, rightItems);
    const onSidebarOpenedChange = (isOpen) => {
        onSidebarChange?.(isOpen);
        setIsSidebarOpened(isOpen);
    };
    return (_jsx(Grid, { className: b({ 'with-border': showBorder }, className), children: _jsx(Row, { children: _jsx(Col, { children: _jsxs("nav", { children: [_jsx(DesktopNavigation, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, customMobileHeaderItems: customMobileHeaderItems, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }), _jsx(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false), children: _jsx(MobileNavigation, { topItems: leftItemsWithIconSize, bottomItems: rightItemsWithIconSize, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, portalContainer: mobilePortalContainer }) })] }) }) }) }));
};
export default Navigation;
//# sourceMappingURL=Navigation.js.map
