AppShell

App

Full-screen layout wrapper with logo, sidebar and topbar slots. Sidebar renders as an aside on desktop and opens via a drawer on mobile.

Preview

Search…

Code

<%- include('modules/app/AppShell', {
  logoContent:  'Acme',
  sidebarContent: '<%- include("modules/app/AppSidebar", { navGroups: navGroups, activeId: activeId, searchable: true }) %>',
  topbarContent:  '<%- include("modules/app/AppTopBar", { children: topbarHtml }) %>',
  children: bodyHtml
}) %>

Preview

Search…

Code

<%- include('modules/app/AppShell', {
  topbarContent: '<%- include("modules/app/AppTopBar", { children: topbarHtml }) %>',
  children: bodyHtml
}) %>

<%
  var _id = locals.id || ('app-shell-' + Math.random().toString(36).substr(2,6));
  var _drawerId = _id + '-mobile';
  var _hasSidebar = !!(locals.sidebarContent);
  var _hasTopbar  = !!(locals.topbarContent);
  var _title = locals.mobileSidebarTitle || 'Navigation';
  var _collapsed = !!locals.sidebarCollapsed;
  var _logoContent = (_collapsed && locals.compactLogo)
    ? locals.compactLogo
    : (locals.logoContent || locals.compactLogo || '');
  var _logoIsCompact = _collapsed && !!locals.compactLogo;
  var _asideClassName = locals.asideClassName ? ' ' + locals.asideClassName : '';
  var _mainClassName  = locals.mainClassName  ? ' ' + locals.mainClassName  : '';
%>


  <% if (_hasSidebar) { %>
  
    <% if (_logoContent) { %>
    
      <%- _logoContent %>
    
    <% } %>
    
      <%- locals.sidebarContent %>
    
  
  <% } %>

  
    <% if (_hasTopbar) { %>
    
      <% if (_hasSidebar) { %>
      
      <% } %>
      <%- locals.topbarContent %>
    
    <% } %>
    
      <%- locals.children || '' %>
    
  

  <% if (_hasSidebar) { %>
  <%- include('../ui/Drawer', { id: _drawerId, title: _title, side: 'left', open: false, className: '!w-72', children: locals.sidebarContent || '' }) %>
  <% } %>

AppShell

Sidebar + topbar + content

Sadece topbar (sidebar yok)