Workspace Switcher

Switches between workspaces.

html

<details class="wssw" style="--accent:#F5C2E0;" >
  <summary class="wssw__trigger" aria-label="Switch workspace">
    <span class="wssw__mark" style="background:#F5C2E0;" aria-hidden="true"></span>
    <span class="wssw__id"><span class="wssw__name">Design Systems</span><span class="wssw__meta">12 members</span></span>
    <span class="wssw__chevron" aria-hidden="true">&#9662;</span>
  </summary>
  <div class="wssw__panel" role="group" aria-label="Workspaces">
    <a class="wssw__item is-current" href="#" aria-current="true">Design Systems</a>
    <a class="wssw__item" href="#">Marketing Site</a>
    <button class="wssw__add" type="button">+ New workspace</button>
  </div>
</details>
<style>
.wssw { position: relative; width: fit-content; font: 14px/1.4 system-ui, sans-serif; color: #241430; }
.wssw__trigger { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #FAF7F2; border: 1px solid rgba(36,20,48,.12); border-radius: 10px; cursor: pointer; list-style: none; }
.wssw__trigger::-webkit-details-marker { display: none; }
.wssw__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wssw__mark { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.wssw__id { display: flex; flex-direction: column; line-height: 1.25; }
.wssw__name { font-weight: 600; }
.wssw__meta { font-size: 12px; opacity: .6; }
.wssw__chevron { opacity: .5; font-size: 11px; }
.wssw__panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; background: #fff; border: 1px solid rgba(36,20,48,.12); border-radius: 10px; box-shadow: 0 8px 24px rgba(36,20,48,.14); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 10; }
.wssw__item { padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #241430; }
.wssw__item.is-current { font-weight: 600; }
.wssw__item:hover, .wssw__item:focus-visible { background: #FAF7F2; outline: none; }
.wssw__add { text-align: left; padding: 8px 10px; border-radius: 8px; border: none; background: none; font: inherit; color: #241430; opacity: .7; cursor: pointer; }
.wssw__add:hover, .wssw__add:focus-visible { background: #FAF7F2; opacity: 1; outline: none; }
</style>

tailwind

<details class="relative w-fit font-sans text-sm text-[#241430]" style="--accent:#F5C2E0;" >
  <summary class="wssw-tw__trigger flex items-center gap-2.5 px-3 py-2 bg-[#FAF7F2] border border-[#241430]/10 rounded-xl cursor-pointer list-none" aria-label="Switch workspace">
    <span class="w-[26px] h-[26px] rounded-lg flex-none" style="background:#F5C2E0;" aria-hidden="true"></span>
    <span class="flex flex-col leading-tight">
      <span class="font-semibold">Design Systems</span>
      <span class="text-xs opacity-60">12 members</span>
    </span>
    <span class="opacity-50 text-[11px]" aria-hidden="true">&#9662;</span>
  </summary>
  <div class="absolute top-1.5 left-0 min-w-[210px] bg-white border border-[#241430]/10 rounded-xl shadow-lg p-1.5 flex flex-col gap-0.5 z-10" role="group" aria-label="Workspaces">
    <a class="px-2.5 py-2 rounded-lg font-semibold no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#" aria-current="true">Design Systems</a>
    <a class="px-2.5 py-2 rounded-lg no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Marketing Site</a>
    <button class="text-left px-2.5 py-2 rounded-lg border-0 bg-transparent font-sans text-[#241430]/70 cursor-pointer hover:bg-[#FAF7F2] hover:text-[#241430]" type="button">+ New workspace</button>
  </div>
</details>
<style>
.wssw-tw__trigger::-webkit-details-marker { display: none; }
.wssw-tw__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

react

export function WorkspaceSwitcher({
  workspaceName = "Design Systems",
  memberCount = 12,
  accent = "#F5C2E0",
  open = false,
}) {
  return (
    <details open={open} style={{ position: "relative", width: "fit-content", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <summary aria-label="Switch workspace" style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 12px", background: "#FAF7F2", border: "1px solid rgba(36,20,48,.12)", borderRadius: 10, cursor: "pointer", listStyle: "none" }}>
        <span aria-hidden="true" style={{ width: 26, height: 26, borderRadius: 8, background: accent, flex: "none" }} />
        <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.25 }}>
          <span style={{ fontWeight: 600 }}>{workspaceName}</span>
          <span style={{ fontSize: 12, opacity: .6 }}>{memberCount} members</span>
        </span>
        <span aria-hidden="true" style={{ opacity: .5, fontSize: 11 }}>&#9662;</span>
      </summary>
      <div role="group" aria-label="Workspaces" style={{ position: "absolute", top: "calc(100% + 6px)", left: 0, minWidth: 210, background: "#fff", border: "1px solid rgba(36,20,48,.12)", borderRadius: 10, boxShadow: "0 8px 24px rgba(36,20,48,.14)", padding: 6, display: "flex", flexDirection: "column", gap: 2 }}>
        <a href="#" aria-current="true" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: "#241430", fontWeight: 600 }}>{workspaceName}</a>
        <a href="#" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: "#241430" }}>Marketing Site</a>
        <button type="button" style={{ textAlign: "left", padding: "8px 10px", borderRadius: 8, border: "none", background: "none", font: "inherit", color: "#241430", opacity: .7, cursor: "pointer" }}>+ New workspace</button>
      </div>
    </details>
  );
}