responsive sidebar and footer reponsive and home responsive
This commit is contained in:
hamid zarghami
@@ -0,0 +1,68 @@
|
||||
import { Element3, Element4, Home2, Messages3, NotificationStatus } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const Footer: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div className='xl:hidden'>
|
||||
<div className='h-[90px] '></div>
|
||||
<div className='fixed bottom-2 right-4 left-4 bg-white h-[60px] rounded-2xl flex justify-between items-center px-5'>
|
||||
<div className='text-description flex flex-col items-center gap-1.5'>
|
||||
<Home2
|
||||
className='size-5'
|
||||
color='#8C90A3'
|
||||
/>
|
||||
<div className='text-[10px]'>
|
||||
{t('footer.home')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-description flex flex-col items-center gap-1.5'>
|
||||
<Element4
|
||||
className='size-5'
|
||||
color='#8C90A3'
|
||||
/>
|
||||
<div className='text-[10px]'>
|
||||
{t('footer.other_services')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='text-description flex flex-col items-center gap-1.5'>
|
||||
<div className='bg-white p-1 rounded-full -mt-7'>
|
||||
<div className='bg-black flex justify-center items-center size-10 rounded-full'>
|
||||
<Element3
|
||||
className='size-5'
|
||||
color='white'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-[10px] '>
|
||||
{t('footer.my_services')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-description flex flex-col items-center gap-1.5'>
|
||||
<NotificationStatus
|
||||
className='size-5'
|
||||
color='#8C90A3'
|
||||
/>
|
||||
<div className='text-[10px]'>
|
||||
{t('footer.announcements')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-description flex flex-col items-center gap-1.5'>
|
||||
<Messages3
|
||||
className='size-5'
|
||||
color='#8C90A3'
|
||||
/>
|
||||
<div className='text-[10px]'>
|
||||
{t('footer.tickets')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
+14
-7
@@ -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>
|
||||
|
||||
+100
-87
@@ -5,10 +5,13 @@ import { Card, DocumentText, Element3, Element4, Home2, Logout, Messages3, Notif
|
||||
import SideBarItem from './SideBarItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Pages } from '../config/Pages'
|
||||
import { useSharedStore } from './store/sharedStore'
|
||||
import { clx } from '../helpers/utils'
|
||||
|
||||
const SideBar: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { openSidebar, setOpenSidebar } = useSharedStore()
|
||||
const location = useLocation()
|
||||
|
||||
const isActive = (name: string) => {
|
||||
@@ -18,106 +21,116 @@ const SideBar: FC = () => {
|
||||
const iconSizeSideBar = 20
|
||||
|
||||
return (
|
||||
<div className='fixed right-4 top-4 bottom-4 rounded-[32px] w-[250px] bg-white flex flex-col py-12'>
|
||||
<div className='flex justify-center'>
|
||||
<img src={LogoImage} className='w-[140px]' />
|
||||
</div>
|
||||
|
||||
<div className='flex-1 h-full overflow-y-auto no-scrollbar'>
|
||||
<div className='mt-10 px-12 text-header text-sm font-normal'>
|
||||
{t('sidebar.menu')}
|
||||
<>
|
||||
{
|
||||
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
|
||||
}
|
||||
<div
|
||||
className={clx(
|
||||
'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100 xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
|
||||
openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
|
||||
)}
|
||||
>
|
||||
<div className='flex justify-center'>
|
||||
<img src={LogoImage} className='w-[140px]' />
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.mainpage')}
|
||||
isActive={isActive('dashboard')}
|
||||
link={Pages.dashboard}
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Element3 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.myservice')}
|
||||
isActive={isActive('services')}
|
||||
link={Pages.services.mine}
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Element4 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.other_service')}
|
||||
isActive={isActive('other-service')}
|
||||
link={Pages.services.other}
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.receipt_list')}
|
||||
isActive={isActive('receipts')}
|
||||
link={Pages.receipts.index}
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.transactions')}
|
||||
isActive={isActive('transactions')}
|
||||
link={Pages.transactions}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex-1 h-full overflow-y-auto no-scrollbar'>
|
||||
<div className='mt-10 px-12 text-header text-sm font-normal'>
|
||||
{t('sidebar.menu')}
|
||||
</div>
|
||||
|
||||
<div className='mt-10 px-12 text-header text-sm font-normal'>
|
||||
{t('sidebar.other')}
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.ticket')}
|
||||
isActive={isActive('tickets')}
|
||||
link={Pages.ticket.list}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.announcement')}
|
||||
isActive={isActive('announcement')}
|
||||
link={Pages.announcement}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.criticisms')}
|
||||
isActive={isActive('criticisms')}
|
||||
link={Pages.criticisms}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.learning')}
|
||||
isActive={isActive('learning')}
|
||||
link={Pages.learning}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 items-end mt-14'>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.setting')}
|
||||
isActive={isActive('setting')}
|
||||
link={Pages.setting}
|
||||
icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.mainpage')}
|
||||
isActive={isActive('dashboard')}
|
||||
link={Pages.dashboard}
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Element3 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.myservice')}
|
||||
isActive={isActive('services')}
|
||||
link={Pages.services.mine}
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Element4 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.other_service')}
|
||||
isActive={isActive('other-service')}
|
||||
link={Pages.services.other}
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.receipt_list')}
|
||||
isActive={isActive('receipts')}
|
||||
link={Pages.receipts.index}
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.transactions')}
|
||||
isActive={isActive('transactions')}
|
||||
link={Pages.transactions}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-10 px-12 text-header text-sm font-normal'>
|
||||
{t('sidebar.other')}
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.ticket')}
|
||||
isActive={isActive('tickets')}
|
||||
link={Pages.ticket.list}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.logout')}
|
||||
isActive={isActive('logout')}
|
||||
link={`#`}
|
||||
icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.announcement')}
|
||||
isActive={isActive('announcement')}
|
||||
link={Pages.announcement}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.criticisms')}
|
||||
isActive={isActive('criticisms')}
|
||||
link={Pages.criticisms}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.learning')}
|
||||
isActive={isActive('learning')}
|
||||
link={Pages.learning}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 items-end mt-14'>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.setting')}
|
||||
isActive={isActive('setting')}
|
||||
link={Pages.setting}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.logout')}
|
||||
isActive={isActive('logout')}
|
||||
link={`#`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import { create } from "zustand";
|
||||
import { SharedStoreType } from "../types/SharedTypes";
|
||||
|
||||
export const useSharedStore = create<SharedStoreType>((set) => ({
|
||||
openSidebar: false,
|
||||
setOpenSidebar: (value) => set({ openSidebar: value }),
|
||||
}));
|
||||
@@ -0,0 +1,4 @@
|
||||
export type SharedStoreType = {
|
||||
openSidebar: boolean;
|
||||
setOpenSidebar: (value: boolean) => void;
|
||||
};
|
||||
Reference in New Issue
Block a user