Ilo/design/shell.jsx

// Sidebar + topbar shell. Global layout.

function Sidebar({ active, onNav }) {
  const { NAV, NAV_GROW } = window.DATA;
  return (
    <aside className="sb">
      <div className="sb-brand">
        <div className="sb-mark">il</div>
        <div>
          <div className="sb-name">ایلو</div>
          <div className="sb-sub en">ilo · panel</div>
        </div>
      </div>

      <div className="sb-section">آموزش</div>
      {NAV.map(n => (
        <button key={n.id} className="sb-item"
                aria-current={active === n.id ? 'page' : undefined}
                onClick={() => onNav(n.id)}>
          <Icon name={n.icon} />
          <span>{n.fa}</span>
          {n.badge && <span className="badge num">{n.badge}</span>}
        </button>
      ))}

      <div className="sb-section">رشد کسب‌وکار</div>
      {NAV_GROW.map(n => (
        <button key={n.id} className="sb-item"
                aria-current={active === n.id ? 'page' : undefined}
                onClick={() => onNav(n.id)}>
          <Icon name={n.icon} />
          <span>{n.fa}</span>
        </button>
      ))}

      <div className="sb-bottom">
        <button className="sb-item"
                aria-current={active === 'settings' ? 'page' : undefined}
                onClick={() => onNav('settings')}>
          <Icon name="cog" />
          <span>تنظیمات</span>
        </button>
        <div className="sb-user">
          <div className="sb-avatar">آپ</div>
          <div className="sb-user-meta">
            <div className="sb-user-name">آرش پاکدل</div>
            <div className="sb-user-role">طرح حرفه‌ای</div>
          </div>
          <Icon name="chevron" className="flipx" />
        </div>
      </div>
    </aside>
  );
}

function Topbar({ crumb, search = true, right }) {
  return (
    <header className="topbar">
      <div className="crumb">
        {crumb.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <Icon name="chevron" className="ic-sm flipx sep" />}
            {i === crumb.length - 1 ? <b>{c}</b> : <span>{c}</span>}
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-spacer" />
      {search && (
        <div className="search">
          <Icon name="search" className="ic-sm" />
          <input placeholder="جستجو در دوره‌ها، دانشجویان…" />
          <kbd>⌘K</kbd>
        </div>
      )}
      <button className="iconbtn" title="اعلان‌ها">
        <Icon name="bell" />
        <span className="dot" />
      </button>
      {right}
    </header>
  );
}

window.Sidebar = Sidebar;
window.Topbar = Topbar;