32 lines
691 B
Vue
32 lines
691 B
Vue
<script lang="ts" setup>
|
|
const y = useState("root_y", () => 0);
|
|
|
|
const scrollClasses = computed(() => {
|
|
if (y.value > 20) {
|
|
return "sticky top-3 rounded-full shadow-xl border-none w-[90%] mx-auto"
|
|
}
|
|
else
|
|
return "w-full rounded-lg relative"
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UHeader toggle-side="left" :class="'bg-stone-950 max-w-full transition-all duration-300 ' + scrollClasses">
|
|
<template #left>
|
|
<h1 class="text-xl font-bold">Title:</h1>
|
|
|
|
</template>
|
|
<template #toggle>
|
|
<UDashboardSidebarToggle class="rounded-xl"/>
|
|
</template>
|
|
<template #right>
|
|
<h1>{{ y }}</h1>
|
|
</template>
|
|
</UHeader>
|
|
|
|
</template>
|
|
|
|
|
|
<style>
|
|
|
|
</style> |