Is there a way to have two ionic side menus active at the same time?

Question

I'd like to achieve the following layout, in Ionic Vue, ideally using native components. Below is just a schema of what I want and I'm mostly interested in the desktop behavior:

Vue.createApp({
  data: () => ({
    isLeftOpen: false,
    isRightOpen: false
  }),
  methods: {
    toggleSidebar(side) {
      this[`is${side}Open`] = !this[`is${side}Open`];
    }
  }
}).mount('#app')

body { margin: 0; overflow: hidden; }
* { box-sizing: border-box; }
#app {
  height: 100vh;
  background-color: #f5f5f5;
}
main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
sidebar {
  background-color: white;
  display: block;
  padding: 1rem;
  width: 270px;
  position: absolute;
  top: 0;
  bottom: 0;
  transition: transform .21s cubic-bezier(.5,0,.3,1);
  box-shadow: 0 1px 8px 0 rgb(0 0 0 / 20%), 0 3px 4px 0 rgb(0 0 0 / 14%), 0 3px 3px -2px rgb(0 0 0 / 12%);
}
sidebar[left] {
  left: 0;
  transform: translateX(-280px)
}
sidebar[right] {
  right: 0;
  transform: translateX(280px)
}
sidebar.open {
  transform: translateX(0);
}
sidebar button {
  width: 2rem;
  height: 2rem;
  position: absolute;
  border-radius: 1rem;
  border: 1px solid #f5f5f5;
  right: .5rem;
  top: .5rem;
  cursor: pointer;
  font-size: 1.5rem
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <main>
    <button @click="toggleSidebar('Left')">left</button>
    <button @click="toggleSidebar('Right')">right</button>
  </main>
  <sidebar left
           :class="{open: isLeftOpen}">
    Left sidebar
    <button @click="toggleSidebar('Left')">&times;</button>
  </sidebar>
  <sidebar right
           :class="{open: isRightOpen}">
    Right sidebar
    <button @click="toggleSidebar('Right')">&times;</button>
  </sidebar>
</div>

In short, I want two sidebars completely unrelated, which should be opened/closed independently on all devices, according to user's choice. The argument that opening more than one sidebar at a time is not good UX doesn't really hold water on this project, as it's basically a full-screen map and the sidebars hold various controls and info about what's on the map. The requirement is that the user might want to have both sidebars open, but they might also want them both closed, even on big screens, to maximize the displayed portion of the map.

What options do I have here? To only have one "native" sidebar and mimic the second one with custom elements, using my own container and my own menu toggle resembling a native one? How would I make those look and behave as "native" on Android and iOS?

Here's my current layout, which achieves everything I want, except opening one sidebar always closes the other.

I don't know much about Ionic Vue (started using it today) but I'm decent in Vue. Tbh, I find Ionic Vue impressive. Very neat, documentation is stellar. But I'm stuck on this layout issue which seemed trivial at first.

Thanks for looking into this.