hedena_gold/apps/user-app/src/components/ui/PageBar.vue

<!--
  Sticky translucent page bar in the redesigned design language, extracted from
  the home screen's own `.home__bar` so every other screen gets the identical
  chrome instead of the old dark AppHeader.

  Layout mirrors the home bar exactly: a leading action (usually back), a
  centred title, and an optional trailing action via the `trailing` slot — so
  the bar's height, blur, hairline and icon buttons stay consistent app-wide.
-->
<template>
  <header class="bar">
    <div class="bar__inner">
      <button v-if="back" type="button" class="bar__btn" aria-label="بازگشت" @click="onBack">
        <Icon icon="vuesax-linear:arrow-right-1" size="20" />
      </button>
      <span v-else class="bar__spacer" aria-hidden="true" />

      <h1 class="bar__title">{{ title }}</h1>

      <div class="bar__trailing">
        <slot name="trailing">
          <span class="bar__spacer" aria-hidden="true" />
        </slot>
      </div>
    </div>
    <slot name="below" />
  </header>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import Icon from '../icon/Icon.vue'

const props = withDefaults(
  defineProps<{
    title: string
    /** Show the back button. */
    back?: boolean
    /** Route name to go to instead of history.back(). */
    backTo?: string
  }>(),
  { back: true },
)

const router = useRouter()

function onBack() {
  if (props.backTo) router.push({ name: props.backTo })
  else router.back()
}
</script>

<style scoped lang="less">
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: alpha(@canvas, 88%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid @hairline;
}

.bar__inner {
  max-width: 768px;
  margin: 0 auto;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bar__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: @ink;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar__btn {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: @ink;
  background: @hairlineSoft;
  transition: background 0.18s ease;
}

.bar__btn:active {
  transform: scale(0.94);
}

.bar__trailing {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bar__spacer {
  display: block;
  width: 38px;
  height: 38px;
}
</style>