<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- サイドバー -->
  <div th:fragment="sidebar">
    <div class="offcanvas offcanvas-start"
      data-bs-scroll="true"
      data-bs-backdrop="false"
      tabindex="-1"
      id="offcanvasScrolling"
      aria-labelledby="offcanvasScrollingLabel">
      <nav class="navbar-dark bg-image text-white h-100">

        <div class="offcanvas-header">
          <h4 class="offcanvas-title">
            <a th:href="@{/city}" class="text-white">
              <span class="d-inline-block me-1" style="transform: rotate(-15deg)">
                <i class="bi bi-credit-card-2-front-fill fs-3">
                </i>
              </span>
              Plateau-BLDG
            </a>
          </h4>
        </div>
  
        <div class="offcanvas-body pt-0">
          <hr class="mt-1">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a th:href="@{/city}" class="nav-link text-white">
                <i class="bi bi-table me-2"></i>
                配信データ
              </a>
            </li>
            <li class="nav-item">
              <a th:href="@{/admin}" class="nav-link text-white">
                <i class="bi bi-table me-2"></i>
                管理
              </a>
            </li>
            <li class="nav-item">
              <a href="https://github.com/yuuhayashi/task-bldg/wiki/HowToUse" class="nav-link text-white">
                <i class="bi bi-box-arrow-right me-2"></i>
                作業登録方法 (外部リンク)
              </a>
            </li>
            <li class="nav-item">
              <a href="https://github.com/yuuhayashi/citygml-osm/wiki/How_to_use" class="nav-link text-white">
                <i class="bi bi-box-arrow-right me-2"></i>
                OSM編集方法 (外部リンク)
              </a>
            </li>
            <li class="nav-item">
              <a th:href="@{/policy}" class="nav-link text-white">
                <i class="bi bi-box-arrow-right me-2"></i>
                利用規約
              </a>
            </li>
          </ul>

          <hr>
          <!-- 閉じるボタン(画面が小さい時に表示) -->
          <div class="text-center d-lg-none">
            <button type="button" class="btn-circle btn-light" data-bs-dismiss="offcanvas" aria-label="Close">
              <i class="bi bi-chevron-left"></i>
            </button>
          </div>
        </div>
      </nav>
    </div>
  </div>

  <!-- サイドバー折りたたみ時のトグルボタン -->
  <div th:fragment="toggler">
    <nav class="navbar navbar-expand-lg navbar-light">
      <div class="container-fluid">
        <button class="navbar-toggler"
          type="button"
          data-bs-toggle="offcanvas"
          data-bs-target="#offcanvasScrolling"
          aria-controls="offcanvasScrolling"
          aria-expanded="false"
          aria-label="Toggle offcanvas">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>
  </div>

</body>
</html>
