dyn island that uses state as y

app/components/dashboard/island_header.vue

@@ -0,0 +1,32 @@
+<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>