<div id="root"></div>

<button>focusable element before panel</button>
<div id="panel">
  <div id="panel-header">
    <span id="lang-select-container"></span>
    <button>glossary</button>
  </div>
  <div id="panel-body">
  </div>
</div>
<button>focusable element after panel</button>  

#panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 200px;
  background-color: antiquewhite;
}

#panel-header {
  width: 280px;
  height: 20px;
  background-color: darksalmon;
  display: flex;
  justify-content: space-between;
}

#panel-body {
  width: 280px;
  flex-grow: 1;
  background-color: dimgray;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

import { Popover } from "https://cdn.skypack.dev/@headlessui/react@1.6.6";
import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

function TriggerButton() {
  return (<span>test</span>)
}

function LanguageSelectorPopover() {
  return (
    <Popover>
      {({ open }) => (
        <>
          { 
            ReactDOM.createPortal((
              <Popover.Button>
                {open ? "langSelect open" : "langSelect closed"}
              </Popover.Button>
            ), document.querySelector('#lang-select-container'))
          }

          {
            ReactDOM.createPortal((
              <Popover.Panel focus={true}>
                <div class="flex-column">
                  <button>English</button>
                  <button>Italian</button>
                  <button>Spanish</button>
                </div>
              </Popover.Panel>
            ), document.querySelector('#panel-body'))
          }
        </>
      )}
    </Popover>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <LanguageSelectorPopover />
  </React.StrictMode>,
  document.getElementById("root")
);