danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive sidebar and footer reponsive and home responsive

Browse Source
This commit is contained in:
hamid zarghami
2025-01-09 12:04:27 +03:30
parent 60b96e3224
commit 03c9157295
12 changed files with 232 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/Header.tsx
+14 -7
View File
@@ -1,29 +1,36 @@
import { FC } from 'react'
import Input from '../components/Input'
import { ArrowDown2, Element3, Wallet } from 'iconsax-react'
import { ArrowDown2, Element3, HambergerMenu, Wallet } from 'iconsax-react'
import AvatarImage from '../assets/images/Avatar.png'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { Pages } from '../config/Pages'
import Notifications from '../pages/notification/Notification'
import LogoImage from '../assets/images/logo.svg'
import { useSharedStore } from './store/sharedStore'
const Header: FC = () => {
const { t } = useTranslation('global')
const { setOpenSidebar, openSidebar } = useSharedStore()
return (
<div className='fixed left-4 right-[285px] top-4 h-16 flex items-center px-6 bg-white justify-between rounded-[32px] w-[calc(100%-305px)]'>
<div className='fixed 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='min-w-[270px]'>
<div className='min-w-[270px] hidden xl:block'>
<Input
variant='search'
placeholder={t('header.search')}
/>
</div>
<div className='flex gap-6 items-center'>
<Element3 size={18} color='black' />
<div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
<HambergerMenu size={24} color='black' />
</div>
<img src={LogoImage} className='h-6 absolute right-0 left-0 mx-auto' />
<div className='flex xl:gap-6 gap-3 items-center'>
<Element3 color='black' className='xl:size-[18px] size-4' />
<Link to={Pages.wallet}>
<Wallet size={18} color='black' />
<Wallet className='xl:size-[18px] size-4' color='black' />
</Link>
<Notifications />
<div className='flex gap-2 items-center'>
@@ -32,7 +39,7 @@ const Header: FC = () => {
<img src={AvatarImage} className='size-full object-cover' />
</Link>
</div>
<div className='flex gap-1 items-center'>
<div className='xl:flex hidden gap-1 items-center'>
<div className='text-xs'>مهرداد مظفری</div>
<ArrowDown2 size={14} color='#8C90A3' />
</div>