@redocly/theme/lib/components/Sidebar/Sidebar.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Sidebar = Sidebar;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const MenuContainer_1 = require("../../components/Menu/MenuContainer");
function Sidebar({ versions, menu, footer, header, growContent, collapsed, className, menuItemsAnimation, }) {
    const { isOpen } = (0, hooks_1.useMobileMenu)();
    const [mappedCollapsed, setMappedCollapsed] = react_1.default.useState(collapsed);
    (0, react_1.useEffect)(() => {
        setMappedCollapsed(collapsed && !isOpen);
    }, [isOpen, collapsed, setMappedCollapsed]);
    const { sidebar } = (0, hooks_1.useThemeConfig)();
    if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
        return null;
    }
    return (react_1.default.createElement(SidebarContent, { "data-component-name": "Sidebar/Sidebar", opened: isOpen, className: className, collapsed: mappedCollapsed },
        header ? react_1.default.createElement(SidebarHeader, { collapsed: mappedCollapsed }, header) : null,
        !mappedCollapsed && versions ? versions : null,
        react_1.default.createElement(MenuContainer_1.MenuContainer, { hidden: mappedCollapsed, growContent: growContent, animation: menuItemsAnimation }, menu),
        footer && !isOpen ? (react_1.default.createElement(SidebarFooter, { collapsed: mappedCollapsed, "data-component-name": "Sidebar/FooterWrapper" }, footer)) : null));
}
const SidebarContent = styled_components_1.default.aside `
  border-right: 1px solid var(--sidebar-border-color);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: var(--sidebar-bg-color);
  font-size: var(--sidebar-font-size);
  font-family: var(--sidebar-font-family);
  color: var(--sidebar-text-color);
  display: flex;
  flex-direction: column;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  top: var(--navbar-height);
  height: calc(100vh - var(--navbar-height));
  overflow-x: hidden;
  ${({ opened }) => `
    display: ${opened ? 'flex' : 'none'}
  `};

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    position: sticky;
    pointer-events: auto;
    display: flex;
    opacity: 1;
    flex-shrink: 0;
    overflow: clip;

    ${({ collapsed }) => collapsed
    ? `
          flex-direction: column;
          width: var(--sidebar-collapsed-width);
    `
    : 'width: var(--sidebar-width);'}

    & > * {
      transform: none;
    }
  }

  @media screen and (min-width: ${utils_1.breakpoints.large}) {
    transform: none;
  }
`;
const SidebarHeader = styled_components_1.default.div `
  margin: var(--sidebar-offset-top) var(--sidebar-margin-horizontal) 0
    var(--sidebar-margin-horizontal);
  padding: 0 0 var(--sidebar-header-padding-bottom) 0;

  ${({ collapsed }) => !collapsed &&
    `
      border-bottom: solid 1px var(--border-color-secondary);
    `}
`;
const SidebarFooter = styled_components_1.default.div `
  display: none;
  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    display: flex;
    justify-content: ${({ collapsed }) => (collapsed ? 'center' : 'flex-end')};
  }

  ${({ collapsed }) => collapsed &&
    `
        position: sticky;
        bottom: 0;
        padding: 0;
        margin-top: auto;
    `}

  button {
    margin: 0;
  }
`;
//# sourceMappingURL=Sidebar.js.map