fix: top bar responsive classes

This commit is contained in:
Mahyar Khanbolooki
2025-07-14 19:21:49 +03:30
parent ab46068d76
commit b344e7d291
+5 -5
View File
@@ -23,24 +23,24 @@ type Props = {
function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMenuState, searchModalState, toggleSearchModalState, nightModeState, toggleNightModeState }: Props) { function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMenuState, searchModalState, toggleSearchModalState, nightModeState, toggleNightModeState }: Props) {
return ( return (
<div className="fixed top-0 left-0 w-full p-4 pb-0 z-40"> <div className="fixed top-0 left-0 w-full p-4 pb-0 z-40">
<div className='bg-white grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 sm:p-6 xl:gap-8 items-center'> <div className='bg-white grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 sm:px-6 xl:gap-8 items-center'>
<div className='inline-flex justify-between items-center'> <div className='inline-flex justify-between items-center'>
<button className='inline-block xl:hidden' onClick={toggleMenuState}> <button className='inline-block' onClick={toggleMenuState}>
<BurgerMenuIcon /> <BurgerMenuIcon />
</button> </button>
{/* <div onClick={toggleSearchModalState} className='xl:bg-[#EEF0F7] xl:hidden inline-flex rounded-xl px-4 h-12 xl:w-[370px] items-center content-center' > {/* <div onClick={toggleSearchModalState} className='xl:bg-[#EEF0F7] xl:hidden inline-flex rounded-xl px-4 h-12 xl:w-[370px] items-center content-center' >
S S
</div> */} </div> */}
<div {/* <div
className={`z-50 top-0 left-0 w-full h-full px-5 py-15 md:px-15 xl:p-0 fixed xl:relative bg-[#00000044] xl:bg-transparent backdrop-blur-sm xl:backdrop-blur-none justify-center xl:block ${searchModalState ? 'flex' : 'hidden'}`}> className={`z-50 top-0 left-0 w-full h-full px-5 py-15 md:px-15 xl:p-0 fixed xl:relative bg-[#00000044] xl:bg-transparent backdrop-blur-sm xl:backdrop-blur-none justify-center xl:block ${searchModalState ? 'flex' : 'hidden'}`}>
<div <div
className={`w-full h-full absolute`} className={`w-full h-full absolute`}
onClick={toggleSearchModalState}> onClick={toggleSearchModalState}>
</div> </div>
<div className='z-55 bg-white w-full md:w-min xl:bg-transparent p-5 xl:p-0 items-center flex xl:block rounded-lg h-max'> <div className='z-55 bg-white w-full md:w-min xl:bg-transparent p-5 xl:p-0 items-center flex xl:block rounded-lg h-max'>
X <BurgerMenuIcon />
</div> </div>
</div> </div> */}
</div> </div>
<div className='flex justify-center'> <div className='flex justify-center'>
<Image <Image