activist/src/components/TopBar.vue

<script setup lang="ts">
import { ref, watch } from 'vue';
import OverlayBadge from "primevue/overlaybadge";

import { useRoute } from 'vue-router';
const route = useRoute();
const page_title = ref();

watch(() => route.meta, (newVal, oldVal) => {
  page_title.value = newVal.title;
})
</script>
<template>
  <header class="flex justify-between items-center px-4">
    <div class="flex">
      <span class="title">{{ page_title }}</span>
    </div>
    <a
      v-styleclass="{
                        selector: '@next',
                        enterFromClass: 'hidden',
                        enterActiveClass: 'animate-fadein',
                        leaveToClass: 'hidden',
                        leaveActiveClass: 'animate-fadeout',
                        hideOnOutsideClick: true
                    }"
      class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100"
    >
      <i class="pi pi-ellipsis-v text-2xl" />
    </a>
    <ul
      class="list-none p-0 m-0 hidden lg:flex lg:items-center select-none lg:flex-row bg-surface-0 dark:bg-surface-950 border lg:border-0 border-surface right-0 top-full z-10 shadow lg:shadow-none absolute lg:static"
    >
      <li>
        <a>
          <i class="pi pi-inbox mr-2 lg:mr-0" />
          <span class="block lg:hidden font-medium">Inbox</span>
        </a>
      </li>
      <li>
        <a>
          <OverlayBadge severity="danger" class="mr-2 lg:mr-0">
            <i class="pi pi-bell" />
          </OverlayBadge>
          <span class="block lg:hidden font-medium">Notifications</span>
        </a>
      </li>
      <li class="border-t border-surface lg:border-t-0">
        <a class="flex p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors">
          <img
            alt="user avatar"
            src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-4 lg:mr-0 w-8 h-8" />
          <div class="block lg:hidden">
            <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
            <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
          </div>
        </a>
      </li>
    </ul>
  </header>
</template>

<style scoped>
.title {
  font-size: 160%;
}
header {
  background-color: white;
  border-bottom: 1px solid #BBB;
  li a {
    @apply flex p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors;
    i {
      @apply text-base lg:!text-2xl leading-none;
    }
  }
}
</style>