feat: Add Sidebar Menu Toggle for Improved Readability on Small Screens

[fakeyanss]

What/Why/How?

This pull request adds a configurable toggle button for the sidebar menu in Redocly documentation pages, aimed at improving the reading experience on smaller screens, such as those of 13-inch laptops. The motivation behind this enhancement is to address the limitation posed by the existing layout (left sidebar, central content, and an optional right sidebar), which significantly narrows the main content area. This can make it challenging for users to comfortably read through API operation details.

To offer a solution that caters to diverse user preferences and screen sizes, a collapsible sidebar menu feature has been introduced. This feature is designed to provide users with the ability to dynamically adjust the width of the content area, allowing for a broader space to read API operation details, thereby significantly improving readability and aiding in quicker and more efficient comprehension of the content.

The sidebar menu toggle feature is configurable and, by default, is not active.
A crucial aspect of this feature is its configurability. By default, the sidebar collapse button is not activated. The default configuration for the collapse button is as follows:

collapseBtn: {
  active: false,
  top: '50%',
  size: '24px',
}

Users desiring to utilize this feature must enable it via the configuration settings, just like options initialized in demo/playground/hmr-playground.tsx:

const options: RedocRawOptions = {
  theme: { sidebar: { collapseBtn: { active: true } } },
};

To enable this feature within Redocly, users need to update their .redocly.yaml configuration file as follows:

theme:
  openapi:
    theme:
      collapseBtn:
        active: true

This configurability ensures that the new functionality can be seamlessly integrated or opted out of according to individual preferences or requirements, without disrupting the overall user experience.

Note: To ensure compatibility with this new feature and to avoid any potential “invalid configuration” warnings during the build-docs and preview-docs processes, it may be necessary to upgrade the @redocly/openapi-core package to the latest version.

It’s also important to highlight that on mobile devices, the existing AnimatedChevronButton will continue to serve its purpose, and the new expand/collapse button will not render, maintaining a consistent and intuitive user experience across all device types.

Reference

N/A

Tests

The sidebar toggle functionality has been thoroughly tested across multiple devices, with a particular emphasis on small screen devices (excluding mobile devices where the feature does not render) to verify the improvements in readability. The feature’s configurability was also tested to ensure that it behaves as expected when enabled or disabled through the provided settings.

Screenshots (optional)

Collapsed Sidebar:

Expanded Sidebar:

Check yourself

• Code is linted
• Tested
• All new/updated code is covered with tests