DigiFi/digifi-office
1
0
Fork 0
Code Issues Pull Requests Releases Activity

aside links changed to array list

Browse Source
This commit is contained in:
victorAnumudu
2025-02-13 21:41:36 +01:00
parent 9c647cef74
commit 24636b4b96
8 changed files with 109 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/aside/DashboardAside.jsx
+62 -46
View File
@@ -1,4 +1,4 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import {Link, useLocation} from 'react-router-dom'
import RouteLinks from "../../../RouteLinks";
import DummyLogo from "../../DummyLogo";
@@ -7,10 +7,6 @@ import AsideLink from "./AsideLink";
import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
import { useSelector } from "react-redux";
import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
import { AiOutlineDashboard } from "react-icons/ai";
import { IoPeople } from "react-icons/io5";
import { GoDotFill } from "react-icons/go";
import { TbLogout2 } from "react-icons/tb";
@@ -25,9 +21,8 @@ export default function DashboardAside({shrinkAside=false}) {
const [hideSubMenu, setHideSubMenu] = useState('')
const handleHideSubMenu = (e) => {
e.stopPropagation()
let name = e.target.name
const handleHideSubMenu = (name) => {
// e.stopPropagation()
setHideSubMenu((prev) => {
if(prev == name){
return ''
@@ -45,44 +40,39 @@ export default function DashboardAside({shrinkAside=false}) {
<hr className="border-slate-400" />
<div className="p-4 w-full h-full overflow-y-auto">
<AsideLink
to={RouteLinks.homePage}
shrinkAside={shrinkAside}
name='Dashboard'
>
<AiOutlineDashboard className="text-base" />
</AsideLink>
<div className="w-full">
<h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">ADMIN</h1>
<AsideLink
to={RouteLinks.usersPage}
shrinkAside={shrinkAside}
name='Users'
>
<IoPeople className="text-base" />
</AsideLink>
</div>
<div className="w-full">
{/* <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">LOANS</h1> */}
<AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='Loans' icon='fa-solid fa-list'>
<AsideLink
to={RouteLinks.approvedLoans}
shrinkAside={shrinkAside}
name='Approved'
>
<GoDotFill className="text-base" />
</AsideLink>
<AsideLink
to={RouteLinks.pendingLoans}
shrinkAside={shrinkAside}
name='Pending'
>
<IoPeople className="text-base" />
</AsideLink>
</AsideLinkWithSubLinks>
</div>
{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 (
<AsideLink key={index} to={link.to} shrinkAside={shrinkAside} name={link.name} icon={link.icon} />
)
}else if(active && hasSubLinks){
return (
<div key={index} className="w-full">
{link.title &&
<h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
}
<AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name={link.name} icon={link.icon}>
<>
{link.subLinks.map((subItem, index)=>{
let active = subItem.status == 1 ? true : false
if(active){
return (
<>
<AsideLink key={index} to={subItem.to} shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} />
</>
)
}
})}
</>
</AsideLinkWithSubLinks>
</div>
)
}else{
return null
}
})}
</div>
<div className='px-4 py-2'>
<div className="bg-primary rounded w-full flex justify-center items-center gap-2">
@@ -99,3 +89,29 @@ export default function DashboardAside({shrinkAside=false}) {
</div>
)
}
const asideNavLinks = [
{name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
{name:'Salary Loan', title:'Loan', status:1, icon: 'money', subLinks: [
{name: 'Applications', status:1, icon: 'dot', to: '#'},
{name: 'Approved', status:1, icon: 'dot', to: RouteLinks.approvedLoans},
{name: 'Disbursements', status:1, icon: 'dot', to: RouteLinks.disbursements},
{name: 'Payments', status:1, icon: 'dot', to: '#'},
{name: 'Configuration', status:1, icon: 'dot', to: '#'},
],
},
{name:'Product 2', title:'Product 2', status:1, icon: 'product', subLinks: [
{name: 'Applications', status:1, icon: 'dot', to: '#'},
{name: 'Configuration', status:1, icon: 'dot', to: '#'},
]
},
{name:'Product 3', title:'Product 3', status:1, icon: 'product', subLinks: [
{name: 'Applications', status:1, icon: 'dot', to: '#'},
{name: 'Configuration', status:1, icon: 'dot', to: '#'},
]
},
{name:'Administration', title:'Admin', status:1, icon: 'people', subLinks: [
{name: 'Users', status:1, icon: 'dot', to: RouteLinks.usersPage},
]
},
]