Some code fix
This commit is contained in:
CHIEFSOFT\ameye
@@ -5,8 +5,8 @@ import MainBtn from "../../MainBtn";
|
||||
import AsideLink from "./AsideLink";
|
||||
import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
|
||||
// import { useSelector } from "react-redux";
|
||||
import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext";
|
||||
import { TbLogout2 } from "react-icons/tb";
|
||||
import {GeneralLayoutContext} from "../../../context/GeneralLayoutContext";
|
||||
import {TbLogout2} from "react-icons/tb";
|
||||
import UserAvatar from '../../../assets/user_avatar.jpg'
|
||||
import Icons from "../../Icons";
|
||||
|
||||
@@ -19,138 +19,148 @@ export default function DashboardAside() {
|
||||
// const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
|
||||
// const {role}= userDetails
|
||||
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col'>
|
||||
<div className="mb-3 w-full h-24 logo flex items-center">
|
||||
<DummyLogo />
|
||||
</div>
|
||||
{/* <hr className="border-slate-400" /> */}
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col'>
|
||||
<div className="mb-3 w-full h-24 logo flex items-center">
|
||||
<DummyLogo/>
|
||||
</div>
|
||||
{/* <hr className="border-slate-400" /> */}
|
||||
|
||||
<div className="aside-scroll-design w-full flex flex-col gap-2 h-full overflow-y-auto">
|
||||
{asideNavLinks.map((link, index) => {
|
||||
let active = link.status === 1 ? true : false
|
||||
let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
|
||||
if(active && !hasSubLinks){
|
||||
return (
|
||||
<div key={link.name}>
|
||||
<AsideLink to={link.to} name={link.name} icon={link.icon} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if(active && hasSubLinks){
|
||||
let subLinkList = []
|
||||
link.subLinks.forEach(item =>{
|
||||
if(item.to){
|
||||
subLinkList.push(item.to)
|
||||
}else if(item.subLinks?.length > 0){
|
||||
item.subLinks.forEach(item => {
|
||||
<div className="aside-scroll-design w-full flex flex-col gap-2 h-full overflow-y-auto">
|
||||
{asideNavLinks.map((link, index) => {
|
||||
let active = link.status === 1 ? true : false
|
||||
let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
|
||||
if (active && !hasSubLinks) {
|
||||
return (
|
||||
<div key={link.name}>
|
||||
<AsideLink to={link.to} name={link.name} icon={link.icon}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (active && hasSubLinks) {
|
||||
let subLinkList = []
|
||||
link.subLinks.forEach(item => {
|
||||
if (item.to) {
|
||||
subLinkList.push(item.to)
|
||||
})
|
||||
}
|
||||
})
|
||||
return (
|
||||
<div key={link.name} className="w-full">
|
||||
{link.title &&
|
||||
<h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
|
||||
}
|
||||
<AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname) || index===1} >
|
||||
<>
|
||||
{link.subLinks.map((subItem, index)=>{
|
||||
let active = subItem.status === 1 ? true : false
|
||||
let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
|
||||
if(active && !hasSubLinks){
|
||||
return (
|
||||
<div key={subItem.name}>
|
||||
<AsideLink to={subItem.to} name={subItem.name} icon={subItem.icon} />
|
||||
</div>
|
||||
)
|
||||
}else if(active && hasSubLinks){
|
||||
let subLinkList = subItem.subLinks.filter(value => value.to).map(item => { // specific open
|
||||
if(item.to){
|
||||
return item.to
|
||||
}
|
||||
})
|
||||
return(
|
||||
<AsideLinkWithSubLinks key={subItem.name} name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
|
||||
<>
|
||||
{subItem.subLinks.map((item, index)=>{
|
||||
let active = item.status === 1 ? true : false
|
||||
if(active){
|
||||
return (
|
||||
<div key={index}>
|
||||
<AsideLink key={index} to={item.to} name={item.name} icon={item.icon} />
|
||||
} else if (item.subLinks?.length > 0) {
|
||||
item.subLinks.forEach(item => {
|
||||
subLinkList.push(item.to)
|
||||
})
|
||||
}
|
||||
})
|
||||
return (
|
||||
<div key={link.name} className="w-full">
|
||||
{link.title &&
|
||||
<h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
|
||||
}
|
||||
<AsideLinkWithSubLinks name={link.name} icon={link.icon}
|
||||
isOpen={subLinkList.includes(pathname) || index === 1}>
|
||||
<>
|
||||
{link.subLinks.map((subItem, index) => {
|
||||
let active = subItem.status === 1 ? true : false
|
||||
let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
|
||||
if (active && !hasSubLinks) {
|
||||
return (
|
||||
<div key={subItem.name}>
|
||||
<AsideLink to={subItem.to} name={subItem.name}
|
||||
icon={subItem.icon}/>
|
||||
</div>
|
||||
)
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</>
|
||||
</AsideLinkWithSubLinks>
|
||||
)
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</>
|
||||
</AsideLinkWithSubLinks>
|
||||
</div>
|
||||
)
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className='py-2 mt-4 relative'>
|
||||
<div className="group w-full flex items-center gap-2">
|
||||
<div className="w-full flex items-center gap-2">
|
||||
<img src={UserAvatar} alt='user avatar' className='w-12 h-12 p-1 rounded-full' />
|
||||
<div>
|
||||
<p className="text-sm font-bold text-black-body dark:text-white-body">Username</p>
|
||||
<p className="text-12 text-black-box/90 dark:text-white-body/80">username@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={()=>handleActiveMenu('settings')} className="peer text-slate-500 dark:text-white-body">
|
||||
<Icons name='settings' className='text-3xl' />
|
||||
</button>
|
||||
<div className="hidden group-hover:block pop-modal-down absolute p-4 w-full bg-white dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
|
||||
<div className="w-full min-h-48 flex flex-col justify-between gap-4">
|
||||
<div className="w-full h-full">
|
||||
<div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
|
||||
<h1 className="font-semibold">Username</h1>
|
||||
<p className="-mt-2">username@gmail.com</p>
|
||||
} else if (active && hasSubLinks) {
|
||||
let subLinkList = subItem.subLinks.filter(value => value.to).map(item => { // specific open
|
||||
if (item.to) {
|
||||
return item.to
|
||||
}
|
||||
})
|
||||
return (
|
||||
<AsideLinkWithSubLinks key={subItem.name} name={subItem.name}
|
||||
icon={subItem.icon}
|
||||
isOpen={subLinkList.includes(pathname)}>
|
||||
<>
|
||||
{subItem.subLinks.map((item, index) => {
|
||||
let active = item.status === 1 ? true : false
|
||||
if (active) {
|
||||
return (
|
||||
<div key={index}>
|
||||
<AsideLink key={index} to={item.to}
|
||||
name={item.name}
|
||||
icon={item.icon}/>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</>
|
||||
</AsideLinkWithSubLinks>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</>
|
||||
</AsideLinkWithSubLinks>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className='py-2 mt-4 relative'>
|
||||
<div className="group w-full flex items-center gap-2">
|
||||
<div className="w-full flex items-center gap-2">
|
||||
<img src={UserAvatar} alt='user avatar' className='w-12 h-12 p-1 rounded-full'/>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-black-body dark:text-white-body">Username</p>
|
||||
<p className="text-12 text-black-box/90 dark:text-white-body/80">username@gmail.com</p>
|
||||
</div>
|
||||
<div className="rounded w-full flex items-center gap-2">
|
||||
<MainBtn
|
||||
text='Logout'
|
||||
className="w-full text-center text-black-body hover:text-red-500 dark:text-white-body font-bold text-lg flex justify-center gap-2 items-center"
|
||||
onClick={()=>setLogoutModal(true)}
|
||||
>
|
||||
<TbLogout2 className="text-base" />
|
||||
</MainBtn>
|
||||
</div>
|
||||
<button onClick={() => handleActiveMenu('settings')}
|
||||
className="peer text-slate-500 dark:text-white-body">
|
||||
<Icons name='settings' className='text-3xl'/>
|
||||
</button>
|
||||
<div
|
||||
className="hidden group-hover:block pop-modal-down absolute p-4 w-full bg-white dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
|
||||
<div className="w-full min-h-48 flex flex-col justify-between gap-4">
|
||||
<div className="w-full h-full">
|
||||
<div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
|
||||
<h1 className="font-semibold">Username</h1>
|
||||
<p className="-mt-2">username@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded w-full flex items-center gap-2">
|
||||
<MainBtn
|
||||
text='Logout'
|
||||
className="w-full text-center text-black-body hover:text-red-500 dark:text-white-body font-bold text-lg flex justify-center gap-2 items-center"
|
||||
onClick={() => setLogoutModal(true)}
|
||||
>
|
||||
<TbLogout2 className="text-base"/>
|
||||
</MainBtn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const asideNavLinks = [
|
||||
{name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
|
||||
{name:'Deployments', title:'Activities', status:1, icon: 'arrow-right', subLinks: [
|
||||
{name: 'Active', status:1, icon: 'dot', to: RouteLinks.transactionsPage},
|
||||
{name: 'Provisions', status:1, icon: 'dot', to: RouteLinks.subscriptions},
|
||||
{name: 'Customers', status:1, icon: 'dot', to: RouteLinks.customerPage},
|
||||
{name: 'Billings', status:1, icon: 'dot', to: RouteLinks.billings},
|
||||
{name: 'Configurations', status:1, icon: 'arrow-right', subLinks: [
|
||||
{name: 'Product Settings', status:1, icon: 'dot', to: RouteLinks.offers },
|
||||
{name: 'Admin Manager', status:1, icon: 'dot', to: RouteLinks.offers },
|
||||
]
|
||||
},
|
||||
{name: 'Dashboard', status: 1, icon: 'dashboard', to: RouteLinks.homePage},
|
||||
{
|
||||
name: 'Deployments', title: 'Activities', status: 1, icon: 'arrow-right', subLinks: [
|
||||
{name: 'Active', status: 1, icon: 'dot', to: RouteLinks.transactionsPage},
|
||||
{name: 'Provisions', status: 1, icon: 'dot', to: RouteLinks.subscriptions},
|
||||
{name: 'Customers', status: 1, icon: 'dot', to: RouteLinks.customerPage},
|
||||
{name: 'Billings', status: 1, icon: 'dot', to: RouteLinks.billings},
|
||||
{
|
||||
name: 'Configurations', status: 1, icon: 'arrow-right', subLinks: [
|
||||
{name: 'Product Settings', status: 1, icon: 'dot', to: RouteLinks.offers},
|
||||
{name: 'Admin Manager', status: 1, icon: 'dot', to: RouteLinks.offers},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user