AppShell

App

Tam ekran layout wrapper. sidebarContent, topbarContent ve logoContent HTML slot'ları alır. Mobilde hamburger butonu NavDrawer açar.

Sidebar + topbar + content

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
}) %>

Sadece topbar (sidebar yok)

Preview

Search…

Code

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

Source modules/app/AppShell.ejs

<%
  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';
%>


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

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

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