// マルロウ 漏水案件OS — Sidebar (208px labeled rail) + TopNav.

/* 初期化：2段クリックで確認（confirm() に依存しない）
 *
 * **本番では出さない。** window.MStore.reset() は msSeed()(架空の案件10件)を
 * state と localStorage の両方に入れ直す関数で、現場の誰かが押すと
 * 「実在しない案件が並んだ、普通に見える画面」になる ─ この製品がいちばん
 * 避けたい壊れ方(架空の案件に電話をかける)。モックは小さいので保存も必ず成功し、
 * その画面のまま操作できてしまう(読み込み直せば実データに戻るが、気づく手がかりが無い)。
 * 手元の開発(接続先が設定されていない = モックで動かしているとき)だけに残す。
 */
const IS_PRODUCTION = () => !!(window.MARUROU_CONFIG && window.MARUROU_CONFIG.supabaseUrl);
function ResetButton() {
  if (IS_PRODUCTION()) return null;
  const [armed, setArmed] = React.useState(false);
  React.useEffect(() => { if (!armed) return; const t = setTimeout(() => setArmed(false), 4000); return () => clearTimeout(t); }, [armed]);
  // IS_PRODUCTION()(supabaseUrlの設定有無)だけでは不十分 ─ 開発モード(接続先未設定)
  // でも marurou-boot.js が実データを読み込めていれば window.__MARUROU_LIVE__ が立つ。
  // その状態で初期化を押すと、実在しない架空案件10件で実データを上書きしてしまう
  // (この製品がいちばん避けたい壊れ方)。実データ起動中は本番と同じく出さない。
  const live = window.__MARUROU_LIVE__;
  if (live) return null;
  return (
    <button onClick={() => { if (armed) { window.MStore.reset(); setArmed(false); } else setArmed(true); }}
      title={armed ? 'もう一度押すと、この端末の控えを架空の初期データで上書きします' : '開発用：架空の初期データに戻す'}
      style={{ all: 'unset', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-caption)', fontWeight: armed ? 700 : 400, cursor: 'pointer',
        color: armed ? 'var(--destructive)' : 'var(--foreground-subtle)', padding: '2px 6px', borderRadius: 'var(--radius-sm)',
        border: '1px solid ' + (armed ? 'var(--destructive-border)' : 'var(--sidebar-border)'),
        background: armed ? 'var(--destructive-muted)' : 'transparent', flexShrink: 0, whiteSpace: 'nowrap',
        transition: 'all var(--duration-fast) var(--easing)' }}>{armed ? 'もう一度押す' : '初期化'}</button>
  );
}

/* ㉓: 共用PC・貸与タブレット対策。サーバ側セッション無効化 + 端末の案件控えを消して再読込。 */
function LogoutButton() {
  const [busy, setBusy] = React.useState(false);
  // 押し間違い防止に確認を1段(ResetButton と同じ流儀・9/7 統合担当)。
  // 隣の「初期化」と並ぶうえ、作業中の人が押すと入力中の画面ごと消えるため、
  // 1回目は「もう一度押す」に変わるだけにする。4秒で自動的に戻す。
  const [armed, setArmed] = React.useState(false);
  React.useEffect(() => { if (!armed) return; const t = setTimeout(() => setArmed(false), 4000); return () => clearTimeout(t); }, [armed]);
  // モックだけの手元起動ではログイン経路が無いので出さない。
  const cloud = window.MarurouCloud;
  const live = !!(window.__MARUROU_LIVE__ || IS_PRODUCTION()
    || (cloud && typeof cloud.isLoggedIn === 'function' && cloud.isLoggedIn()));
  if (!live) return null;
  return (
    <button type="button" disabled={busy} data-shell-logout="true" aria-label="ログアウト"
      onClick={async () => {
        if (busy) return;
        if (!armed) { setArmed(true); return; }
        setArmed(false);
        setBusy(true);
        try {
          if (cloud && typeof cloud.logout === 'function') await cloud.logout();
        } catch (_) { /* 端末側の掃除は続ける */ }
        try { localStorage.removeItem('marurou.store.v5'); } catch (_) {}
        location.reload();
      }}
      title={armed ? 'もう一度押すとログアウトします(この端末の案件控えも消えます)' : 'ログアウトしてこの端末の案件控えを消す'}
      style={{ all: 'unset', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-caption)', fontWeight: 600,
        cursor: busy ? 'default' : 'pointer', color: 'var(--muted-foreground)', padding: '2px 6px',
        borderRadius: 'var(--radius-sm)', border: '1px solid var(--sidebar-border)', flexShrink: 0,
        whiteSpace: 'nowrap', opacity: busy ? 0.5 : 1,
        fontWeight: armed ? 700 : 600,
        color: armed ? 'var(--destructive)' : 'var(--muted-foreground)',
        borderColor: armed ? 'var(--destructive-border)' : 'var(--sidebar-border)',
        background: armed ? 'var(--destructive-muted)' : 'transparent',
        transition: 'all var(--duration-fast) var(--easing)' }}>{armed ? 'もう一度押す' : 'ログアウト'}</button>
  );
}

