@razorpay/blade/build/lib/web/production/components/SideNav/SideNavLevel.web.js

The Design System that powers Razorpay

import 'react';
import { useNavLink } from './SideNavContext.js';
import { COLLAPSED_L1_WIDTH } from './tokens.js';
import '../Box/BaseBox/index.js';
import '../Typography/index.js';
import '../../utils/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { Text } from '../Typography/Text/Text.js';

var SideNavLevel = function SideNavLevel(_ref) {
  var children = _ref.children;
  var _useNavLink = useNavLink(),
    _prevLevel = _useNavLink.level,
    headingTitle = _useNavLink.title;
  var prevLevel = _prevLevel !== null && _prevLevel !== void 0 ? _prevLevel : 0;
  var currentLevel = prevLevel + 1;
  return /*#__PURE__*/jsxs(BaseBox, {
    marginLeft: currentLevel === 3 ? {
      base: 'spacing.7',
      m: 'spacing.6'
    } : {
      base: 'spacing.0',
      m: makeSize(COLLAPSED_L1_WIDTH)
    }
    // When we're in level 2 or 3, we want to stop propagation of hover from its items.
    // L1 is only expected to open / close on hover of L1 menu and L1 items
    ,
    onMouseOver: function onMouseOver(e) {
      e.stopPropagation();
    }
    // Although we don't use `onMouseOut` on SideNav, keeping it here in case we start using it in future as stopping propagation in child
    // is expected behaviour for us. Checkout https://react.dev/reference/react-dom/createPortal#caveats
    ,
    onMouseOut: function onMouseOut(e) {
      e.stopPropagation();
    },
    height: "100%",
    display: "flex",
    flexDirection: "column",
    children: [currentLevel === 2 && headingTitle ? /*#__PURE__*/jsx(BaseBox
    // In mobile, we use DrawerHeader for this heading
    , {
      display: {
        base: 'none',
        m: 'block'
      },
      padding: "spacing.4",
      borderBottomWidth: "thin",
      borderBottomColor: "surface.border.gray.muted",
      children: /*#__PURE__*/jsx(Text, {
        size: "large",
        weight: "semibold",
        children: headingTitle
      })
    }) : null, /*#__PURE__*/jsx(BaseBox, {
      padding: {
        base: 'spacing.0',
        m: 'spacing.3'
      },
      overflowY: "auto",
      children: children
    })]
  });
};

export { SideNavLevel };
//# sourceMappingURL=SideNavLevel.web.js.map