0

My company is very new to Nebular and we have a standard header that includes a user dropdown (bootstrap) that i would like to include into nb-layout-header.

Is this possible and if so how can this be achieved. here are snippets of our code:

MainPage:

<nb-layout center>  
  **<nb-layout-header fixed>
      <nb-header></nb-header>
  </nb-layout-header>**

  <nb-sidebar class="menu-sidebar"
              tag="menu-sidebar"
              responsive>
    <nb-sidebar-header>
      </i> Menu </span>-->
      <nb-menu [items]="sidebarHeaderMenu" (click)="toggleSideBar()"> </nb-menu>

    </nb-sidebar-header>
    <nb-menu [items]="subMenu"></nb-menu>
  </nb-sidebar>


  <nb-layout-column>

    <!--<router-outlet></router-outlet>-->
    <span style="width: 100vw">Place holder</span>

  </nb-layout-column>


  <nb-layout-footer>
  </nb-layout-footer>
</nb-layout>*

nb-header code:

<div class="header-container">
     <div class="logo-container">        
        <div class="logo" (click)="goToHome()">
          <img class="header-logo" src="../../assets/images/mylogo.png" alt="My LOGO">
        </div>
    </div>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

The dropdown above does not event display in the layout header. Any help would be appreciated..

Thank You

S. Sack
  • 1
  • 2

1 Answers1

0

Some Bootstrap components require the use of JavaScript to function (Bootstrap docs), so make sure you include all required files in angular.json. It should look something like this:

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.slim.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
  ],

Also, you need to add @nebular/bootstrap package to make nebular work with bootstrap. See the docs for guidance.

And by the way, usually, Bootstrap and jQuery isn't used directly in Angular apps. There is ng-bootstrap package, for example. Then you don't need jQuery and Bootstrap js files.

yggg
  • 106
  • 3