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

dashboard layout updated

Browse Source
This commit is contained in:
victorAnumudu
2025-02-13 10:23:43 +01:00
parent 2d7165125c
commit 586e3a991a
5 changed files with 37 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/aside/AsideLink.jsx
+2 -3
View File
@@ -1,6 +1,6 @@
import { Link, useLocation } from "react-router-dom"
export default function AsideLink({shrinkAside, name, to, icon}) {
export default function AsideLink({shrinkAside, name, to, children}) {
const {pathname} = useLocation()
@@ -9,8 +9,7 @@ export default function AsideLink({shrinkAside, name, to, icon}) {
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}
>
{/* {icon && <span className={`after:content-['24']`}></span>} */}
{icon && <i className={`${icon}`}></i>}
{children && children}
{shrinkAside ? '' : name}
</Link>
)
src/components/layouts/aside/DashboardAside.jsx
+27 -25
View File
@@ -11,6 +11,7 @@ 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";
export default function DashboardAside({shrinkAside=false}) {
@@ -44,54 +45,55 @@ export default function DashboardAside({shrinkAside=false}) {
<hr className="border-slate-400" />
<div className="p-4 w-full h-full overflow-y-auto">
<Link
className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.homePage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
<AsideLink
to={RouteLinks.homePage}
>
shrinkAside={shrinkAside}
name='Dashboard'
>
<AiOutlineDashboard className="text-base" />
<span>{shrinkAside ? '' : 'Dashboard'}</span>
</Link>
</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>
<Link
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 == RouteLinks.usersPage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
<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" />
<span>{shrinkAside ? '' : 'Users'}</span>
</Link>
</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'>
<Link
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 == RouteLinks.approvedLoans ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
<AsideLink
to={RouteLinks.approvedLoans}
>
shrinkAside={shrinkAside}
name='Approved'
>
<GoDotFill className="text-base" />
<span>{shrinkAside ? '' : 'Approved'}</span>
</Link>
<Link
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 == RouteLinks.pendingLoans ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
</AsideLink>
<AsideLink
to={RouteLinks.pendingLoans}
>
<GoDotFill className="text-base" />
<span>{shrinkAside ? '' : 'Pending'}</span>
</Link>
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">
<MainBtn
<MainBtn
shrinkAside={shrinkAside}
icon='fa-solid fa-right-from-bracket'
text='Logout'
className="w-full text-center flex justify-center gap-2 items-center"
onClick={()=>setLogoutModal(true)}
/>
>
<TbLogout2 className="text-base" />
</MainBtn>
</div>
</div>
</div>