Angular : Email Client - 1-1. 인증모듈작성 - ng-bootstrap 반응형 메뉴바 작성

1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다.

 

2. 이 포스트에서는 메뉴 template을 작성한다.

  2-1 언제나 보여지는 메뉴바를 생성한다.

  2-2 메뉴바는 bootstrap을 사용하는데, ng-bootstrap에서 사용방법에 대한 가이드가 있다.

    2-2-0 이 가이드 대로 하면 width가 작을 때 햄버거 메뉴가 자동으로 구현된다.

    2-2-1 이 페이지에 가면 어떻게 사용할 수 있는지가 나온다.

 

Angular powered Bootstrap

  2-3 되는 대로 복사해서 필요한 메뉴를 꾸민다.

    2-3-1 대부분 복사해 온 내용이다. 수정한 부분은 메뉴의 이름을 바꾸고 메뉴를 2개로 나누었다.

      2-3-1-1 Sign out, Sign in, Sign up이 한 그룹, 이메일 inbox가 한 그룹이다. 로그인 관련은 오른쪽으로 보냈다.

      2-3-1-2 로그인 상태에 따라서 sign out이 보일지 sign in, sign up이 보일지를 결정한다.

 

    2-3-2 컨텐츠는 부분은 .container로 처리하여 메뉴는 화면에 따라 늘이고 컨텐츠는 범위를 한정하였다.

 

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
  <a class="navbar-brand" [routerLink]="'.'">
    EM<i class="fas fa-paper-plane bg-dark text-white m-0"></i>IL
  </a>

  <!-- Step 3: Toggle the value of the property when the toggler button is clicked. -->
  <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
    &#9776;
  </button>

  <!-- Step 2: Add the ngbCollapse directive to the element below. -->
  <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item">
        <!-- Step 4: Close the menu when a link is clicked. -->
        <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">Inbox</a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <!-- Step 4: Close the menu when a link is clicked. -->
        <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">Sign Out</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">Sign In</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
  <p>
    These steps were used to create this responsive navbar.
  </p>

  <ol>
    <li>
      Add a property to the component to track whether the menu is open.
      In this example, the property is called <code>isMenuCollapsed</code>.
    </li>
    <li>
      Add an <code>ngbCollapse</code> directive to the element
      with the <code>navbar-collapse</code> CSS class. Use the
      property in the component as the value for the directive.
    </li>
    <li>
      When the navbar toggler button is clicked, toggle the
      value of the property in the component.
    </li>
    <li>
      If you would like the menu to close when a link is clicked,
      add a <code>(click)</code> handler to each link and set the
      property on the component to true to hide the menu.
    </li>
  </ol>

  <p>
    Resize your browser window to see it in action!
  </p>
</div>

 

    2-3-3 collapse를 동작하게 하려면 가이드에서 말하는 것처럼 isMenuCollapsed라는 속성을 세팅해야 한다

 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public isMenuCollapsed = true;
}

 

  2-4 결과 화면이다.

    2-4-1 참 쉽죠 ㅎㅎ