Компонент Side Nav повторяется с каждой приборной панелью в aurelia - PullRequest
1 голос
/ 22 января 2020

хе !! Я новичок в Аурелии и компонентов. Я создаю две разные панели мониторинга, и каждая панель имеет свои боковые панели и главное меню в качестве компонентов. То, как я их включаю:

<template>
  <require from="pages/components/admin/nav-bar"></require>
  <require from="pages/components/admin/main-menu"></require>
  <nav-bar></nav-bar>  
  <main-menu></main-menu>
  <div class="w-100">
    <router-view ></router-view>
  </div>
</template>

У меня есть кнопка для переключения между двумя инструментальными панелями. Проблема, с которой я сталкиваюсь: Когда я открываю панель администратора, она успешно отображает главное меню и боковую навигацию. Когда я переключаюсь на панель управления сотрудника, nav-bar сотрудника заменяет, но главное меню сотрудника попадает под главное меню администратора. Когда я снова переключаюсь на администратора, то же самое происходит снова ... и в итоге я получаю стек nav-bars друг над другом.

Структура главного меню:

<template>
        <div class="main_menu">
                <nav class="navbar navbar-expand-lg">
                    <div class="container">
                        <div class="navbar-collapse align-items-center collapse" id="navbar">                
                            <ul class="navbar-nav"> 
                            </ul>
                        </div>        
                    </div>
                </nav>
        </div>
</template>

Структура Nav-Bar:

<template>
        <nav class="navbar navbar-fixed-top">
                <div class="container">
                    <div class="navbar-brand">
                        <a href=""><img src=/src/assets/logo.png" alt="Talos" class="img-responsive logo"></a>
                    </div>

                    <div class="navbar-right">
                        <form id="navbar-search" class="navbar-form search-form">
                            <input value="" class="form-control" placeholder="Search here..." type="text">
                            <button type="button" class="btn btn-default"><i class="icon-magnifier"></i></button>
                        </form>               

                        <div id="navbar-menu">
                            <ul class="nav navbar-nav">    
                            </ul>
                        </div>
                  </div>
             </div>
       </nav>
</template>

Кто-нибудь может подсказать, где я не прав?

...