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

[pdomala]

Issue type

I'm submitting a ... (check one with "x")

• [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"
  }

[json-alzate]

HI, I found a solutions for me, is out nb-sidebar from nb-loyout and then apply a css class:
html:
```

onlyPicture>

close

<router-outlet></router-outlet>

and the css:

nb-user {
position: absolute;
left: 0;
}

nb-sidebar-header {
min-height: 5rem;
}

.column-container {
padding-left: 5rem !important;
}

```

Sorry if my code is dirty

[brneor]

I can add that this behavior can't be overriden even in the global scss file. It's a bit annoying.

[gvonhagel]

9 months later and this component is still broken

[fredericojesus]

Add [containerFixed]="false" to

<nb-sidebar [containerFixed]="false">

[savy-91]

Add [containerFixed]="false" to

<nb-sidebar [containerFixed]="false">

Doing so makes the sidebar content scroll with the page

[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; }