AppCommandBar

App

Ctrl+K ile açılan komut paleti. items dizisi ile özel komutlar; varsayılan Navigation/Actions/Recent grupları dahili. Klavye navigasyonu (↑↓ + Enter) destekler.

Varsayılan komutlar (açık panel)

Preview

Esc

Navigation

Actions

↑↓ Navigate ↵ Select Esc Close

Code

<%- include('modules/app/AppCommandBar') %>

Özel items + trigger butonu

Preview

Code

<%- include('modules/app/AppCommandBar', {
  placeholder: 'Search commands…',
  items: [
    { icon: 'fa-solid fa-basket-shopping', label: 'View Orders',   shortcut: 'G O', category: 'Navigation', href: '/orders' },
    { icon: 'fa-solid fa-box',             label: 'Inventory',     shortcut: 'G I', category: 'Navigation', href: '/inventory' },
    { icon: 'fa-solid fa-tag',             label: 'New Sale',      shortcut: 'C N', category: 'Actions' },
    { icon: 'fa-solid fa-file-export',     label: 'Export Report', shortcut: 'C E', category: 'Actions' },
    { icon: 'fa-solid fa-clock-rotate-left', label: 'Order #1042',      category: 'Recent', href: '/orders/1042' },
    { icon: 'fa-solid fa-clock-rotate-left', label: 'Customer: Acme Co', category: 'Recent', href: '/customers/acme' },
  ]
}) %>

Source modules/app/AppCommandBar.ejs

<%
  var _id       = locals.id       || 'cmd-bar-' + Math.random().toString(36).substr(2, 9);
  var _items    = locals.items    || [];
  var _placeholder = locals.placeholder || 'Type a command or search…';

  var defaultItems = [
    { icon: 'fa-solid fa-house',        label: 'Dashboard',       shortcut: 'G D', category: 'Navigation', href: '#' },
    { icon: 'fa-solid fa-users',        label: 'Users',           shortcut: 'G U', category: 'Navigation', href: '#' },
    { icon: 'fa-solid fa-chart-bar',    label: 'Analytics',       shortcut: 'G A', category: 'Navigation', href: '#' },
    { icon: 'fa-solid fa-gear',         label: 'Settings',        shortcut: 'G S', category: 'Navigation', href: '#' },
    { icon: 'fa-solid fa-plus',         label: 'New Project',     shortcut: 'C N', category: 'Actions' },
    { icon: 'fa-solid fa-file-export',  label: 'Export Data',     shortcut: 'C E', category: 'Actions' },
    { icon: 'fa-solid fa-clock-rotate-left', label: 'Recent: Dashboard', category: 'Recent', href: '#' },
    { icon: 'fa-solid fa-clock-rotate-left', label: 'Recent: Users',     category: 'Recent', href: '#' },
  ];

  var _allItems = _items.length ? _items : defaultItems;

  var categories = [];
  _allItems.forEach(function(item) {
    if (categories.indexOf(item.category) === -1) categories.push(item.category);
  });
%>

<% if (locals.trigger) { %>
  <%- locals.trigger %>
<% } else { %>
  
<% } %>



  
  

  
  
    
    
      
      
      
    

    
    
      <% categories.forEach(function(cat) {
        var catItems = _allItems.filter(function(i) { return i.category === cat; });
      %>
      
        <%= cat %>
        <% catItems.forEach(function(item, idx) { %>
        <% var tag = item.href ? 'a' : 'button'; %>
        <<%= tag %>
          <%= item.href ? 'href="' + item.href + '"' : 'type="button"' %>
          role="option"
          tabindex="-1"
          data-cmd-item
          data-label="<%= item.label.toLowerCase() %>"
          class="cmd-item flex w-full items-center gap-3 px-4 py-2.5 text-sm transition-colors text-text-primary hover:bg-surface-overlay focus:bg-surface-overlay outline-none"
        >
          
          <%= item.label %>
          <% if (item.shortcut) { %>
          
            <% item.shortcut.split(' ').forEach(function(key) { %>
            <%= key %>
            <% }); %>
          
          <% } %>
        >
        <% }); %>
      
      <% }); %>

      
      
        No results for your search.
      
    

    
    
      ↑↓ Navigate
      ↵ Select
      Esc Close