Lootstrap-angular
Accordion
Avatar
Breadcrumb
Card
Carousel
Dialog
Notify
Pagination
Rating
Sidenav
Spinner
Table
Tabs
Time
Timeline
TreeView
Highlighter
Mapper
Tooltip

Ng - Sidenav

Styled byLS Sidenav

Basic usage

Sidenav

Mode:





SidenavContent

Mode: 






























      <Sidenav-container [Backdrop]="Backdrop">
        <Sidenav [Expanded]="Expanded" [Mode]="Mode" (Change)="Expanded=$event">
          <p>Sidenav</p>
          <div class="Border M-3 P-2">
            <div class="Form-check Form-switch">
              <input class="Form-check-input" type="checkbox" role="switch" [(ngModel)]="Backdrop" id="Backdrop"/>
              <label class="Form-check-label" for="Backdrop">Backdrop</label>
            </div>
            <hr>
            Mode:
            <hr>
            <div class="Form-check Form-check-inline">
              <input class="Form-check-input" type="radio" name="SidenavMode1"
                     id="inlineRadio11" value="Over" [(ngModel)]="Mode"/>
              <label class="Form-check-label" for="inlineRadio11">Over</label>
            </div>
            <div class="Form-check Form-check-inline">
              <input class="Form-check-input" type="radio" name="SidenavMode1"
                     id="inlineRadio12" value="Side" [(ngModel)]="Mode"/>
              <label class="Form-check-label" for="inlineRadio12">Side</label>
            </div>

            <div class="Form-check Form-check-inline">
              <input class="Form-check-input" type="radio" name="SidenavMode1"
                     id="inlineRadio13" value="Push" [(ngModel)]="Mode"/>
              <label class="Form-check-label" for="inlineRadio13">Push</label>
            </div>

          </div>
          <br><br><br><br><br>
        </Sidenav>

        <button class="Btn Btn-info" (click)="Expanded=!Expanded">Toggle</button>

        <p>SidenavContent</p>
        <div class="Border M-3 P-2">
          Mode:
          <div class="Form-check Form-check-inline">
            <input class="Form-check-input" type="radio" name="SidenavMode"
                   id="inlineRadio1" value="Over" [(ngModel)]="Mode"/>
            <label class="Form-check-label" for="inlineRadio1">Over</label>
          </div>
          <div class="Form-check Form-check-inline">
            <input class="Form-check-input" type="radio" name="SidenavMode"
                   id="inlineRadio2" value="Side" [(ngModel)]="Mode"/>
            <label class="Form-check-label" for="inlineRadio2">Side</label>
          </div>

          <div class="Form-check Form-check-inline">
            <input class="Form-check-input" type="radio" name="SidenavMode"
                   id="inlineRadio3" value="Push" [(ngModel)]="Mode"/>
            <label class="Form-check-label" for="inlineRadio3">Push</label>
          </div>

        </div>
        <br><br><br><br><br>
      </Sidenav-container>
        
  Backdrop = true;
  Expanded = true;
  Mode: "Over" | "Side" | "Push" = 'Side';

Fixed position

Cant demonstrate here properly. It'll work! Promise :p

Sidenav

...

SidenavContent

... 
























      <Sidenav-container [Backdrop]="Backdrop" class="Ex-fixed">
        <Sidenav [Expanded]="Expanded" [Mode]="Mode" (Change)="Expanded=$event">
          <p>Sidenav</p>
          ...
        </Sidenav>

        <button class="Btn Btn-info" (click)="Expanded=!Expanded">Toggle</button>

        <p>SidenavContent</p>
        ...

        <br><br><br><br><br>
        <br><br><br><br><br>
        <br><br><br><br><br>
        <br><br><br><br><br>
        <br><br><br><br><br>
      </Sidenav-container>

        
.Ex-fixed {
  .Sidenav-container {

    .Sidenav {
      position: fixed;
      top: 55px; // for navbar
    }
  }
}