panelheader

2025-10-31 13:12:09 +01:00
parent 6b4a4af5f1
commit 321b0d84ae
6 changed files with 305 additions and 202 deletions
@@ -13,6 +13,7 @@ import {
  FolderPlusIcon,
  RestoreIcon,
 } from '../ui/icons';
+import PanelHeader from '../ui/PanelHeader';

 import { getTagColorStyle } from '../utils/colors';

@@ -351,90 +352,101 @@ const Sidebar = ({
  const rootNode = folderNodes.get('root');
  return (
    <aside className="sidebar">
-      <div className="panel-header sidebar__header">
-        <button
-          type="button"
-          className={`sidebar__title-button${tenantMenuOpen ? ' is-open' : ''}`}
-          onClick={toggleTenantMenu}
-          aria-haspopup="true"
-          aria-expanded={tenantMenuOpen}
-          ref={tenantButtonRef}
-        >
-          <span className="sidebar__title">
-            Papercrate
-            {tenantName ? <span className="sidebar__tenant"> / {tenantName}</span> : null}
-          </span>
-          <ChevronDownIcon
-            className={`sidebar__title-chevron${tenantMenuOpen ? ' is-open' : ''}`}
-            size={16}
-          />
-        </button>
-        {tenantMenuOpen ? (
-          <div
-            className={`menu${showTenantList ? '' : ' menu--simple'}`}
-            ref={tenantMenuRef}
-            role="menu"
-            aria-label="Account menu"
-          >
-            {showTenantList ? (
-              <>
-                <div className="menu__heading">Switch tenant</div>
-                <div className="menu__list">
-                  {tenants.map((tenant) => {
-                    const tenantId = tenant?.id || null;
-                    const isActive = tenantId === activeTenantId;
-                    const tenantLabel = tenant?.name;
-                    return (
-                      <button
-                        key={tenantId || tenantLabel}
-                        type="button"
-                        className={`menu__item${isActive ? ' active' : ''}`}
-                        onClick={() => handleTenantSelect(tenant)}
-                        role="menuitem"
-                      >
-                        <span className="menu__check-slot">
-                          {isActive ? <CheckIcon size={16} /> : null}
-                        </span>
-                        <span className="menu__label">{tenantLabel}</span>
-                      </button>
-                    );
-                  })}
+      <PanelHeader
+        className="sidebar__header"
+        leading={(
+          <>
+            <button
+              type="button"
+              className={`sidebar__title-button${tenantMenuOpen ? ' is-open' : ''}`}
+              onClick={toggleTenantMenu}
+              aria-haspopup="true"
+              aria-expanded={tenantMenuOpen}
+              ref={tenantButtonRef}
+            >
+              <span className="sidebar__title">
+                Papercrate
+                {tenantName ? <span className="sidebar__tenant"> / {tenantName}</span> : null}
+              </span>
+              <ChevronDownIcon
+                className={`sidebar__title-chevron${tenantMenuOpen ? ' is-open' : ''}`}
+                size={16}
+              />
+            </button>
+            {tenantMenuOpen ? (
+              <div
+                className={`menu${showTenantList ? '' : ' menu--simple'}`}
+                ref={tenantMenuRef}
+                role="menu"
+                aria-label="Account menu"
+              >
+                {showTenantList ? (
+                  <>
+                    <div className="menu__heading">Switch tenant</div>
+                    <div className="menu__list">
+                      {tenants.map((tenant) => {
+                        const tenantId = tenant?.id || null;
+                        const isActive = tenantId === activeTenantId;
+                        const tenantLabel = tenant?.name;
+                        return (
+                          <button
+                            key={tenantId || tenantLabel}
+                            type="button"
+                            className={`menu__item${isActive ? ' active' : ''}`}
+                            onClick={() => handleTenantSelect(tenant)}
+                            role="menuitem"
+                          >
+                            <span className="menu__check-slot">
+                              {isActive ? <CheckIcon size={16} /> : null}
+                            </span>
+                            <span className="menu__label">{tenantLabel}</span>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </>
+                ) : null}
+                <div className="menu__footer">
+                  <button
+                    type="button"
+                    className="menu__settings"
+                    onClick={handleSettingsFromMenu}
+                  >
+                    <SettingsIcon size={16} />
+                    Settings
+                  </button>
+                  <button
+                    type="button"
+                    className="menu__logout"
+                    onClick={handleLogoutFromMenu}
+                  >
+                    <LogoutIcon size={16} />
+                    Log out
+                  </button>
                </div>
-              </>
+              </div>
            ) : null}
-            <div className="menu__footer">
-              <button
-                type="button"
-                className="menu__settings"
-                onClick={handleSettingsFromMenu}
-              >
-                <SettingsIcon size={16} />
-                Settings
-              </button>
-              <button
-                type="button"
-                className="menu__logout"
-                onClick={handleLogoutFromMenu}
-              >
-                <LogoutIcon size={16} />
-                Log out
-              </button>
-            </div>
-          </div>
-        ) : null}
-        <div className="panel-actions__spacer" />
-        {onCollapse ? (
-          <button
-            type="button"
-            className="icon-button"
-            onClick={onCollapse}
-            aria-label="Collapse sidebar"
-            title="Collapse sidebar"
-          >
-            <ChevronsLeftIcon />
-          </button>
-        ) : null}
-      </div>
+          </>
+        )}
+        actions={
+          onCollapse
+            ? [
+                (
+                  <button
+                    key="collapse"
+                    type="button"
+                    className="icon-button"
+                    onClick={onCollapse}
+                    aria-label="Collapse sidebar"
+                    title="Collapse sidebar"
+                  >
+                    <ChevronsLeftIcon />
+                  </button>
+                ),
+              ]
+            : null
+        }
+      />
      <div className="panel-body sidebar__body">
        {status && (
          <div className="sidebar__status">