Animating nebular sidebar component

Question

I am using nebular sidebar component, what i'm trying to do is animating the opening and the closing of the sidebar. I checked the sidebar API but i didn't find anything that can do that ? I tried to apply css transition on the class but it didn't work, so how can i approach this ?

<nb-layout>

  <nb-layout-header subheader>
    <app-navbar style="width: 100%"></app-navbar>
  </nb-layout-header>

  <nb-sidebar [state]="'compacted'">
    <app-sidenav-menu></app-sidenav-menu>
  </nb-sidebar>

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

Hey, Ali Badr, please check answer from Nikita as correct. – Emilio Numazaki Apr 27 '20 at 15:57 — Emilio Numazaki, Apr 27 '20 at 15:57

score 11 · Accepted Answer · answered Nov 08 '18 at 10:02

As I see it, the Nebular sidebar contains container inside:

<nb-sidebar>
  <div.main-container>
  ...
  </div>
</nb-sidebar>

And if you add transitions for both, sidebar and div.main-container it should provide the desired behavior.

nb-sidebar,
nb-sidebar > div.main-container {
  transition: width 1s;
}

Animating nebular sidebar component

1 Answers1