<script lang="ts" setup name="ToolBar">
defineProps({
  title: {
    type: String,
    required: false,
  },
})
</script>

<template>
  <div class="tool-bar">
    <div class="left">
      <slot name="left" />
    </div>
    <div class="center">
      <slot name="center" />
    </div>
    <div class="right">
      <slot name="right" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tool-bar {
  &{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--g-app-bg);
    transition: background-color 0.3s;
    margin-bottom: 0;
  }

  .left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
