DigiFi/digifi-FirstOffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

sticky header bug fixed

Browse Source
This commit is contained in:
victorAnumudu
2025-04-07 09:32:10 +01:00
parent f26def10ba
commit 24e6c6846a
1 changed files with 28 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/breadcrumb/BreadcrumbCom.jsx
+28 -36
View File
@@ -12,48 +12,40 @@ export default function BreadcrumbCom({title, span, paths}) {
// var rect = navRef?.current?.getBoundingClientRect()?.bottom;
var rect = 10;
// window.addEventListener('scroll', ()=>{
// if(window.scrollY >= rect + 20){
// setStickNav(true)
// console.log('tru')
// }else{
// setStickNav(false)
// console.log('false')
// }
// })
// return () => window.removeEventListener('scroll', window.addEventListener('scroll', ()=>{
// if(window.scrollY >= rect + 20){
// setStickNav(true)
// }else{
// setStickNav(false)
// }
// }))
window.addEventListener('scroll', ()=>{
if(window.scrollY >= rect + 20){
setStickNav(true)
console.log('tru')
}else{
setStickNav(false)
console.log('false')
}
})
},[])
return (
<div className={`${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}`}>
<div className= {`w-full py-2 flex justify-between items-center`}>
<div className='flex flex-col gap-2'>
<div className='flex flex-col md:flex-row gap-1 md:items-center'>
<h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
<span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
// ${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}
<div className={`sticky -top-10 bg-white-body dark:bg-black-body dark:border-b dark:border-black-box dark:shadow-sm dark:shadow-black-box`}>
<div className= {`w-full py-2 flex justify-between items-center`}>
<div className='flex flex-col gap-2'>
<div className='flex flex-col md:flex-row gap-1 md:items-center'>
<h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
<span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
</div>
<div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
<TiHomeOutline className='text-black dark:text-white-body' />
{paths.map((item, index) => (
<div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
<MdKeyboardDoubleArrowRight />
<p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
</div>
))}
</div>
</div>
<div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
<TiHomeOutline className='text-black dark:text-white-body' />
{paths.map((item, index) => (
<div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
<MdKeyboardDoubleArrowRight />
<p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
</div>
))}
<div className='hidden lg:flex'>
<DashboardHeader />
</div>
</div>
<div className='hidden lg:flex'>
<DashboardHeader />
</div>
</div>
</div>
)
}