<template>
  <header class="header-bar">
    <slot></slot>

    <h1 class="header-bar__title">
      <slot name="heading"></slot>
    </h1>
  </header>
</template>

<style lang="scss">
.header-bar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-items: center;

  position: sticky;
  top: 0;
  z-index: 1;

  background-color: var(--color-header-bar);
  backdrop-filter: blur(0.5rem);

  &__title {
    color: var(--color-header-bar-title);
    margin: 0;
  }
}
</style>
