<nav th:fragment="sidebar-nav"
    class="navbar align-items-start p-0 sidebar sidebar-dark accordion bg-gradient-primary navbar-dark">
    <div class="container-fluid d-flex flex-column p-0">
        <a class="navbar-brand d-flex justify-content-center align-items-center m-0 sidebar-brand" href="#">
            <div class="sidebar-brand-icon rotate-n-15">
                <i class="fas fa-laugh-wink"></i>
            </div>
            <div class="mx-3 sidebar-brand-text">
                <span>FinanceTracker</span>
            </div>
        </a>
        <hr class="my-0 sidebar-divider">
        <ul class="navbar-nav text-light" id="accordionSidebar">
            <li class="nav-item">
                <a class="nav-link active" th:href="@{/}">
                    <i class="material-icons">dashboard</i>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/transactions}">
                    <i class="material-icons">list</i>
                    <span>Transactions</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/investments}">
                    <i class="material-icons">currency_exchange</i>
                    <span>investments</span>
                </a>
            </li>
        </ul>
        <div class="text-center d-none d-md-inline">
            <button class="btn rounded-circle border-0" id="sidebarToggle" type="button">
                <i class="material-icons text-white">arrow_back_ios</i>
            </button>
        </div>
    </div>
</nav>