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

started layout adjusting

Browse Source
This commit was merged in pull request #2.
This commit is contained in:
victorAnumudu
2025-04-06 02:24:29 +01:00
parent 4d89908200
commit 9520b2e851
15 changed files with 448 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/breadcrumb/BreadcrumbCom.jsx
+43 -6
View File
@@ -1,22 +1,59 @@
import { useEffect, useState } from 'react'
import { MdKeyboardDoubleArrowRight } from 'react-icons/md'
import { TiHomeOutline } from 'react-icons/ti'
import DashboardHeader from '../layouts/DashboardHeader'
export default function BreadcrumbCom({title, span, paths}) {
const [stickNav, setStickNav] = useState(false)
useEffect(()=>{
console.log('tru')
// 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)
// }
// }))
},[])
return (
<div className='w-full py-2 flex justify-between items-center'>
<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-black-gray font-semibold'>{title}</h1>
<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-black-gray text-base'>
<TiHomeOutline className='text-black dark:text-black-gray' />
<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-black-gray text-10 sm:text-sm' key={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-black-gray' : ''}`}>{item}</p>
<p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
</div>
))}
</div>
</div>
<div className='hidden lg:flex'>
<DashboardHeader />
</div>
</div>
</div>
)
}