responsive sidebar and footer reponsive and home responsive
This commit is contained in:
hamid zarghami
@@ -85,6 +85,13 @@
|
||||
"buy": "خرید",
|
||||
"other_services": "سایر سرویس ها"
|
||||
},
|
||||
"footer": {
|
||||
"home": "صفحه اصلی",
|
||||
"other_services": "سایر سرویس ها",
|
||||
"my_services": "سرویس های من",
|
||||
"announcements": "اطلاعیه ها",
|
||||
"tickets": "تیکت ها"
|
||||
},
|
||||
"ticket": {
|
||||
"tickets": "تیکت ها",
|
||||
"new_ticket": "تیکت جدید",
|
||||
|
||||
+18
-14
@@ -17,22 +17,24 @@ const Home: FC = () => {
|
||||
return (
|
||||
<div className='w-full flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
<Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
|
||||
<Carousel prevArrow={() => null} nextArrow={() => null} autoplay={false} className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
|
||||
<div className='relative drtl'>
|
||||
<img src={BannerImage} className='w-full rounded-3xl' />
|
||||
<div className='absolute size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
|
||||
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
|
||||
<div className='absolute size-full top-0 right-0 xl:py-6 py-4 xl:px-8 px-4 flex flex-col xl:justify-between'>
|
||||
<div className='sm:flex hidden justify-end w-full'>
|
||||
<button className="xl:px-8 px-4 w-fit xl:py-1.5 py-1 bg-white bg-opacity-10 text-white xl:text-sm text-xs rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
|
||||
<div>
|
||||
<div className='xl:tetx-base leading-7 text-xs truncate xl:overflow-auto'>
|
||||
سفارش نرمافزار اختصاصی: سرمایهای برای آینده یا فقط هزینهای برای امروز؟
|
||||
</div>
|
||||
<div className='mt-3 text-border text-xs'>
|
||||
<div className='xl:mt-3 mt-2 text-border text-xs'>
|
||||
۸ دقیقه مطالعه
|
||||
</div>
|
||||
<button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
|
||||
<button className='xl:mt-3 mt-2 xl:px-4 px-2 xl:h-9 h-6 flex gap-2 items-center xl:text-xs text-[10px] xl:rounded-2.5 rounded-lg bg-black text-white'>
|
||||
<div>
|
||||
{t('home.study')}
|
||||
</div>
|
||||
@@ -43,19 +45,21 @@ const Home: FC = () => {
|
||||
</div>
|
||||
<div className='relative drtl'>
|
||||
<img src={BannerImage} className='w-full rounded-3xl' />
|
||||
<div className='absolute size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
|
||||
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
|
||||
<div className='absolute size-full top-0 right-0 xl:py-6 py-4 xl:px-8 px-4 flex flex-col xl:justify-between'>
|
||||
<div className='sm:flex hidden justify-end w-full'>
|
||||
<button className="xl:px-8 px-4 w-fit xl:py-1.5 py-1 bg-white bg-opacity-10 text-white xl:text-sm text-xs rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
|
||||
<div>
|
||||
<div className='xl:tetx-base leading-7 text-xs truncate xl:overflow-auto'>
|
||||
سفارش نرمافزار اختصاصی: سرمایهای برای آینده یا فقط هزینهای برای امروز؟
|
||||
</div>
|
||||
<div className='mt-3 text-border text-xs'>
|
||||
<div className='xl:mt-3 mt-2 text-border text-xs'>
|
||||
۸ دقیقه مطالعه
|
||||
</div>
|
||||
<button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
|
||||
<button className='xl:mt-3 mt-2 xl:px-4 px-2 xl:h-9 h-6 flex gap-2 items-center xl:text-xs text-[10px] xl:rounded-2.5 rounded-lg bg-black text-white'>
|
||||
<div>
|
||||
{t('home.study')}
|
||||
</div>
|
||||
@@ -66,7 +70,7 @@ const Home: FC = () => {
|
||||
</div>
|
||||
</Carousel>
|
||||
|
||||
<div className='mt-8 text-sm flex gap-6 items-center'>
|
||||
<div className='mt-8 flex-wrap text-sm flex gap-6 items-center'>
|
||||
<ItemDashboard
|
||||
title={t('home.myservice')}
|
||||
icon={<Element3 size={20} color='black' />}
|
||||
@@ -105,8 +109,8 @@ const Home: FC = () => {
|
||||
<TitleLine title={t('home.access')} />
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex gap-6 items-center'>
|
||||
<div className='flex-1 h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
|
||||
<div className='mt-8 flex flex-wrap gap-6 items-center'>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
|
||||
<img src={AccessbilityImage} className='w-10' />
|
||||
<div className='text-xs'>
|
||||
{t('home.add_access')}
|
||||
|
||||
@@ -14,7 +14,7 @@ const BoxNewAccessbility: FC = () => {
|
||||
<>
|
||||
<div
|
||||
onClick={() => setOpen(true)}
|
||||
className="flex-1 flex justify-center items-center h-[160px]"
|
||||
className="flex-1 min-w-[40%] xl:min-w-[20%] flex justify-center items-center h-[160px]"
|
||||
style={{
|
||||
position: 'relative',
|
||||
}}
|
||||
|
||||
@@ -9,7 +9,7 @@ const DanakLearning: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-xs hidden xl:block h-fit px-5 py-7 rounded-3xl'>
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('home.danak_learning')}
|
||||
|
||||
@@ -11,7 +11,7 @@ type Props = {
|
||||
const ItemDashboard: FC<Props> = (props: Props) => {
|
||||
|
||||
return (
|
||||
<div className='p-6 flex-1 h-[178px] bg-white rounded-3xl'>
|
||||
<div className='p-6 min-w-[40%] xl:min-w-[20%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl'>
|
||||
<div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
|
||||
{props.icon}
|
||||
</div>
|
||||
|
||||
@@ -70,8 +70,8 @@ const OtherServices: FC = () => {
|
||||
<TitleLine title={t('service.selected_danak')} />
|
||||
</div>
|
||||
|
||||
<div className='flex gap-6 items-center mt-8'>
|
||||
<div className='flex-1 bg-white rounded-3xl p-6'>
|
||||
<div className='flex flex-wrap gap-6 items-center mt-8'>
|
||||
<div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
|
||||
<div>
|
||||
@@ -96,7 +96,7 @@ const OtherServices: FC = () => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 bg-white rounded-3xl p-6'>
|
||||
<div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
|
||||
<div>
|
||||
@@ -121,7 +121,7 @@ const OtherServices: FC = () => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 bg-white rounded-3xl p-6'>
|
||||
<div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
|
||||
<div>
|
||||
|
||||
+3
-1
@@ -18,13 +18,14 @@ import Wallet from '../pages/wallet/Wallet'
|
||||
import ReceiptsDetail from '../pages/receipts/Detail'
|
||||
import Profile from '../pages/profile/Profile'
|
||||
import OtherServices from '../pages/service/OtherServices'
|
||||
import Footer from '../shared/Footer'
|
||||
|
||||
const MainRouter: FC = () => {
|
||||
return (
|
||||
<div className='p-4 overflow-hidden'>
|
||||
<SideBar />
|
||||
<Header />
|
||||
<div className='flex-1 ms-[269px] mt-[81px]'>
|
||||
<div className='flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
|
||||
<div className={`overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
|
||||
<div>
|
||||
<Routes>
|
||||
@@ -47,6 +48,7 @@ const MainRouter: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
+14
-1
@@ -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,7 +21,16 @@ 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'>
|
||||
<>
|
||||
{
|
||||
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>
|
||||
@@ -118,6 +130,7 @@ const SideBar: FC = () => {
|
||||
</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