angularnebularngx-admin

Nebular common sidebar footer tag does not wrap the menu items correctly

I've tried combination of nebular documentation and ngx-admin examples to create the sidebar footer. Using the same structure design @theme/layouts/one-column and there I've created the sidebar-footer since it's the right place for that to display in the entire app:

//@theme/layouts/one-column/one-column.layouts.ts

import { Component } from '@angular/core';

@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>
                <ng-content select="nb-menu"></ng-content>
                <nb-sidebar-footer>
                    <ng-content select=".nb-menu-footer"></ng-content>
                </nb-sidebar-footer>
            </nb-sidebar>
            <nb-layout-column>
                <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 {}

Inside <nb-sidebar-footer> I've added <ng-content select=".nb-menu-footer"></ng-content> and then in my pages.component.ts I've added nb-menu with items attribute that represent the expected footer item:

// pages.component.ts
@Component({
    selector: 'app-pages',
    styleUrls: ['./pages.component.scss'],
    template: `
        <ngx-one-column-layout>
            <nb-menu [items]="menu"></nb-menu>
            <nb-menu class=".nb-menu-footer" [items]="menuFooter"></nb-menu>
            <router-outlet></router-outlet>
        </ngx-one-column-layout>
    `,
})


menuFooter = [
  {
      title: 'О сайте',
      icon: 'heart',
      link: '/pages/imprint/overview',
      home: false,
  }
]

But I endet up with something like this:

image

How to place correctly nb-menu item as you can see nb-sidebar-footer wraps <ng-content select=".nb-menu-footer"></ng-content>

StackBlitz StackBlitz Seed Project

npm, node, OS, Browser

node: v12.0.0
npm: 6.9.0
OS: Windows 10
Browser: Chrome

Angular, Nebular

"@angular/cdk": "^11.2.3",
"@angular/common": "~11.2.3",
"@angular/compiler": "~11.2.3",
"@angular/core": "~11.2.3",
"@angular/forms": "~11.2.3",
"@angular/localize": "~11.2.3",
"@angular/platform-browser": "~11.2.3",
"@angular/platform-browser-dynamic": "~11.2.3",
"@angular/router": "~11.2.3",
"@nebular/auth": "^7.0.0",
"@nebular/eva-icons": "7.0.0",
"@nebular/security": "^7.0.0",
"@nebular/theme": "^7.0.0",
Solution

  • I add a custom component in <nb-sidebar-footer> tag to add footer. like below example:

    <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-footer>
        <custom-sidebar-footer></custom-sidebar-footer>
      </nb-sidebar-footer>
  </nb-sidebar>

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

  <nb-layout-footer fixed>
    <ngx-footer></ngx-footer>
  </nb-layout-footer>
</nb-layout>

    and custom component for footer:

    custom-footer.component.html

    <nb-menu [items]="menuFooter"></nb-menu>

    custom-footer.component.ts

      menuFooter : NbMenuItem[] = [{
     title: 'О сайте',
     icon: 'heart',
     link: '/pages/imprint/overview',
     home: false,
  }];