/* ㉟: 左ナビ件数の「全体 / 自分」切替。rpc_open_counts.mine を読む。 */
const NAV_COUNT_SCOPE_KEY = 'marurou.navCountScope';
function readNavCountScope() {
  try { return localStorage.getItem(NAV_COUNT_SCOPE_KEY) === 'mine' ? 'mine' : 'all'; }
  catch (_) { return 'all'; }
}
function writeNavCountScope(scope) {
  try { localStorage.setItem(NAV_COUNT_SCOPE_KEY, scope === 'mine' ? 'mine' : 'all'); }
  catch (_) {}
}

function Sidebar({ active, onNavigate, taskCount, caseCount, countScope, onCountScope, mineReady, sidebarOpen, onSidebarClose }) {
  const trackCount = k => (window.TR_ROWS || []).filter(r => r.kind === k && r.state !== 'done').length;
  const scope = countScope === 'mine' ? 'mine' : 'all';
  const nav = [
    { id: 'dashboard', label: 'ダッシュボード' },
    { id: 'daily',     label: '日次レポート' },
    { id: 'receipts',  label: '入金レポート' },
    { id: 'tasks',     label: 'TODO', badge: taskCount },
    { id: 'cases',     label: '案件', badge: caseCount },
    // 精算はここに無く、案件詳細からも開けなかったので、**どこからも辿り着けなかった**。
    // 経理が毎月ここで締めるので、入口を1つ置く（案件ごとの採算は案件詳細の「収支」）。
    { id: 'payment',   label: '精算' },
    { id: 'clients',   label: '取引先' },
  ];
  // 管理-1: 氏名は実ログインユーザー。ログイン判定は MarurouCloud.user()、
  // 表示名は seed の me(displayName)。役職・チーム列は users に無いので出さない(11月以降)。
  // ログアウト／取得失敗時は「—」(嘘の固定名を出さない)。
  const cloudUser = (window.MarurouCloud && typeof window.MarurouCloud.user === 'function')
    ? window.MarurouCloud.user() : null;
  const storeMe = window.MStore && window.MStore.me ? window.MStore.me() : null;
  const displayName = (storeMe && (storeMe.displayName || storeMe.name))
    || (cloudUser && cloudUser.email) || null;
  const me = (cloudUser || storeMe) ? {
    displayName: displayName || null,
    name: displayName || null,
    role: (storeMe && storeMe.role) || null,
  } : null;
  const storeSnap = window.useMStore ? window.useMStore() : null;
  const tenantName = (storeSnap && storeSnap.tenant && storeSnap.tenant.name) || null;
  if (me && me.role === 'admin') nav.push({ id: 'admin', label: '管理' });

  const childActive = it => it.children && it.children.some(c => c.id === active);
  const [open, setOpen] = React.useState(() => {
    const init = {}; nav.forEach(it => { if (it.children) init[it.id] = true; }); return init;
  });
  const toggle = id => setOpen(o => ({ ...o, [id]: !o[id] }));

  const rowBase = {
    width: '100%', textAlign: 'left', border: 'none', fontFamily: 'var(--font-sans)', cursor: 'pointer',
    display: 'flex', alignItems: 'center', gap: 6, transition: 'background var(--duration-fast) var(--easing)', background: 'transparent',
  };

  function Leaf({ it, parent }) {
    const isActive = active === it.id;
    const title = parent ? parent.label + ' ／ ' + it.label : it.label;
    return (
      <button onClick={() => { onNavigate && onNavigate(it.id, title); onSidebarClose && onSidebarClose(); }}
        style={{ ...rowBase,
          padding: parent ? '0 12px 0 26px' : '0 12px 0 14px', height: parent ? 26 : 32,
          borderRight: isActive ? '2px solid var(--sidebar-primary)' : '2px solid transparent',
          background: isActive ? 'var(--sidebar-accent)' : 'transparent',
          fontSize: parent ? 'var(--text-body-sm)' : 'var(--text-body-md)',
          fontWeight: isActive ? 600 : parent ? 400 : 500,
          color: isActive ? 'var(--brand)' : parent ? 'var(--muted-foreground)' : 'var(--sidebar-foreground)' }}
        onMouseEnter={e => !isActive && (e.currentTarget.style.background = 'var(--sidebar-accent)')}
        onMouseLeave={e => !isActive && (e.currentTarget.style.background = 'transparent')}>
        {parent && <span style={{ width: 4, height: 4, borderRadius: 999, flexShrink: 0, marginRight: 4, background: isActive ? 'var(--brand)' : 'var(--border-strong)' }} />}
        <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.label}</span>
        {it.badge != null && it.badge > 0 && (
          <span className="mono" style={{ minWidth: 16, height: 16, padding: '0 4px', borderRadius: 999, background: isActive ? 'var(--brand)' : 'var(--bg-pressed)', color: isActive ? '#fff' : 'var(--muted-foreground)', fontSize: 'var(--text-caption)', fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{it.badge}</span>
        )}
        {it.n != null && (
          <span className="mono" style={{ fontSize: 'var(--text-caption)', fontWeight: 600, color: isActive ? 'var(--brand)' : 'var(--foreground-subtle)' }}>{it.n}</span>
        )}
      </button>
    );
  }

  function Parent({ it }) {
    const isOpen = !!open[it.id];
    const hot = childActive(it);
    const isActive = active === it.id;
    return (
      <React.Fragment>
        <div style={{ display: 'flex', alignItems: 'stretch',
          borderRight: isActive ? '2px solid var(--sidebar-primary)' : '2px solid transparent',
          background: isActive ? 'var(--sidebar-accent)' : 'transparent' }}
          onMouseEnter={e => !isActive && (e.currentTarget.style.background = 'var(--sidebar-accent)')}
          onMouseLeave={e => !isActive && (e.currentTarget.style.background = 'transparent')}>
          <button onClick={() => { onNavigate && onNavigate(it.id, it.label); onSidebarClose && onSidebarClose(); }}
            style={{ ...rowBase, padding: '0 4px 0 14px', height: 32, flex: 1,
              fontSize: 'var(--text-body-md)', fontWeight: isActive || hot ? 600 : 500,
              color: isActive || hot ? 'var(--brand)' : 'var(--sidebar-foreground)' }}>
            <span style={{ flex: 1 }}>{it.label}</span>
            {it.n != null && <span className="mono" style={{ fontSize: 'var(--text-caption)', fontWeight: 600, color: isActive || hot ? 'var(--brand)' : 'var(--foreground-subtle)' }}>{it.n}</span>}
          </button>
          <button onClick={() => toggle(it.id)} title={isOpen ? '閉じる' : '開く'}
            style={{ all: 'unset', cursor: 'pointer', width: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--foreground-subtle)' }}>
            <span style={{ fontSize: 'var(--text-caption)', transform: isOpen ? 'rotate(90deg)' : 'none', transition: 'transform var(--duration-fast) var(--easing)', display: 'inline-block' }}>▸</span>
          </button>
        </div>
        {isOpen && (
          <div style={{ position: 'relative', padding: '2px 0 4px' }}>
            <span style={{ position: 'absolute', left: 18, top: 0, bottom: 8, width: 1, background: 'var(--sidebar-border)' }} />
            {it.children.map(c => <Leaf key={c.id} it={c} parent={it} />)}
          </div>
        )}
      </React.Fragment>
    );
  }

  return (
    <nav className={"mr-sidebar" + (sidebarOpen ? " mr-sidebar--open" : "")} style={{ width: 'var(--sidebar-width)', background: 'var(--sidebar)', borderRight: '1px solid var(--sidebar-border)', display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
      <div style={{ padding: '14px 14px 12px', borderBottom: '1px solid var(--sidebar-border)', display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-start' }}>
        <span className="mr-logo mr-logo--lg" role="img" aria-label="Marurou">
          <span className="mr-logo-mark">M</span><span className="mr-logo-text">Maru<span className="mr-flow">rou</span></span>
        </span>
        {tenantName && (
          <div style={{ fontSize: 'var(--text-caption)', color: 'var(--muted-foreground)', paddingLeft: 2, maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={tenantName}>{tenantName}</div>
        )}
      </div>
      <div style={{ padding: '6px 0', flex: 1, overflowY: 'auto' }}>
        {/* ㉟ 件数バッジの軸: 全体=テナント全件 / 自分=rpc_open_counts.mine */}
        <div data-nav-count-scope style={{ padding: '4px 12px 8px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          <span style={{ fontSize: 'var(--text-caption)', color: 'var(--muted-foreground)', paddingLeft: 2 }}>件数の見方</span>
          <span style={{ display: 'inline-flex', padding: 2, borderRadius: 'var(--radius-md)', background: 'var(--muted)', border: '1px solid var(--border)', alignSelf: 'stretch' }}>
            {[['all', '全体'], ['mine', '自分']].map(([k, l]) => {
              const on = scope === k;
              const disabled = k === 'mine' && !mineReady;
              return (
                <button key={k} type="button" disabled={disabled}
                  title={disabled ? '自分の件数はまだ届いていません' : (k === 'mine' ? '自分が主担当・副担当・営業担当の件数' : 'テナント全体の件数')}
                  aria-pressed={on}
                  onClick={() => { if (disabled) return; writeNavCountScope(k); onCountScope && onCountScope(k); }}
                  style={{ all: 'unset', cursor: disabled ? 'default' : 'pointer', fontFamily: 'var(--font-sans)', flex: 1, textAlign: 'center',
                    fontSize: 'var(--text-body-sm)', fontWeight: on ? 700 : 500, padding: '4px 8px', borderRadius: 'var(--radius-sm)',
                    background: on ? 'var(--card)' : 'transparent', color: disabled ? 'var(--foreground-subtle)' : (on ? 'var(--foreground)' : 'var(--muted-foreground)'),
                    boxShadow: on ? 'var(--shadow-sm)' : 'none', opacity: disabled ? 0.55 : 1,
                    transition: 'all var(--duration-fast) var(--easing)' }}>{l}</button>
              );
            })}
          </span>
        </div>
        <div style={{ marginBottom: 4 }}>
          {nav.map((it, i) => (
            <React.Fragment key={it.id}>
              {it.children ? <Parent it={it} /> : <Leaf it={it} />}
            </React.Fragment>
          ))}
        </div>
      </div>
      <div style={{ padding: '10px 14px', borderTop: '1px solid var(--sidebar-border)', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 24, height: 24, borderRadius: 999, background: 'var(--brand)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 'var(--text-body-sm)', fontWeight: 700, flexShrink: 0 }}>
            {me && (me.displayName || me.name) ? String(me.displayName || me.name).charAt(0) : '—'}</div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 'var(--text-body-sm)', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {me && (me.displayName || me.name) ? (me.displayName || me.name) : '—'}</div>
            <div style={{ fontSize: 'var(--text-caption)', color: 'var(--muted-foreground)' }}>
              {me && me.role === 'admin' ? '管理者' : me ? '一般' : '—'}</div>
          </div>
          <LogoutButton />
          <ResetButton />
        </div>
        <a href="first-day.html" target="_blank" rel="noopener noreferrer"
           style={{ fontSize: 'var(--text-caption)', color: 'var(--brand)', textDecoration: 'none', fontWeight: 600, paddingLeft: 2 }}>
          はじめての方へ（1枚）
        </a>
      </div>
    </nav>
  );
}

function NotifyBell() {
  const [open, setOpen] = React.useState(false);
  const [rows, setRows] = React.useState([]);
  const [unread, setUnread] = React.useState(0);
  const [err, setErr] = React.useState(null);
  const boxRef = React.useRef(null);

  const KIND_LABEL = {
    save_failed: '保存の失敗',
    contact_log: '連絡の送信',
    daily_digest: '朝のまとめ',
  };
  const STATUS_LABEL = {
    sent: '成功',
    no_destination: '宛先なし',
    unavailable: '送れない',
    error: '失敗',
  };

  const load = React.useCallback(async () => {
    const cloud = typeof window !== 'undefined' ? window.MarurouCloud : null;
    if (!cloud || !cloud.listNotifyLog) {
      setRows([]); setUnread(0); setErr(null);
      return;
    }
    try {
      const got = await cloud.listNotifyLog({ limit: 50 });
      setRows(Array.isArray(got && got.rows) ? got.rows : []);
      setUnread(Number(got && got.unread) || 0);
      setErr(null);
    } catch (e) {
      setErr((e && e.message) || String(e));
    }
  }, []);

  React.useEffect(() => { load(); }, [load]);
  React.useEffect(() => {
    if (!open) return;
    load();
    const onDoc = (e) => {
      if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open, load]);

  const markAll = async () => {
    const cloud = typeof window !== 'undefined' ? window.MarurouCloud : null;
    if (!cloud || !cloud.markNotifyRead) return;
    try {
      await cloud.markNotifyRead(null);
      await load();
    } catch (e) {
      setErr((e && e.message) || String(e));
    }
  };

  const fmtWhen = (iso) => {
    if (!iso) return '—';
    const d = new Date(iso);
    if (Number.isNaN(d.getTime())) return '—';
    const m = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    const hh = String(d.getHours()).padStart(2, '0');
    const mm = String(d.getMinutes()).padStart(2, '0');
    return `${m}/${day} ${hh}:${mm}`;
  };

  return (
    <div ref={boxRef} style={{ position: 'relative' }}>
      <button type="button" aria-label="通知"
        onClick={() => setOpen(o => !o)}
        style={{
          all: 'unset', cursor: 'pointer', position: 'relative',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 40, height: 40, color: 'var(--foreground)', fontSize: 18,
          fontFamily: 'var(--font-sans)',
        }}>
        <span aria-hidden="true" style={{ fontSize: 'var(--text-body-sm)', fontWeight: 600 }}>通知</span>
        {unread > 0 && (
          <span style={{
            position: 'absolute', top: 6, right: 4, minWidth: 16, height: 16,
            padding: '0 4px', borderRadius: 'var(--radius-full)',
            background: 'var(--destructive)', color: 'var(--destructive-foreground)',
            fontSize: 10, lineHeight: '16px', textAlign: 'center', fontWeight: 700,
          }}>{unread > 99 ? '99+' : unread}</span>
        )}
      </button>
      {open && (
        <div role="dialog" aria-label="通知一覧" style={{
          position: 'absolute', right: 0, top: '100%', marginTop: 4, width: 320,
          maxHeight: 360, overflow: 'auto', zIndex: 40,
          background: 'var(--card)', border: '1px solid var(--border)',
          borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-md)',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '10px 12px', borderBottom: '1px solid var(--border)',
            fontSize: 'var(--text-body-sm)', fontWeight: 600,
          }}>
            <span>通知</span>
            {unread > 0 && (
              <button type="button" onClick={markAll} style={{
                all: 'unset', cursor: 'pointer', color: 'var(--primary)',
                fontSize: 'var(--text-body-sm)', fontFamily: 'var(--font-sans)',
              }}>すべて既読</button>
            )}
          </div>
          {err && (
            <div style={{ padding: 12, color: 'var(--destructive)', fontSize: 'var(--text-body-sm)' }}>{err}</div>
          )}
          {!err && rows.length === 0 && (
            <div style={{ padding: 16, color: 'var(--muted-foreground)', fontSize: 'var(--text-body-sm)' }}>
              まだ通知はありません
            </div>
          )}
          {rows.map((r) => {
            const unreadRow = !r.readAt;
            return (
              <div key={r.id} style={{
                padding: '10px 12px', borderBottom: '1px solid var(--border)',
                background: unreadRow ? 'var(--accent)' : 'transparent',
                fontSize: 'var(--text-body-sm)',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                  <strong style={{ fontWeight: 600 }}>{KIND_LABEL[r.kind] || r.kind || '通知'}</strong>
                  <span style={{ color: 'var(--muted-foreground)', whiteSpace: 'nowrap' }}>{fmtWhen(r.createdAt)}</span>
                </div>
                <div style={{ marginTop: 2, color: r.status === 'sent' ? 'var(--foreground)' : 'var(--destructive)' }}>
                  {STATUS_LABEL[r.status] || r.status || '—'}
                </div>
                {r.detail && (
                  <div style={{ marginTop: 2, color: 'var(--muted-foreground)', wordBreak: 'break-word' }}>
                    {String(r.detail).slice(0, 120)}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function TopNav({ title, count, countUnit = '件', onNew, newLabel = '＋ 新規受付', crumb, q, onQ, onHamburger }) {
  return (
    <header style={{ height: 48, display: 'flex', alignItems: 'center', gap: 16, padding: '0 0 0 20px', background: 'var(--card)', borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
      <button className="mr-hamburger" onClick={onHamburger} style={{ all: 'unset', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 20, lineHeight: 1, padding: '4px 8px', color: 'var(--foreground)', display: 'none' }} aria-label="メニュー">☰</button>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, minWidth: 0 }}>
        {crumb && <span style={{ fontSize: 'var(--text-body-sm)', color: 'var(--muted-foreground)' }}>{crumb} ／</span>}
        <div style={{ fontSize: 'var(--text-display-sm)', fontWeight: 700, letterSpacing: 'var(--tracking-tight)', whiteSpace: 'nowrap' }}>{title}</div>
        {count != null && <div style={{ fontSize: 'var(--text-body-sm)', color: 'var(--muted-foreground)' }} className="mono">{count}{countUnit}</div>}
      </div>
      <div style={{ flex: 1 }} />
      <div style={{ position: 'relative' }}>
        <AfInput id="mr-topnav-q" className="mr-topnav-search" value={q || ''} onChange={e => onQ && onQ(e.target.value)} placeholder="案件・物件・TODO・取引先..." style={{ width: 256, paddingRight: 52 }} />
        <div style={{ position: 'absolute', right: 6, top: 5, display: 'inline-flex', gap: 4, pointerEvents: 'none' }}>
          <AfKbd>⌘</AfKbd><AfKbd>K</AfKbd>
        </div>
      </div>
      <NotifyBell />
      <AfButton className="mr-topnav-new" variant="primary" onClick={onNew} style={{ height: 48, borderRadius: 0, padding: '0 20px', borderColor: 'transparent' }}>{newLabel}</AfButton>
    </header>
  );
}

Object.assign(window, { Sidebar, TopNav, NotifyBell, readNavCountScope, writeNavCountScope, NAV_COUNT_SCOPE_KEY });