create food

src/shared/Header.tsx

@@ -7,13 +7,14 @@ import { Link } from 'react-router-dom'
 import { Pages } from '../config/Pages'
 import { useSharedStore } from './store/sharedStore'
 import { HambergerMenu, Wallet } from 'iconsax-react'
+import { clx } from '@/helpers/utils'
 
 const Header: FC = () => {
 
     // const location = useLocation();
     // const [popoverKey, setPopoverKey] = useState(0);
     const { t } = useTranslation('global')
-    const { setOpenSidebar, openSidebar } = useSharedStore()
+    const { setOpenSidebar, openSidebar, hasSubMenu } = useSharedStore()
 
     // useEffect(() => {
     //     setPopoverKey((prevKey) => prevKey + 1);
@@ -26,12 +27,16 @@ const Header: FC = () => {
     // }
 
     return (
-        <div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
+        <div className={clx(
+            'fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]',
+            hasSubMenu && 'xl:w-[calc(100%-340px)] xl:right-[320px]',
+        )}>
 
             <div className='min-w-[270px] hidden xl:block'>
                 <Input
                     variant='search'
                     placeholder={t('header.search')}
+                    className='bg-[#F5F5F5]'
                 />
             </div>
             <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>