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

sidebar

Browse Source
This commit is contained in:
hamid zarghami
2025-01-20 15:37:16 +03:30
parent ad20ce5d18
commit d1f16746ea
11 changed files with 231 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/config/SideBarSubMenu.ts
+7
View File
@@ -0,0 +1,7 @@
export const SideBarItemHasSubMenu = [
"services",
"customers",
"receipt",
"users",
"transactions",
];
src/langs/fa.json
+3
View File
@@ -68,6 +68,9 @@
"setting": "تنظیمات",
"logout": "خروج"
},
"submenu": {
"services_list": "لیست سرویس ها"
},
"header": {
"search": "جستجو"
},
src/router/Main.tsx
+12 -2
View File
@@ -21,14 +21,24 @@ import OtherServices from '../pages/service/OtherServices'
import Footer from '../shared/Footer'
import AnnouncementDetail from '../pages/annoncement/Detail'
import DetailService from '../pages/service/DetailService'
import { clx } from '../helpers/utils'
import { useSharedStore } from '../shared/store/sharedStore'
const MainRouter: FC = () => {
const { hasSubMenu } = useSharedStore()
return (
<div className='p-4 overflow-hidden'>
<SideBar />
<Header />
<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 className={clx(
'flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]',
hasSubMenu && 'xl:ms-[305px]',
)}>
<div className={clx(
`overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`,
)}>
<div>
<Routes>
<Route path={Pages.dashboard} element={<Home />} />
src/shared/Header.tsx
+6 -2
View File
@@ -7,14 +7,18 @@ import { Link } from 'react-router-dom'
import { Pages } from '../config/Pages'
import Notifications from '../pages/notification/Notification'
import { useSharedStore } from './store/sharedStore'
import { clx } from '../helpers/utils'
const Header: FC = () => {
const { t } = useTranslation('global')
const { setOpenSidebar, openSidebar } = useSharedStore()
const { setOpenSidebar, openSidebar, hasSubMenu } = useSharedStore()
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:right-[320px] xl:w-[calc(100%-345px)] left-4',
)}>
<div className='min-w-[270px] hidden xl:block'>
<Input
src/shared/SideBar.tsx
+63 -7
View File
@@ -1,5 +1,6 @@
import { FC } from 'react'
import { FC, useEffect } from 'react'
import LogoImage from '../assets/images/logo.svg'
import LogoSmall from '../assets/images/logo-small.svg'
import { useTranslation } from 'react-i18next'
import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Home2, Logout, Messages3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
import SideBarItem from './SideBarItem'
@@ -7,19 +8,44 @@ import { useLocation } from 'react-router-dom'
import { Pages } from '../config/Pages'
import { useSharedStore } from './store/sharedStore'
import { clx } from '../helpers/utils'
import ServicesSubMenu from './components/ServicesSubMenu'
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
import TransactionsSubMenu from './components/TransactionsSubMenu'
const SideBar: FC = () => {
const { t } = useTranslation('global')
const { openSidebar, setOpenSidebar } = useSharedStore()
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
const location = useLocation()
const isActive = (name: string) => {
return location.pathname.includes(name)
}
useEffect(() => {
const split = location.pathname.split('/')
console.log('split', split);
if (SideBarItemHasSubMenu.includes(split[1])) {
setSubMenuName(split[1])
setSubtMenu(true)
} else {
setSubMenuName('')
setSubtMenu(false)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [location.pathname])
const iconSizeSideBar = 20
console.log(openSidebar);
return (
<>
{
@@ -28,15 +54,24 @@ const SideBar: FC = () => {
<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'
openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40',
hasSubMenu && 'w-24 !rounded-tl-none !rounded-bl-none'
)}
>
<div className='flex justify-center'>
<img src={LogoImage} className='w-[140px]' />
{
!hasSubMenu ?
<img src={LogoImage} className='w-[140px]' />
:
<img src={LogoSmall} className='w-7' />
}
</div>
<div className='flex-1 h-full overflow-y-auto no-scrollbar'>
<div className='mt-10 px-12 text-header text-sm font-normal'>
<div className={clx(
'mt-10 px-12 text-header text-sm font-normal',
hasSubMenu && 'px-2 text-center'
)}>
{t('sidebar.menu')}
</div>
@@ -52,6 +87,7 @@ const SideBar: FC = () => {
title={t('sidebar.services')}
isActive={isActive('services')}
link={Pages.services.mine}
name='services'
/>
<SideBarItem
icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
@@ -105,7 +141,10 @@ const SideBar: FC = () => {
/>
</div>
<div className='mt-10 px-12 text-header text-sm font-normal'>
<div className={clx(
'mt-10 px-12 text-header text-sm font-normal',
hasSubMenu && 'px-2 text-center'
)}>
{t('sidebar.other')}
</div>
@@ -129,7 +168,10 @@ const SideBar: FC = () => {
</div>
<div className='mt-10 px-12 text-header text-sm font-normal'>
<div className={clx(
'mt-10 px-12 text-header text-sm font-normal',
hasSubMenu && 'px-2 text-center text-xs'
)}>
{t('sidebar.mnage_content')}
</div>
@@ -200,6 +242,20 @@ const SideBar: FC = () => {
</div>
</div>
</div>
{
hasSubMenu && (openSidebar || window.innerWidth > 1000) &&
<div className='fixed xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r'>
{
subMenuName === 'services' ?
<ServicesSubMenu />
:
subMenuName === 'transactions' ?
<TransactionsSubMenu />
: null
}
</div>
}
</>
)
}
src/shared/SideBarItem.tsx
+20 -3
View File
@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { clx } from '../helpers/utils'
import { Pages } from '../config/Pages'
import { useSharedStore } from './store/sharedStore'
type Props = {
icon: ReactNode,
@@ -9,22 +10,38 @@ type Props = {
isActive: boolean,
link: string,
isLogout?: boolean,
name?: string
}
const SideBarItem: FC<Props> = (props: Props) => {
const { hasSubMenu, setSubMenuName, setSubtMenu } = useSharedStore()
const handleLogout = () => {
localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME)
window.location.href = Pages.auth.login
}
const handleClick = () => {
if (props.name) {
setSubMenuName(props.name)
setSubtMenu(true)
}
}
return (
<Link onClick={props.isLogout ? handleLogout : undefined} to={props.link} className='flex text-xs gap-9 mt-4'>
<Link onClick={props.isLogout ? handleLogout : handleClick} to={props.link} className={clx(
'flex text-xs gap-9 mt-4',
hasSubMenu && 'flex-col',
)}>
<div className={clx(
'w-1 bg-black h-6',
!props.isActive && 'invisible'
!props.isActive && 'invisible',
hasSubMenu && 'hidden',
)}></div>
<div className='flex gap-3 items-center'>
<div className={clx(
'flex gap-3 items-center',
hasSubMenu && 'flex-col text-[10px]',
)}>
{props.icon}
<div className={props.isActive ? 'text-black' : ''}>
{props.title}
src/shared/components/ServicesSubMenu.tsx
+41
View File
@@ -0,0 +1,41 @@
import { Element3 } from 'iconsax-react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import SubMenuItem from './SubMenuItem'
import { useLocation } from 'react-router-dom'
const ServicesSubMenu: FC = () => {
const location = useLocation()
const { t } = useTranslation('global')
const isActive = (name: string) => {
return location.pathname.includes(name)
}
return (
<div className='py-12'>
<div className='flex gap-3 items-center border-b pb-10 px-6'>
<Element3
size={24}
color='#000'
variant='Bold'
/>
<div className='text-xs'>
{t('sidebar.services')}
</div>
</div>
<div className='flex flex-col mt-10 gap-4'>
<SubMenuItem
title={t('submenu.services_list')}
isActive={isActive('services')}
link='/services'
/>
</div>
</div>
)
}
export default ServicesSubMenu
src/shared/components/SubMenuItem.tsx
+33
View File
@@ -0,0 +1,33 @@
import { FC } from 'react'
import { Link } from 'react-router-dom'
import { clx } from '../../helpers/utils'
type Props = {
title: string,
isActive: boolean,
link: string,
isLogout?: boolean,
}
const SubMenuItem: FC<Props> = (props: Props) => {
return (
<Link to={props.link} className={clx(
'flex text-xs gap-6 mt-4',
)}>
<div className={clx(
'w-1 bg-black h-6',
!props.isActive && 'invisible',
)}></div>
<div className={clx(
'flex gap-3 items-center',
)}>
<div className={props.isActive ? 'text-black' : 'text-description'}>
{props.title}
</div>
</div>
</Link>
)
}
export default SubMenuItem
src/shared/components/TransactionsSubMenu.tsx
+38
View File
@@ -0,0 +1,38 @@
import { Card } from 'iconsax-react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import SubMenuItem from './SubMenuItem'
const TransactionsSubMenu: FC = () => {
const { t } = useTranslation('global')
const isActive = (name: string) => {
return location.pathname.includes(name)
}
return (
<div className='py-12'>
<div className='flex gap-3 items-center border-b pb-10 px-6'>
<Card
size={24}
color='#000'
variant='Bold'
/>
<div className='text-xs'>
{t('sidebar.transactions')}
</div>
</div>
<div className='flex flex-col mt-10 gap-4'>
<SubMenuItem
title={t('sidebar.services')}
isActive={isActive('services')}
link='/services'
/>
</div>
</div>
)
}
export default TransactionsSubMenu
src/shared/store/sharedStore.ts
+4
View File
@@ -4,4 +4,8 @@ import { SharedStoreType } from "../types/SharedTypes";
export const useSharedStore = create<SharedStoreType>((set) => ({
openSidebar: false,
setOpenSidebar: (value) => set({ openSidebar: value }),
hasSubMenu: false,
setSubtMenu: (value: boolean) => set({ hasSubMenu: value }),
subMenuName: "",
setSubMenuName: (value: string) => set({ subMenuName: value }),
}));
src/shared/types/SharedTypes.ts
+4
View File
@@ -1,4 +1,8 @@
export type SharedStoreType = {
openSidebar: boolean;
setOpenSidebar: (value: boolean) => void;
hasSubMenu: boolean;
setSubtMenu: (value: boolean) => void;
subMenuName: string;
setSubMenuName: (value: string) => void;
};