NavDrawer

App

Herhangi bir trigger + içeriği Drawer'a saran wrapper. Kendi açık/kapalı state'ini tutar. AppNav'ın mobil menüsü olarak kullanılır.

Sol nav (standalone)

Preview

Navigation

Code

<%- include('modules/app/NavDrawer', {
  title: 'Navigation',
  side: 'left',
  navItems: [
    { label: 'Home',     href: '/',         active: currentPath === '/' },
    { label: 'Features', href: '/features' },
    { label: 'Pricing',  href: '/pricing'  },
    { label: 'Blog',     href: '/blog'     },
  ]
}) %>

Sağ panel (cart/settings)

Preview

Cart (3)

Product A $29.00

Product B $49.00

Product C $15.00

Code

<%- include('modules/app/NavDrawer', {
  title: 'Cart (' + cartCount + ')',
  side: 'right',
  children: cartItemsHtml,
  footerContent: ''
}) %>

Source modules/app/NavDrawer.ejs

<%
  var _id    = locals.id || ('nav-drawer-' + Math.random().toString(36).substr(2,6));
  var _title = locals.title || 'Menu';
  var _side  = locals.side  || 'left';
  var _items = locals.navItems || [];
%>
<%
  var _navContent = locals.children;
  if (!_navContent && _items.length) {
    var _links = _items.map(function(item){
      return ''+item.label+'';
    }).join('');
    _navContent = ''+_links+'';
  }
%>
<%- include('../ui/Drawer', {
  id:       _id,
  title:    _title,
  side:     _side,
  open:     !!locals.open,
  footer:   locals.footerContent || '',
  children: _navContent || ''
}) %>