<!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="@{/login}" class="nav-link text-white">
<i class="bi bi-person-fill me-2"></i>
ログイン
</a>
</li>
<li class="nav-item">
<a th:href="@{/logout}" class="nav-link text-white">
<i class="bi bi-box-arrow-right me-2"></i>
ログアウト
</a>
</li>
<li class="nav-item">
<a th:href="@{/city}" class="nav-link text-white">
<i class="bi bi-table me-2"></i>
BLDGデータリスト
</a>
</li>
<li class="nav-item">
<a th:href="@{/admin/list}" class="nav-link text-white">
<i class="bi bi-table me-2"></i>
マッパーリスト
</a>
</li>
<li class="nav-item">
<a th:href="@{/howto}" 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>
