This site is three workspaces on a track: home, docs and playground. Use the numbered switcher in the taskbar and watch the desktop slide.

Usage

Give each workspace its own store, so it keeps its windows while it's out of view:

const stores = { home: createStore(homeState), docs: createStore(docsState) };

<WorkspaceTrack
  active={current}
  workspaces={[
    {
      id: "home",
      render: () => (
        <WindowManager store={stores.home}>
          <Desktop className="size-full">
            <AppWindows />
          </Desktop>
        </WindowManager>
      ),
    },
    {
      id: "docs",
      render: () => (
        <WindowManager store={stores.docs}>
          <Desktop className="size-full">
            <AppWindows />
          </Desktop>
        </WindowManager>
      ),
    },
  ]}
/>;

A workspace mounts the first time it's shown (so only the active one is pre-rendered) and then stays mounted. Offscreen workspaces are inert: out of the tab order and hidden from assistive technology.

To keep one taskbar over all of them, render it in a WindowManager over the active workspace's store: managers that share a store act as one.

Props