Sidebar scroll not working properly with offset

[herrera-ignacio]

Note: This issue might be similar to #360 but slightly different. In this case, the navbar is not hidden behind the navbar.

Precondition

• Sidebar has enough items to not fit on the screen (i.e., vertical overflow) and becomes scrollable.
• There's a fixed navbar.

Issue:

• The navbar creates an offset and makes the sidebar not quite fit on the screen. Therefore, you can't see some items at the end of the sidebar by scrolling (depending on nav height).
• If you scroll the page, and the navbar hides, you'll be able to side those items.

Screen.Recording.2024-06-05.at.5.55.59.PM.mov

Attempts to solve

• Swizzling docusaurus-theme-redoc. I was not able to get to the sidebar styling to apply some sort of vertical padding but I think that could be a hot fix. When ejecting the Redoc component (or its dependencies), a lot of relative imports that it uses get broken.
• I tried applying either scrollYOffset: 50 or scrollYOffset: nav.navbar to fix the issue and it does but it creates another one, the sidebar won't occupy the navbar space when the navbar is hidden, and it looks odd (notice on the following image that the sidebar's right border doesn't reach the top) Another solution could be that the scrollYOffset only applies when the navbar is not present but I don't think the options support this.

Ideal scenarios

• Being able to apply custom styles to the sidebar (e.g., padding-bottom)
• Being able to swizzle Redoc's sidebar (either Wrap or Eject)

[Denny-g6labs]

I just found a good hack:

:host ::ng-deep {
  // Target the menu-content class within the redoc-container
  .redoc-container .menu-content {
    top: 0px !important;
    height: calc(-120px + 100vh) !important;
  }
}

120 is the key here, and 0 for the top property.

redoc-container is the div I'm using to hold the child that is replaced.
Example:

    <mat-tab label="Base-API">
      <div class="redoc-container">
        <div #apidocumentation_redoc_base></div>
      </div>
    </mat-tab>

  @ViewChild("apidocumentation_redoc_base", { static: false })
  baseApiDocRedocElement: ElementRef | undefined;

    if (this.baseApiDocRedocElement)
      Redoc.init(
        `${environment["api-url"]["base"]}/swagger.json`,
        options,
        this.baseApiDocRedocElement.nativeElement,
      );

In addition I do that because of my toolbar stuff:

.redoc-container {
  height: calc(100vh - 7em);
}

You could also use scrollYOffset and only manipulate top to be 0, I guess.