Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

fakeyanss
Copy link

@fakeyanss fakeyanss commented Feb 7, 2024

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:

image

Expanded Sidebar:

image

Check yourself

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

@fakeyanss fakeyanss requested a review from a team as a code owner February 7, 2024 08:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant