AppSidebar

App

Daraltılabilir kenar çubuğu. navGroups veya navItems alır; collapsed toggle dahili. searchable prop ile yerleşik arama filtresi; footerContent slotu ile kullanıcı bilgisi gösterilebilir.

Açık (grouped nav + footer)

Preview

Jane Doe

Admin

Code

<%- include('modules/app/AppSidebar', {
  navGroups: [
    { label: 'Main', items: [
      { id: 'dashboard', label: 'Dashboard', icon: 'fa-solid fa-house', href: '/' },
      { id: 'analytics', label: 'Analytics',  icon: 'fa-solid fa-chart-bar', badge: 3, href: '/analytics' },
    ]},
    { label: 'Settings', items: [
      { id: 'team',     label: 'Team',     icon: 'fa-solid fa-users', href: '/team' },
      { id: 'settings', label: 'Settings', icon: 'fa-solid fa-gear',  href: '/settings' },
    ]},
  ],
  activeId: currentPage,
  footerContent: userMenuHtml
}) %>

Arama filtreli sidebar

Preview

Search…

Code

<%- include('modules/app/AppSidebar', {
  navGroups: navGroups,
  activeId: currentPage,
  searchable: true
}) %>

Daraltılmış (icon-only)

Preview

Code

<%- include('modules/app/AppSidebar', {
  navGroups: navGroups,
  activeId:  currentPage,
  collapsed: true
}) %>

Source modules/app/AppSidebar.ejs

<%
  var _id         = locals.id || ('sidebar-' + Math.random().toString(36).substr(2,6));
  var _activeId   = locals.activeId || '';
  var _collapsed  = !!locals.collapsed;
  var _groups     = locals.navGroups || (locals.navItems ? [{ items: locals.navItems }] : []);
  var _searchable = locals.searchable !== false;
  var _searchId   = _id + '-search';
%>


  
  
    
  

  <% if (_searchable) { %>
  
    
      
      
    
  
  <% } %>

  
    <% _groups.forEach(function(group, gi) {
      var gKey = (group.label || String(gi)).replace(/\s+/g,'_');
      var hasActive = (group.items||[]).some(function(i){ return i.id === _activeId; });
    %>
    
      <% if (group.label && !_collapsed) { %>
        <% if (group.collapsible) { %>
        
        <% } else { %>
        <%= group.label %>
        <% } %>
      <% } %>
      
        <% (group.items||[]).forEach(function(item) {
          var isActive = item.id === _activeId;
          var cls = 'w-full flex items-center gap-2.5 rounded-lg text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus '
            + (_collapsed ? 'justify-center px-2 py-2' : 'px-3 py-2 text-left ')
            + (isActive ? 'bg-primary-subtle text-primary font-medium' : 'text-text-secondary hover:text-text-primary hover:bg-surface-overlay');
        %>
        
        <% if (item.href) { %>
         <%= (_collapsed && item.label) ? 'title="'+item.label+'"' : '' %> class="<%= cls %>">
        <% } else { %>
        <% } %>
        
        <% }); %>
      
    
    <% }); %>
  

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