rohit-gohri / redocusaurus

OpenAPI for Docusaurus with Redoc
https://redocusaurus.vercel.app/
MIT License
599 stars 111 forks source link

Sidebar scrolls under navbar on direct visit #360

Open notAreYouScared opened 2 months ago

notAreYouScared commented 2 months ago

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.
tkenda commented 1 month ago

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!

robbieaverill commented 12 hours ago

The salient part of the example above is this:

extends:
  - recommended

theme:
  openapi:
    scrollYOffset: 60

Thanks @tkenda 👍