redocusaurus icon indicating copy to clipboard operation
redocusaurus copied to clipboard

Sidebar scrolls under navbar on direct visit

Open notAreYouScared opened this issue 9 months ago • 2 comments

image

This happens with both search-bar enabled and disabled.

The issue appears only when you navigate directly to the API page

Recreatable on every website under Who is using Redocusaurus?

Steps to reproduce.

  1. Navigate to https://redocusaurus.vercel.app/docs
  2. Navigate from /doc to /examples/using-single-yaml/ using navbar, No issue works as expected when navigating to API from a navbar item
  3. Reload /examples/using-single-yaml/, scroll, observe issue on sidebar.

notAreYouScared avatar Apr 29 '24 23:04 notAreYouScared

Create a file redocly.yaml with this configuration:

extends:
  - recommended

rules:
  no-unused-components: error

theme:
  openapi:
    requiredPropsFirst: true
    noAutoAuth: true
    hideDownloadButton: true
    onlyRequiredInSamples: true
    nativeScrollbars: true
    scrollYOffset: 60
    theme:
      colors:
        primary:
          main: '#32329f'

and then setup presets in docusarus.config.ts

presets: [
  [
    "classic",
    {
      docs: {
        sidebarPath: "./sidebars.ts",
      },
      theme: {
        customCss: "./src/css/custom.css",
      },
    } satisfies Preset.Options,
  ],
  [
    "redocusaurus",
    {
      config: path.join(__dirname, 'redocly.yaml'),
      specs: [
        {
          spec: "./specs/swagger.json",
          route: "/api/",
        },
      ],
      theme: {
        primaryColor: "#1890ff",
      },
    },
  ] satisfies Redocusaurus.PresetEntry,
]

This will solve your issue!

tkenda avatar May 13 '24 18:05 tkenda

The salient part of the example above is this:

extends:
  - recommended

theme:
  openapi:
    scrollYOffset: 60

Thanks @tkenda 👍

robbieaverill avatar Jul 04 '24 02:07 robbieaverill