[블로그 만들기] 8. 로그인 구현 : navbar 변경하기

Feb 06, 2024

1. layout에 header.mustache 폴더에서 if문 집어넣기

조건에 따라 navbar 자동 적용됨


<!DOCTYPE html>
<html lang="en">

<head>
  <title>Blog</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">Metacoding</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            {{#sessionUser}}
                <li class="nav-item">
                    <a class="nav-link" href="/board/saveForm">글쓰기</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/user/updateForm">회원정보보기</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">로그아웃</a>
                </li>
            {{/sessionUser}}
            {{^sessionUser}}
                <li class="nav-item">
                    <a class="nav-link" href="/joinForm">회원가입</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/loginForm">로그인</a>
                </li>
            {{/sessionUser}}
        </ul>
      </div>
    </div>
  </nav>

See more posts

[블로그 만들기] 8. 로그인 구현 : navbar 변경하기

1. layout에 header.mustache 폴더에서 if문 집어넣기

More articles

[블로그 만들기] 9. 로그인 구현 : 오류잡기

지금까지 한 것

[블로그 만들기] 7. 로그인 구현 : 회원가입 때 입력한 정보 가져오기

[블로그 만들기] 6. 로그인 구현 : 가방에 담긴 정보를 DB에 담기