Where to place nb-sidebar-header within nb-layout in v4

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request

Issue description

Current behavior: Below code displays the sidebar within the scroll container. It leaves empty space equal to the height of the main header

Expected behavior: But as per the documentation, it should be displayed on top of the scroll container.

Steps to reproduce: Run the app with above layout code.

Related code:

<nb-layout>
  <nb-layout-header subheader>
    <app-header class="w-100"></app-header>
  </nb-layout-header>

  <nb-sidebar>
    <nb-sidebar-header>
      <span>My Sidebar Header</span>
    </nb-sidebar-header>
    <app-sidebar></app-sidebar>
  </nb-sidebar>

  <nb-layout-column>
    <router-outlet></router-outlet>
  </nb-layout-column>
</nb-layout>

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

Angular, Nebular

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@nebular/bootstrap": "^4.1.0",
    "@nebular/eva-icons": "4.1.0",
    "@nebular/theme": "^4.1.0",
    "rxjs": "~6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  }

[gvonhagel]

9 months later and this component is still broken

[savy-91]

Here is what worked for me (I am not using a header and everything is in the sidebar): Add this in styles.scss: .main-container { top: 0px !important; }