aside links changed to array list

src/RouteLinks.js

@@ -4,7 +4,7 @@ const RouteLinks = {
     homePage: '/',
     usersPage: '/users',
     approvedLoans: '/loans/approved',
-    pendingLoans: '/loans/pending',
+    disbursements: '/loans/disbursements',
 }
 
 export default RouteLinks

src/SiteRoutes.jsx

@@ -9,7 +9,7 @@ import LoginPage from './pages/LoginPage' // LOGIN PAGE
 import HomePage from './pages/HomePage' // Home PAGE
 import UsersPage from './pages/UsersPage' // Users PAGE
 import ApprovedLoansPage from './pages/ApprovedLoansPage' // APPROVED LOANS PAGE
-import PendingLoansPage from './pages/PendingLoansPage' // PENDING LOANS PAGE
+import Disbursements from './pages/Disbursements' // DISBURSEMENTS LOANS PAGE
 
 
 // const Home = lazy(() => import('./pages/Home'));
@@ -23,7 +23,7 @@ export default function SiteRoutes() {
         <Route path={RouteLinks.homePage} element={<HomePage />} /> {`*/HOME PAGE*/`}
         <Route path={RouteLinks.usersPage} element={<UsersPage />} /> {`*/USERS PAGE*/`}
         <Route path={RouteLinks.approvedLoans} element={<ApprovedLoansPage />} /> {`*/APPROVED LOANS PAGE*/`}
-        <Route path={RouteLinks.pendingLoans} element={<PendingLoansPage />} /> {`*/PENDING LOANS PAGE*/`}
+        <Route path={RouteLinks.disbursements} element={<Disbursements />} /> {`*/DISBURSEMENTS LOANS PAGE*/`}
       </Route>
 
       {/* ERROR PAGE */}

src/components/Icons.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { AiFillProduct, AiOutlineDashboard } from 'react-icons/ai'
+import { FaRegMoneyBill1 } from 'react-icons/fa6'
+import { GoDotFill } from 'react-icons/go'
+import { IoPeople } from 'react-icons/io5'
+
+export default function Icons({name, className}) {
+  return (
+    <>
+    {name.toLowerCase() == 'dashboard' ?
+    <AiOutlineDashboard className={`text-base ${className}`} />
+    : name.toLowerCase() == 'money' ?
+    <FaRegMoneyBill1 className={`text-base ${className}`} />
+    :name.toLowerCase() == 'dot' ?
+    <GoDotFill className={`text-base ${className}`} />
+    :name.toLowerCase() == 'people' ?
+    <IoPeople className={`text-base ${className}`} />
+    :name.toLowerCase() == 'product' ?
+    <AiFillProduct className={`text-base ${className}`} />
+    :
+    null
+    }
+    </>
+  )
+}

src/components/layouts/DashboardLayout.jsx

@@ -34,11 +34,13 @@ export default function DashboardLayout() {
 
         </div>
 
-        <div  onClick={()=>setShowAsideDrawer(prev => !prev)} className={`${showAsideDrawer ? 'left-0' : '-left-96'} w-72 lg:hidden fixed inset-0 z-[999] bg-black text-white-light`}>
+        <div 
+        // onClick={()=>setShowAsideDrawer(prev => !prev)} 
+        className={`${showAsideDrawer ? 'left-0' : '-left-96'} w-72 lg:hidden fixed inset-0 z-[999] bg-black text-white-light`}>
             <DashboardAside />
             <button 
                 className='absolute top-[72px] -translate-y-[50px] -right-5 block p-2 rounded shadow-round_black dark:shadow-round_white bg-white dark:bg-black text-black dark:text-white'
-                // onClick={()=>setShowAsideDrawer(prev => !prev)}
+                onClick={(e)=>setShowAsideDrawer(prev => !prev)}
             >
                 <FaArrowLeft />
             </button>

src/components/layouts/aside/AsideLink.jsx

@@ -1,6 +1,7 @@
 import { Link, useLocation } from "react-router-dom"
+import Icons from "../../Icons"
 
-export default function AsideLink({shrinkAside, name, to, children}) {
+export default function AsideLink({shrinkAside, name, to, icon}) {
 
   const {pathname} = useLocation()
 
@@ -9,7 +10,7 @@ export default function AsideLink({shrinkAside, name, to, children}) {
         className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
         to={to}
     >   
-        {children && children}
+        {icon && <Icons name={icon} />}
         {shrinkAside ? '' : name}
     </Link>
   )

src/components/layouts/aside/AsideLinkWithSubLinks.jsx

@@ -1,24 +1,27 @@
+import { useLocation } from "react-router-dom"
 import { FaCaretDown } from "react-icons/fa";
-import { FaRegMoneyBill1 } from "react-icons/fa6";
+import Icons from "../../Icons";
 
 
-export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubMenu,  setHideSubMenu, children}) {
+export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubMenu,  setHideSubMenu, to, children}) {
 
     // const btnName = name
 
-//   const {pathname} = useLocation()
+  const {pathname} = useLocation()
 
 //   const [hideSubMenu, setHideSubMenu] = useState(true)
 
+    const subLinkIsOpen = children.props.children.map(item => item.props).map(link => link.children).map(to => to.props.to).includes(pathname)
+
   return (
     <div 
         className={`w-full px-4 text-[13px] font-semibold rounded`} 
     >   
-        <button onClick={setHideSubMenu} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-400">
+        <button onClick={()=>setHideSubMenu(name)} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-400">
-            <span className="flex gap-2 items-center">{icon && <FaRegMoneyBill1 className="text-base" />}{shrinkAside ? '' : name}</span>
+            <span className="flex gap-2 items-center">{icon && <Icons name={icon} />}{shrinkAside ? '' : name}</span>
-            <FaCaretDown className={`text-base ${(hideSubMenu && hideSubMenu==name) ? 'rotate-180' : 'rotate-0'}`} />
+            <FaCaretDown className={`text-base ${(hideSubMenu==name || subLinkIsOpen) ? 'rotate-180' : 'rotate-0'}`} />
         </button>
-        <div className={`w-full ${(hideSubMenu && hideSubMenu==name) ? 'block' : 'hidden'}`}>
+        <div className={`w-full ${(hideSubMenu == name || subLinkIsOpen) ? 'block' : 'hidden'}`}>
             {children}
         </div>
     </div>

src/components/layouts/aside/DashboardAside.jsx

@@ -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) => {
+    const handleHideSubMenu = (name) => {
-        e.stopPropagation()
+        // e.stopPropagation()
-        let name = e.target.name
         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
+            {asideNavLinks.map((link, index) => {
-                to={RouteLinks.homePage}
+                let active = link.status == 1 ? true : false
-                shrinkAside={shrinkAside}
+                let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
-                name='Dashboard'
+                if(active && !hasSubLinks){
-            >
+                    return (
-                <AiOutlineDashboard className="text-base" />
+                    <AsideLink key={index} to={link.to} shrinkAside={shrinkAside} name={link.name} icon={link.icon} />
-            </AsideLink>
+                    )
-
+                }else if(active && hasSubLinks){
-            <div className="w-full">
+                    return (
-                <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> 
+                    <div key={index} className="w-full">
-                <AsideLink
+                        {link.title &&
-                    to={RouteLinks.usersPage}
+                            <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>
-                    shrinkAside={shrinkAside}
+                        }
-                    name='Users'
+                        <AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name={link.name} icon={link.icon}>
-                >
+                            <>
-                    <IoPeople className="text-base" />
+                            {link.subLinks.map((subItem, index)=>{
-                </AsideLink>          
+                                let active = subItem.status == 1 ? true : false
-            </div>
+                                if(active){
-
+                                    return (
-            <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> */}
+                                        <AsideLink key={index} to={subItem.to} shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} />
-                <AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='Loans' icon='fa-solid fa-list'>
+                                    </>
-                    <AsideLink
+                                )
-                        to={RouteLinks.approvedLoans}
+                                }
-                        shrinkAside={shrinkAside}
+                            })}
-                        name='Approved'
+                            </>
-                    >
+                        </AsideLinkWithSubLinks>
-                        <GoDotFill className="text-base" />
+                    </div>
-                    </AsideLink> 
+                    )
-                    <AsideLink
+                }else{
-                        to={RouteLinks.pendingLoans}
+                    return null
-                        shrinkAside={shrinkAside}
+                }
-                        name='Pending'
+            })}
-                    >
-                        <IoPeople className="text-base" />
-                    </AsideLink> 
-                </AsideLinkWithSubLinks>
-            </div>
         </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},
+        ]
+    },
+]

src/pages/Disbursements.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
 
-export default function PendingLoansPage() {
+export default function Disbursements() {
   return (
     <div className='w-full'>
-      <BreadcrumbCom title='Pending Loans' paths={['Dashboard', 'Pending Loans']} />
+      <BreadcrumbCom title='Disbursements' paths={['Dashboard', 'Disbursements']} />
       <p className=''>
         coming soon ...
       </p>