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

base structure

Browse Source
This commit is contained in:
hamid zarghami
2025-11-12 11:45:13 +03:30
parent d9560b7d32
commit d36b8e40f0
26 changed files with 1083 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/Header.tsx
+130
View File
@@ -0,0 +1,130 @@
import { type FC, useEffect } from 'react'
import Input from '@/components/Input'
// import { ArrowDown2, CloseCircle, HambergerMenu, Logout, Wallet } from 'iconsax-react'
// import AvatarImage from '../assets/images/avatar_image.png'
import { useTranslation } from 'react-i18next'
import { useLocation } from 'react-router-dom'
import { useSharedStore } from '@/shared/store/sharedStore'
import { HambergerMenu } from 'iconsax-react'
import { clx } from '@/helpers/utils'
type SidebarSize = 'default' | 'wide'
type HeaderProps = {
hasMainSidebar?: boolean
sidebarSize?: SidebarSize
}
const sidebarSizeClasses: Record<SidebarSize, { base: string; withSub: string }> = {
default: {
base: 'xl:right-[285px] xl:w-[calc(100%-305px)]',
withSub: 'xl:right-[320px] xl:w-[calc(100%-340px)]',
},
wide: {
base: 'xl:right-[390px] xl:w-[calc(100%-406px)]',
withSub: 'xl:right-[425px] xl:w-[calc(100%-441px)]',
},
}
const Header: FC<HeaderProps> = ({ hasMainSidebar = true, sidebarSize = 'default' }) => {
// const location = useLocation();
// const [popoverKey, setPopoverKey] = useState(0);
const { t } = useTranslation('global')
const { setOpenSidebar, openSidebar, hasSubMenu, setSearch } = useSharedStore()
const location = useLocation()
// useEffect(() => {
// setPopoverKey((prevKey) => prevKey + 1);
// }, [location.pathname]);
// const handleLogout = () => {
// removeToken()
// removeRefreshToken()
// window.location.href = Pages.auth.login
// }
useEffect(() => {
setSearch('')
}, [location.pathname])
return (
<div className={clx(
'fixed z-10 right-4 left-4 top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px]',
hasMainSidebar && (
hasSubMenu
? sidebarSizeClasses[sidebarSize].withSub
: sidebarSizeClasses[sidebarSize].base
)
)}>
<div className='min-w-[270px] hidden xl:block'>
<Input
variant='search'
placeholder={t('header.search')}
onChangeSearchFinal={(value) => setSearch(value)}
/>
</div>
<div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
<HambergerMenu size={24} color='black' />
</div>
{/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
<div className='flex xl:gap-6 gap-4 items-center'>
{/* <Link className='xl:hidden' to={Paths.wallet}>
<Wallet className='xl:size-[18px] size-[17px]' color='#da2129' />
</Link> */}
{/* <Notifications /> */}
{/* {
data && (
<Popover className="relative" key={popoverKey}>
<PopoverButton >
<div className='flex gap-2 items-center mt-2.5'>
<div className='size-6 rounded-full bg-description overflow-hidden'>
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
</div>
<div className='xl:flex hidden gap-1 items-center'>
<div className='text-xs'>
{data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
</div>
<ArrowDown2 size={14} color='#8C90A3' />
</div>
</div>
</PopoverButton>
<PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-white boxShadow xl:mt-7 z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
<div className='absolute xl:hidden top-6 left-6'>
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='#da2129' />
</div>
<Link to={Pages.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
<div className='size-14 rounded-full overflow-hidden'>
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
</div>
<div>
{data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
</div>
<div className='text-description'>
{data?.data?.user?.email}
</div>
</Link>
<div className='px-6 mt-2'>
<div onClick={() => handleLogout()} className='flex gap-2 items-center cursor-pointer'>
<Logout size={20} color='#da2129' />
<div>
{t('sidebar.logout')}
</div>
</div>
</div>
</PopoverPanel>
</Popover>
)
} */}
</div>
</div>
)
}
export default Header
src/shared/SideBar.tsx
+110
View File
@@ -0,0 +1,110 @@
import { type 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 {
Home2,
Logout,
} from 'iconsax-react'
import SideBarItem from './SideBarItem'
import { useLocation } from 'react-router-dom'
import { useSharedStore } from './store/sharedStore'
import { clx } from '../helpers/utils'
import { Paths } from '../config/Paths'
const SideBar: FC = () => {
const { t } = useTranslation('global')
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
const location = useLocation()
const isActive = (name: string) => {
return window.location.href.includes(name)
}
useEffect(() => {
const split = location.pathname.split('/')
if (split[1] === 'dashboard' || split[1] === 'products') {
setSubMenuName(split[1])
setSubtMenu(true)
} else {
setSubMenuName('')
setSubtMenu(false)
}
}, [location.pathname, setSubMenuName, setSubtMenu])
const iconSizeSideBar = 20
return (
<>
{
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 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',
hasSubMenu && 'w-24 !rounded-tl-none !rounded-bl-none'
)}
>
<div className='flex justify-center'>
{
!hasSubMenu ?
<img src={LogoImage} className='w-[140px]' />
:
<img src={LogoSmall} className='w-7' />
}
</div>
<div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
<div className={clx(
'mt-10 px-12 text-header text-sm font-normal',
hasSubMenu && 'px-2 text-center'
)}>
{t('sidebar.menu')}
</div>
<div className='text-xs text-[#8C90A3]'>
<SideBarItem
icon={<Home2 variant={isActive(Paths.home) ? 'Bold' : 'Outline'} color={isActive(Paths.home) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.home_page')}
isActive={isActive(Paths.home)}
link={Paths.home}
activeName={Paths.home}
/>
</div>
<div className='flex-1 flex flex-col justify-end mt-14'>
<div className='text-xs text-[#8C90A3]'>
<SideBarItem
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title="خروج"
isActive={isActive('logout')}
link={`#`}
isLogout
activeName=''
/>
</div>
</div>
</div>
</div>
{/* منوی فرعی */}
{
hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
<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 border-border'>
{
subMenuName === 'dashboard' ? null
// <DashboardSubMenu />
: null
}
</div>
}
</>
)
}
export default SideBar
src/shared/SideBarItem.tsx
+61
View File
@@ -0,0 +1,61 @@
import { type FC, type ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { clx } from '../helpers/utils'
import { useSharedStore } from './store/sharedStore'
// import { useGetAdminPermissions } from '../pages/users/hooks/useUserData'
type Props = {
icon: ReactNode,
title: string,
isActive: boolean,
link: string,
isLogout?: boolean,
name?: string,
activeName?: string
}
const SideBarItem: FC<Props> = (props: Props) => {
const { hasSubMenu, setSubMenuName, setSubtMenu } = useSharedStore()
// const { data: adminPermissions } = useGetAdminPermissions()
const handleLogout = () => {
// removeToken()
// removeRefreshToken()
// window.location.href = Pages.auth.login
}
const handleClick = () => {
if (props.name) {
setSubMenuName(props.name)
setSubtMenu(true)
}
}
// if (props.activeName === '' || props.activeName && adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === props.activeName)) {
if (true) {
return (
<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-primary h-6',
!props.isActive && 'invisible',
hasSubMenu && 'hidden',
)}></div>
<div className={clx(
'flex gap-3 items-center',
hasSubMenu && 'flex-col text-[10px]',
)}>
{props.icon}
<div className={props.isActive ? 'text-primary' : ''}>
{props.title}
</div>
</div>
</Link>
)
}
}
export default SideBarItem
src/shared/store/sharedStore.ts
+13
View File
@@ -0,0 +1,13 @@
import { create } from "zustand";
import { type 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 }),
search: "",
setSearch: (value: string) => set({ search: value }),
}));
src/shared/types/SharedTypes.ts
+19
View File
@@ -0,0 +1,19 @@
export type SharedStoreType = {
openSidebar: boolean;
setOpenSidebar: (value: boolean) => void;
hasSubMenu: boolean;
setSubtMenu: (value: boolean) => void;
subMenuName: string;
setSubMenuName: (value: string) => void;
search: string;
setSearch: (value: string) => void;
};
export type PagerType = {
page: number;
limit: number;
totalItems: number;
totalPages: number;
prevPage: boolean | null;
nextPage: string | null;
};