Как создать левую навигационную панель с bootstrap?

Question

Как создать левую навигационную панель с bootstrap? Я сделал это

<nav class="btn-group-vertical float-left navbar">
    <button routerLink="product/home" routerLinkActive="is-active" class="btn btn-outline-dark">Home</button>
    <button routerLink="product/favorite" routerLinkActive="is-active" class="btn btn-outline-dark">Favorite</button>
</nav>

Но проблема в том, что я вижу это как неожиданное

Я хочу, чтобы вся работа мотыги была с хорошая позиция, но используйте bootstrap 4 хорошо

Спасибо за помощь: -)

Answer 1

Как я понял, вы пытаетесь создать боковую панель навигации и хотите, чтобы компонент показывался справа. В этом случае, когда вы вызываете компонент с помощью routerLink, следует указать указанный c css. каждый вызванный компонент, чтобы видеть их справа.

<style>
      router-outlet + * {
        float:right;
        position:absolute;
}
</style>

Этот код css будет применяться к каждому компоненту, принесенному router-outlet. Если вы хотите, вы можете добавить некоторое поле.

Здесь вы можете увидеть, что я для вас сделал:

https://stackblitz.com/edit/angular-router-basic-example-pgr1tv?file=index.html

Answer 2

Вот хороший, современный и отзывчивый подход, который я использовал в одном из своих проектов. Я надеюсь, что это поможет.

Примечание: Часть javascript будет заменена общей службой в базовом модуле приложения angular, где вы должны использовать BehaviourSubject для сообщения о состоянии sidenav из другого компонента.

Быстрый пример:

export class SidenavService {

    private sidenavState$ = new BehaviorSubject<boolean>(false);

    ...

const sidenav = document.querySelector('#sidenav');

const toggleSidenav = state => {
  sidenav.className = state ? 
  sidenav.className.replace('closed', 'opened') :
  sidenav.className.replace('opened', 'closed');
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas: 'header''main''footer';
  height: 100vh;
}

@media only screen and (min-width: 768px) {
  .grid-container {
    grid-template-columns: 260px 1fr;
    grid-template-areas: "sidenav header""sidenav main""sidenav footer";
  }
}

.sidenav {
  grid-area: sidenav;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 260px;
  padding: 0 .8rem;
  position: fixed;
  overflow-y: auto;
  z-index: 4;
  transform: translateX(-300px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .5);
  transition: all .1s linear;
  background-color: #fff;
}

.sidenav.opened {
  transform: translateX(0);
}

.sidenav__open-icon:hover {
  background-color: #ececec;
}

.sidenav__close-icon {
  position: absolute;
  visibility: visible;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: #e0e0e0;
  display: grid;
  place-items: center;
  border: solid 1px transparent;
  border-radius: 50%;
  background-color: transparent;
}

@media only screen and (min-width: 768px) {
  .sidenav {
    transform: translateX(0);
  }
  .sidenav__close-icon {
    visibility: hidden;
  }
}

ul.sidenav__list {
  padding: 0;
  margin-top: 1rem;
  list-style-type: none;
  max-width: 340px;
  overflow-y: auto;
}

li.sidenav__list-item {
  margin-bottom: 4px;
  background-color: #ddd;
  border: solid 1px transparent;
  border-radius: 6px;
  border-bottom: solid 4px #d2d2d2;
}

li.sidenav__list-item>a {
  width: 100%;
  padding: .7rem 1rem;
  display: block;
  position: relative;
  color: #333;
  text-decoration: none;
}

li.sidenav__list-item>a:hover,
li.sidenav__sublist-item>a:hover {
  background-color: #d2d2d2;
  cursor: pointer;
}

.sidenav__icon {
  width: 40px;
  padding: 0 2px;
  display: inline-block;
  margin-right: .4rem;
}

li.sidenav__list-item>a .caret {
  position: absolute;
  right: 16px;
  top: auto;
}

li.sidenav__list-item>a .caret>i {
  font-size: 12px;
}

ul.sidenav__sublist {
  padding: 0;
  list-style-type: none;
}

li.sidenav__sublist-item:first-child {
  margin: .5rem 0 0;
}

li.sidenav__sublist-item>a {
  width: 100%;
  padding: .5rem 1rem;
  font-size: 80%;
  display: block;
  position: relative;
  color: #333;
  border: solid 1px transparent;
  border-radius: 4px;
}

[role="nav-menu"],
[role="nav-dropdown-item"] {
  cursor: pointer !important;
}

[role="nav-dropdown"] {
  cursor: default !important;
}

.header {
  grid-area: header;
  background-color: #ddd;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="grid-container">
  <div id="sidenav" class="sidenav closed">
    <ul class="sidenav__list">
      <li class="sidenav__list-item">
        <!-- Menú con navegación -->
        <a role="nav-menu">
          <span class="sidenav__icon">
          <i class="{{m.iconoMenu}}"></i>
          </span>
          <span class="sidenav__title">Home</span>
        </a>
      </li>

      <!-- Menú sin navegación -->
      <li class="sidenav__list-item">
        <a class="accordion-toggle collapsed toggle-switch" data-toggle="collapse" href="#submenu-1" role="nav-dropdown">
          <span class="sidenav__icon">
            <i class="fas fa-home"></i>
          </span>
          <span class="sidenav__title">
          Configuration
          </span>
          <b class="caret">
            <i class="fas fa-caret-down"></i>
          </b>
        </a>
        <ul id="submenu-1" class="sidenav__sublist panel-collapse collapse panel-switch" role="menu">
          <li class="sidenav__sublist-item" role="nav-dropdown-item">
            <a href="#">
              <span class="sidenav__icon"><i class="fas fa-cog"></i></span>
              <span class="sidenav__title">Option 1</span>
            </a>
          </li>
          <li class="sidenav__sublist-item" role="nav-dropdown-item">
            <a href="#">
              <span class="sidenav__icon"><i class="fas fa-cog"></i></span>
              <span class="sidenav__title">Option 2</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="header">
    <div class="container-fluid">
      header
    </div>    
  </div>
  <main>
    <div class="container-fluid">
      body
    </div>
  </main>
  <footer>
    <div class="container-fluid">
      footer
    </div>
  </footer>
</div>

<div style="position: absolute; right: 40px; top: 80px">
  <button onclick="toggleSidenav(true)">open</button>
  <button onclick="toggleSidenav(false)">close</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>