media_player_client/src/pages/RightToolBar.vue

<template>
  <div @click="(evt) => evt.stopPropagation()">
    <q-tabs
      v-model="tab_value"
      dense
      class="text-grey"
      active-color="primary"
      indicator-color="primary"
      align="justify"
      narrow-indicator
    >
      <q-tab no-caps name="mode" :label="$t('mode')" />
      <q-tab no-caps name="plan" :label="$t('plan')" />
    </q-tabs>
    <q-separator />

    <q-tab-panels v-model="tab_value" animated>
      <q-tab-panel name="mode">
        <mode-tree />
      </q-tab-panel>

      <q-tab-panel name="plan">
        <plan-tree />
      </q-tab-panel>
    </q-tab-panels>
  </div>
  <slot />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import ModeTree from "src/components/ModeTree.vue";
import PlanTree from "src/components/PlanTree.vue";

export default defineComponent({
  name: "PageRightToolBar",

  components: { ModeTree, PlanTree },

  setup() {
    let tab_value = ref("mode");
    return { tab_value };
  },
});
</script>