<header>
  <nav class='navbar navbar-expand-lg navigation navbar-light bg-light'>
    <%= link_to '/', class: 'navbar-brand' do %>
      <%= image_tag 'logo.png' %>
    <% end %>
    <button class='navbar-toggler' data-bs-toggle='collapse' data-bs-target='#navbarSupportedContent'
      aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>
      <span class='navbar-toggler-icon'></span>
    </button>

    <div class='collapse navbar-collapse' id='navbarSupportedContent'>
      <ul class='navbar-nav ms-auto main-nav align-items-center'>
        <li class='nav-item dropdown dropdown-slide'>
          <%= link_to t('header.board'), '#', class: 'nav-link dropdown-toggle', data: { bs_toggle: 'dropdown' }, aria: { haspopup: 'true', expanded: 'false' }, id: 'header-board-menu' %>
          <div class='dropdown-menu dropdown-menu-end'>
            <%= link_to t('header.board_index'), boards_path, class: 'dropdown-item' %>
            <%= link_to t('header.create_board'), new_board_path, class: 'dropdown-item' %>
          </div>
        </li>

        <li class='nav-item'>
          <%= link_to t('header.bookmark_index'), bookmarks_boards_path, class: 'nav-link' %>
        </li>

        <li class='nav-item dropdown dropdown-slide'>
          <%= link_to '#', class: 'nav-link', data: { bs_toggle: 'dropdown' }, aria: { haspopup: 'true', expanded: 'false' }, id: 'header-profile' do %>
            <%= image_tag current_user.avatar_url, class: 'rounded-circle mr15', width: '40', height: '40' %>
          <% end %>
          <div class='dropdown-menu dropdown-menu-end'>
            <div class='dropdown-item'><%= current_user.decorate.full_name %></div>
            <div class='dropdown-divider'></div>
            <%= link_to t('header.profile'), profile_path, class: 'dropdown-item' %>
            <%= link_to t('header.logout'), logout_path, class: 'dropdown-item', data: { turbo_method: :delete } %>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header>