Как создать отзывчивый TopNav в теме Angular Nebular?

Я хочу создать отзывчивую верхнюю навигацию с использованием темы Angular Nebular. Я создал верхнее меню, используя

<nb-layout-header fixed>
    <nb-actions class="left">
        <nb-action class="profile" [nbContextMenu]="items" 
  nbContextMenuPlacement="bottom">Profile</nb-action>

        <nb-action [routerLink]="['/login']">Login</nb-action>
        <nb-action>menu 1</nb-action>
        <nb-action>menu 2</nb-action>
        <nb-action>secret menu</nb-action>
        <nb-action *ngIf="local.retrieve('loggedIn')">secret menu2</nb-action>
    </nb-actions>
</nb-layout-header>

Но это та же компоновка как на ПК, так и на мобильных устройствах. Как сделать так, чтобы верхняя панель навигации стала меню «гамбургер», когда пользователь просматривает на мобильном устройстве, как показано ниже

https://www.w3schools.com/howto/howto_js_topnav_responsive.asp


angular nebular
person Weilies    schedule 28.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

это проблема css и mediaQuery. Есть несколько способов: простой, вы определили два .css, реагирующие на кнопки и меню.

.button-responsive
{
    display:none
}

@media (max-width: 573px)
{
    .button-responsive
    {
        display:inline-block
    }
    .menu-responsive
    {
        display:none
    }
}

Тогда вы можете иметь nb-actions и nbContextMenu

  <nb-layout-header fixed>
    <!--add class button-responsive to the button-->
    <button nbButton ghost class="button-responsive" [nbContextMenu]="allitems">
      <nb-icon icon="menu-outline"></nb-icon>
    </button>
    <!--add class menu-responsive to nb-actions-->
    <nb-actions class="left menu-responsive">
      <nb-action class="profile" [nbContextMenu]="items" nbContextMenuPlacement="bottom">Profile</nb-action>
      <nb-action [routerLink]="['/login']">Login</nb-action>
      <nb-action>menu 1</nb-action>
      <nb-action>menu 2</nb-action>
      <nb-action>secret menu</nb-action>
    </nb-actions>
  </nb-layout-header>

Обновите ту же технику, используя фиксированную боковую панель. Для этого в конструкторе компонента

constructor(public sidebarService: NbSidebarService) {}

И наш .html становится похожим на

<nb-layout>
  <nb-layout-header fixed>
    <nb-icon class="button-responsive" icon="menu-outline" (click)="sidebarService.toggle()"></nb-icon>
    <nb-actions class="left menu-responsive">
      <nb-action class="profile" [nbContextMenu]="items" nbContextMenuPlacement="bottom">Profile</nb-action>
      <nb-action [routerLink]="['/login']">Login</nb-action>
      <nb-action>menu 1</nb-action>
      <nb-action>menu 2</nb-action>
      <nb-action>secret menu</nb-action>
    </nb-actions>
  </nb-layout-header>
  <nb-sidebar #sidebar state="collapsed" class="button-responsive" fixed>
    <nb-menu [items]="items"></nb-menu>
  </nb-sidebar>
person Eliseo    schedule 28.05.2020
comment
САЛЮТ!!! Ваш код такой ВДОХНОВЛЯЮЩИЙ! хотя я ушел из Nebular и использую PrimeNG, но он дал мне идеи и даже помог мне, как заставить вещи работать в PrimeNG !! Впечатляющий! - person Weilies; 28.05.2020