import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Portal } from '@gravity-ui/uikit';
import Foldable from "../../../../components/Foldable/Foldable.js";
import { block } from "../../../../utils/index.js";
import { useMount } from "../../../hooks/index.js";
import { ItemColumnName, NavigationLayout } from "../../models.js";
import { NavigationList } from "../NavigationList/NavigationList.js";
import './MobileNavigation.css';
const b = block('mobile-navigation');
export const MobileNavigation = ({ isOpened, topItems, bottomItems, portalContainer, ...props }) => {
    const [isMounted, setIsMounted] = React.useState(false);
    useMount(() => setIsMounted(true));
    if (!isMounted) {
        return null;
    }
    return (_jsx(Portal, { container: portalContainer?.current ?? undefined, children: _jsx(Foldable, { className: b(), isOpened: Boolean(isOpened), children: _jsxs("div", { className: b('wrapper'), children: [topItems && (_jsx(NavigationList, { className: b('rows'), items: topItems, column: ItemColumnName.Top, menuLayout: NavigationLayout.Mobile, ...props })), bottomItems && (_jsx(NavigationList, { className: b('rows'), items: bottomItems, column: ItemColumnName.Bottom, menuLayout: NavigationLayout.Mobile, ...props }))] }) }, topItems?.length) }));
};
export default MobileNavigation;
//# sourceMappingURL=MobileNavigation.js.map
