"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MobileNavigation = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const uikit_1 = require("@gravity-ui/uikit");
const Foldable_1 = tslib_1.__importDefault(require("../../../../components/Foldable/Foldable.js"));
const utils_1 = require("../../../../utils/index.js");
const hooks_1 = require("../../../hooks/index.js");
const models_1 = require("../../models.js");
const NavigationList_1 = require("../NavigationList/NavigationList.js");
const b = (0, utils_1.block)('mobile-navigation');
const MobileNavigation = ({ isOpened, topItems, bottomItems, portalContainer, ...props }) => {
    const [isMounted, setIsMounted] = React.useState(false);
    (0, hooks_1.useMount)(() => setIsMounted(true));
    if (!isMounted) {
        return null;
    }
    return ((0, jsx_runtime_1.jsx)(uikit_1.Portal, { container: portalContainer?.current ?? undefined, children: (0, jsx_runtime_1.jsx)(Foldable_1.default, { className: b(), isOpened: Boolean(isOpened), children: (0, jsx_runtime_1.jsxs)("div", { className: b('wrapper'), children: [topItems && ((0, jsx_runtime_1.jsx)(NavigationList_1.NavigationList, { className: b('rows'), items: topItems, column: models_1.ItemColumnName.Top, menuLayout: models_1.NavigationLayout.Mobile, ...props })), bottomItems && ((0, jsx_runtime_1.jsx)(NavigationList_1.NavigationList, { className: b('rows'), items: bottomItems, column: models_1.ItemColumnName.Bottom, menuLayout: models_1.NavigationLayout.Mobile, ...props }))] }) }, topItems?.length) }));
};
exports.MobileNavigation = MobileNavigation;
exports.default = exports.MobileNavigation;
//# sourceMappingURL=MobileNavigation.js.map
