<% 
// If there are more than 2 icons appearing in the tools menu,
// wrap it to the next line
let toolCount = tools? tools.length : 0;
if (darkToggle) {
  toolCount++;
} 
if (readerToggle) {
  toolCount++;
}
if (search && search === "overlay") {
  toolCount++;
}
const isWide = toolCount > 2; %>

<% toolCount = 0 %>
<% tools = tools || [] %>
<div class="<%- className %><%- isWide ? ' tools-wide' : ''%>">
<% tools.forEach(tool => {  %>

  <% if (tool.menu) { %>
    <% toolDropdownId = 'sidebar-tool-dropdown-' + toolCount %>
    <% toolCount = toolCount + 1 %>

    <a href="<%- tool.href %>" title="<%- tool.text %>" id="<%- toolDropdownId %>" class="sidebar-tool dropdown-toggle px-1" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-<%- tool.icon %>"></i></a>
    <ul class="dropdown-menu" aria-labelledby="<%- toolDropdownId %>">
      <% tool.menu.forEach(item => { %> 
        <li>
          <a class="dropdown-item <%- className %>-item" href="<%- item.href %>">
          <% if (item.icon) { %> 
            <i class="bi bi-<%- item.icon %> pe-1"></i>
          <% } %>
          <%- item.text %>
          </a>
        </li>
      <% }) %>     
    </ul>
  <% } else { %>
    <a href="<%- tool.href %>" title="<%- tool.text %>" class="sidebar-tool px-1"><i class="bi bi-<%- tool.icon %>"></i></a>
  <% } %>
<% }) %>

<% if (darkToggle) { %>  
  <% partial('navdarktoggle.ejs', { classes: 'sidebar-tool' }) %>
<% } %>
<% if (readerToggle) { %>
  <% partial('navreadertoggle.ejs', { classes: 'sidebar-tool' }) %>
<% } %>    
<% if (search && search === "overlay") { %>
    <% partial('navsearch.ejs', { classes: 'sidebar-tool' }) %>
<% } %>
</div>