in live demo ngx-toggle-settings-button selector not found in source code

[Mohamed-Fouad-Hamed]

Issue type

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

• [ ] bug report
• [ ] feature request
• [ ] question about the decisions made in the repository

Issue description

Current behavior:

Expected behavior:

Steps to reproduce:

Related code:

insert short code snippets here

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

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

[mirpuicor]

same here

[lordsivan]

When would this be released

[AreyXo]

This is kind of old but I made a work around and wanted to share. in one-column.scss add these lines

 nb-sidebar {
    transition: width 0.5s;
  }
.ngx-toggle-setting-container {
  border-radius: 0.17rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
  position: fixed;
  top: 50%;
  left: 0;
  transition: transform 0.5s;

  z-index: 998;
}
#cog-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: #fff;
  box-shadow: none;
  color: var(--color-primary-400);
  border: none;
  height: 3rem;
  width: 3rem;
  padding: 0;
  text-align: center;
}
#cog-icon {
  font-size: 1rem;
  height: var(--icon-height);
}
.position-end.expanded {
  transform: translateX(16rem);
}

and in one-column.layout.ts

import { Component } from '@angular/core';
import { NbTokenService } from '@nebular/auth';
import { NbMenuService, NbSidebarService } from '@nebular/theme';

@Component({
  selector: 'ngx-one-column-layout',
  styleUrls: ['./one-column.layout.scss'],
  template: `
    <nb-layout windowMode>
      <nb-layout-header fixed>
        <ngx-header></ngx-header>
      </nb-layout-header>

      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
        <ng-content select="nb-menu"></ng-content>
      </nb-sidebar>
      <div class="ngx-toggle-setting-container ">
      <button nbButton  id="cog-button"><nb-icon icon="cog" id="cog-icon"></nb-icon></button>
      </div>
      <nb-sidebar  tag="cog-sidebar" state="collapsed">
        <ngx-cog-settings></ngx-cog-settings>
      </nb-sidebar>
      <nb-layout-column>
      <div class="ngx-toggle-setting-container " [ngClass]="!sidebarCollapsed?'position-end expanded':''" (click)="toggle()" >
      <button nbButton  id="cog-button"><nb-icon icon="cog" id="cog-icon" ></nb-icon></button>
      </div>
      

        <ng-content select="router-outlet"></ng-content>
      </nb-layout-column>

      <nb-layout-footer fixed>
        <ngx-footer></ngx-footer>
      </nb-layout-footer>
    </nb-layout>
  `,
})
export class OneColumnLayoutComponent {
  sidebarCollapsed = true;
  constructor(private nbTokenService:NbTokenService,menu:NbMenuService,private sidebarService: NbSidebarService){
    
  }
  toggle() {
    this.sidebarCollapsed = !this.sidebarCollapsed;

    this.sidebarService.toggle(false, 'cog-sidebar');
  }
 
}

note that ngx-cog-settings is just a component I made to put side-bar contents in and thus could contain anything.