<%
  var _id         = locals.id        || ('app-drawer-' + Math.random().toString(36).substr(2, 6));
  var _title      = locals.title     || 'Navigation';
  var _side       = locals.side      || 'left';
  var _open       = !!locals.open;
  var _searchable = locals.searchable !== false;
  var _navGroups  = locals.navGroups || (locals.navItems ? [{ items: locals.navItems }] : []);
  var _activeId   = locals.activeId  || '';
  var _triggerLabel = locals.triggerLabel || 'Open Navigation';

  var overlayClass = _open ? 'opacity-100' : 'opacity-0 pointer-events-none';
  var panelBase = 'relative flex flex-col w-80 max-w-full h-full bg-surface-raised border-border shadow-xl transition-transform duration-200 focus-visible:outline-none';
  var panelSide = _side === 'right' ? 'ml-auto border-l' : 'mr-auto border-r';
  var panelTranslate = _open ? 'translate-x-0' : (_side === 'right' ? 'translate-x-full' : '-translate-x-full');
%>

<%# Trigger — fallback matches  %>
<% if (locals.triggerContent) { %>
<%- locals.triggerContent %>
<% } else { %>

  
  <%= _triggerLabel %>

<% } %>

<%# Drawer container %>

  


  

    

      
<%= _title %>
      
        
      
    

    

      <% if (locals.header) { %>
      
<%- locals.header %>
      <% } %>

      <% if (_searchable) { %>
      

        
          
        
        
        
          
        
      
      <% } %>

      

        <% _navGroups.forEach(function(group, gi) { %>
        

          <% if (group.label) { %>
          
<%= group.label %>
          <% } %>
          

            <% (group.items || []).forEach(function(item) {
              var isActive = item.id === _activeId;
            %>
            aria-current="page"<% } %>
              onclick="appDrawerSelect('<%= _id %>', '<%= item.id || '' %>')"
              class="w-full flex items-center justify-between gap-2 px-3 py-2 rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus <%= isActive ? 'bg-primary-subtle text-primary font-semibold' : 'text-text-primary hover:bg-surface-overlay' %>"
            >
              
                <% if (item.iconClass) { %>
                
                <% } else if (item.icon) { %>
                <%- item.icon %>
                <% } %>
                <%= item.label %>
              
              <% if (item.badge != null && Number(item.badge) > 0) { %>
              <%= item.badge %>
              <% } %>
            
            <% }); %>
          
        
        <% }); %>

        

          No results for ""
        
      

      <% if (locals.footer) { %>
      
<%- locals.footer %>
      <% } %>