From 24636b4b966f5dd06f97096d104cc7181bddcfc9 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 13 Feb 2025 21:41:36 +0100 Subject: [PATCH] aside links changed to array list --- src/RouteLinks.js | 2 +- src/SiteRoutes.jsx | 4 +- src/components/Icons.jsx | 25 ++++ src/components/layouts/DashboardLayout.jsx | 6 +- src/components/layouts/aside/AsideLink.jsx | 5 +- .../layouts/aside/AsideLinkWithSubLinks.jsx | 17 +-- .../layouts/aside/DashboardAside.jsx | 108 ++++++++++-------- ...PendingLoansPage.jsx => Disbursements.jsx} | 4 +- 8 files changed, 109 insertions(+), 62 deletions(-) create mode 100644 src/components/Icons.jsx rename src/pages/{PendingLoansPage.jsx => Disbursements.jsx} (61%) diff --git a/src/RouteLinks.js b/src/RouteLinks.js index 7e70dd0..902b2d9 100644 --- a/src/RouteLinks.js +++ b/src/RouteLinks.js @@ -4,7 +4,7 @@ const RouteLinks = { homePage: '/', usersPage: '/users', approvedLoans: '/loans/approved', - pendingLoans: '/loans/pending', + disbursements: '/loans/disbursements', } export default RouteLinks \ No newline at end of file diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx index c87e473..17faeed 100644 --- a/src/SiteRoutes.jsx +++ b/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() { } /> {`*/HOME PAGE*/`} } /> {`*/USERS PAGE*/`} } /> {`*/APPROVED LOANS PAGE*/`} - } /> {`*/PENDING LOANS PAGE*/`} + } /> {`*/DISBURSEMENTS LOANS PAGE*/`} {/* ERROR PAGE */} diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx new file mode 100644 index 0000000..0daac3b --- /dev/null +++ b/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' ? + + : name.toLowerCase() == 'money' ? + + :name.toLowerCase() == 'dot' ? + + :name.toLowerCase() == 'people' ? + + :name.toLowerCase() == 'product' ? + + : + null + } + + ) +} diff --git a/src/components/layouts/DashboardLayout.jsx b/src/components/layouts/DashboardLayout.jsx index 7534508..5f95409 100644 --- a/src/components/layouts/DashboardLayout.jsx +++ b/src/components/layouts/DashboardLayout.jsx @@ -34,11 +34,13 @@ export default function DashboardLayout() { -
setShowAsideDrawer(prev => !prev)} className={`${showAsideDrawer ? 'left-0' : '-left-96'} w-72 lg:hidden fixed inset-0 z-[999] bg-black text-white-light`}> +
setShowAsideDrawer(prev => !prev)} + className={`${showAsideDrawer ? 'left-0' : '-left-96'} w-72 lg:hidden fixed inset-0 z-[999] bg-black text-white-light`}> diff --git a/src/components/layouts/aside/AsideLink.jsx b/src/components/layouts/aside/AsideLink.jsx index fd1cd5f..f17ab71 100644 --- a/src/components/layouts/aside/AsideLink.jsx +++ b/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 && } {shrinkAside ? '' : name} ) diff --git a/src/components/layouts/aside/AsideLinkWithSubLinks.jsx b/src/components/layouts/aside/AsideLinkWithSubLinks.jsx index 2c72070..5416ee2 100644 --- a/src/components/layouts/aside/AsideLinkWithSubLinks.jsx +++ b/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 (
- -
+
{children}
diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx index 5764da5..1dbecf8 100644 --- a/src/components/layouts/aside/DashboardAside.jsx +++ b/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) => { - 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}) {
- - - - -
-

ADMIN

- - - -
- -
- {/*

LOANS

*/} - - - - - - - - -
+ {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 ( + + ) + }else if(active && hasSubLinks){ + return ( +
+ {link.title && +

{link.title}

+ } + + <> + {link.subLinks.map((subItem, index)=>{ + let active = subItem.status == 1 ? true : false + if(active){ + return ( + <> + + + ) + } + })} + + +
+ ) + }else{ + return null + } + })}
@@ -99,3 +89,29 @@ export default function DashboardAside({shrinkAside=false}) {
) } + +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}, + ] + }, +] diff --git a/src/pages/PendingLoansPage.jsx b/src/pages/Disbursements.jsx similarity index 61% rename from src/pages/PendingLoansPage.jsx rename to src/pages/Disbursements.jsx index 855c3d2..5ac5db2 100644 --- a/src/pages/PendingLoansPage.jsx +++ b/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 (
- +

coming soon ...