fix user header and modal detail

src/views/base/home/components/AppHeader.vue

@@ -1,20 +1,18 @@
 <template>
   <div
-    :class="y > 50 ? 'bg-white shadow opacity-95' : ''"
-    class="px-4 py-2 top-0 z-5 wrap-fix background-color-transition"
+    ref="headerRef"
+    class="app-header px-4 py-2 top-0 z-30 wrap-fix background-color-transition"
+    :class="{ 'app-header--scrolled': scrollY > 50 }"
   >
     <div class="flex justify-between my-2 items-center">
       <div v-if="isBoursecuProject()" class="flex items-center gap-2">
         <img :src="projectLogo" alt="" class="h-10 w-auto max-w-[9rem] object-contain" />
       </div>
       <div v-else class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
-        <div
-          class="z-100000 rounded-full border-1"
-          :class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
-        >
+        <div class="z-100000 rounded-full border-1 text-primary border-primary">
           <Icon icon="vuesax-linear:user" size="20" />
         </div>
-        <div :class="y > 50 ? 'text-primary' : 'text-primary'" class="color-transition font-bold">
+        <div class="text-primary color-transition font-bold">
           {{ userStore.userInfo?.name }}
         </div>
       </div>
@@ -42,23 +40,68 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useWindowScroll } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useUserStore } from '@/store/userStore'
 import router from '@/router'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { getProjectMobileNavLogo, isBoursecuProject } from '@/utils/config'
 
-const { y } = useWindowScroll()
+const headerRef = ref<HTMLElement | null>(null)
+const scrollY = ref(0)
+
 const userStore = useUserStore()
 const projectLogo = computed(() => getProjectMobileNavLogo())
 
+let scrollTarget: HTMLElement | Window | null = null
+
+function findScrollParent(el: HTMLElement | null): HTMLElement | null {
+  let node = el?.parentElement ?? null
+
+  while (node) {
+    const { overflowY } = getComputedStyle(node)
+    if (overflowY === 'auto' || overflowY === 'scroll') {
+      return node
+    }
+    node = node.parentElement
+  }
+
+  return null
+}
+
+function updateScrollY() {
+  if (!scrollTarget) return
+  scrollY.value = scrollTarget instanceof Window ? scrollTarget.scrollY : scrollTarget.scrollTop
+}
+
+onMounted(() => {
+  scrollTarget = findScrollParent(headerRef.value) ?? window
+  scrollTarget.addEventListener('scroll', updateScrollY, { passive: true })
+  updateScrollY()
+})
+
+onUnmounted(() => {
+  scrollTarget?.removeEventListener('scroll', updateScrollY)
+})
+
 defineEmits<{
   logout: []
 }>()
 </script>
 
 <style scoped>
+.app-header {
+  background-color: transparent;
+}
+
+/* عین bg-white shadow opacity-95 قبلی */
+.app-header--scrolled {
+  background-color: #fff;
+  opacity: 0.95;
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
 .mhome-header-btn {
   display: inline-flex;
   align-items: center;