src/components/Dashboard/DashboardHome.tsx

@@ -3,7 +3,7 @@ import { DefaultCard } from "../"
 export default function DashboardHome() {
   return (
     <div className='w-full'>
-      <div className='group w-full xxs:w-96 h-32'>
+      <div className='group w-full lg:w-96 h-32'>
         <DefaultCard 
           descText='You currently do not have any open application. Click on apply for a loan to get started.'
           iconName='arrow'
@@ -16,7 +16,7 @@ export default function DashboardHome() {
 
       <div className='w-full mt-20 flex gap-16 flex-wrap'>
         {/* cards display */}
-        <div className='group h-40 w-full xxs:w-80'>
+        <div className='group h-40 w-full lg:w-80'>
           <DefaultCard 
             title='Apply for a loan'
             descText='You currently do not have any open application. Click on apply for a loan to get started.'
@@ -28,7 +28,7 @@ export default function DashboardHome() {
             onClick={()=>{console.log('working')}}
           />
         </div>
-        <div className='group h-40 w-full xxs:w-80'>
+        <div className='group h-40 w-full lg:w-80'>
           <DefaultCard 
             title='Loan history'
             descText='You currently do not have any open application. Click on apply for a loan to get started.'
@@ -40,7 +40,7 @@ export default function DashboardHome() {
             onClick={()=>{console.log('working')}}
           />
         </div>
-        <div className='group h-40 w-full xxs:w-80'>
+        <div className='group h-40 w-full lg:w-80'>
           <DefaultCard 
             title='How it works?'
             descText='Steps to follow to complete your loan application successfully.'

src/components/DashboardLayout/Aside.tsx

@@ -1,31 +1,86 @@
+import {useState} from 'react'
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import { Icons } from "../index";
 
-export default function Aside() {
+type Props = {
+  asideDisplay?: () => void
+}
+
+export default function Aside({asideDisplay}:Props) {
 
   const {pathname} = useLocation()
 
   const navigate = useNavigate()
 
+  const [openNestedLink, setOpenNestedLink] = useState<{name:string|null}>({name: ''})
+
+  const handleOpenNestedLink = (e:any) => {
+    if(!e || !e.target){
+      return setOpenNestedLink({name: ''})
+    }
+   if(openNestedLink.name && openNestedLink.name == e.target.name){
+      setOpenNestedLink({name: ''})
+    }else{
+      setOpenNestedLink({name: e.target.name})
+    }
+  }
+
   return (
-    <div className="py-5 px-10 flex flex-col h-full">
+    <div className="py-5 px-10 flex flex-col h-full bg-inherit">
       <div className="flex justify-center items-center text-sm">
         <p className="w-14 h-14 rounded-full bg-[#5C2684]/50 flex items-center justify-center">
           AC
         </p>
       </div>
-      <div className="mt-10 h-full overflow-y-auto">
-        {asideLinks.map((link, index) => (
-            <Link
-            key={index}
-            to={link.link}
-            className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium border-2 ${pathname == link.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`}
-            >
-            <Icons name={link.icon} fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`} />
-            {link.name}
-            </Link>
-        ))}
+      <div className="mt-10 h-full overflow-y-auto bg-inherit">
+        {asideLinks.map((link, index) => {
+          if(link.nestedLink?.length){
+            let allNestedLinks = link.nestedLink.map(item => item.link)
+            return (
+              <div key={index} className='w-full relative bg-inherit overflow-hidden'>
+                <button
+                    name={link.name} 
+                    onClick={(e)=>handleOpenNestedLink(e)}
+                    className={`py-2 pl-2 text-left relative w-full overflow-hidden rounded-lg border-2 flex justify-between items-center z-10 bg-inherit ${allNestedLinks.includes(pathname) ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`} 
+                >
+                  {link.name}
+                  <div className={`mr-2 ${openNestedLink.name == link.name ? '-rotate-90' : 'rotate-90'} transition-all duration-300`}>
+                    <Icons 
+                      name='greater-than' 
+                      fillColor={`${openNestedLink.name == link.name ? '#5C2684' : '#585858'}`} 
+                    />
+                  </div>
+                </button>
+                <div className={`transition-all duration-300 w-full z-1 ${openNestedLink.name == link.name ? 'relative top-0' : 'absolute -top-[500px]'}`}>
+                  {link.nestedLink.map((nextLink, index) => (
+                    <Link
+                      onClick={()=>{asideDisplay && asideDisplay()}}
+                      key={index}
+                      to={nextLink.link ? nextLink.link : '#'}
+                      className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium border-l-2 ${pathname == nextLink.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`}
+                    >
+                    <Icons name={nextLink.icon} fillColor={`${pathname == nextLink.link ? '#5C2684' : '#585858'}`} />
+                    {nextLink.name}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )
+          }else{
+            return(
+              <Link
+                onClick={()=>{asideDisplay && asideDisplay()}}
+                key={index}
+                to={link.link ? link.link : '#'}
+                className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium border-2 ${pathname == link.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`}
+              >
+              <Icons name={link.icon} fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`} />
+              {link.name}
+              </Link>
+            )
+          }
+        })}
       </div>
       <div className="w-full flex justify-center items-center">
         <button className="py-3 px-6 bg-red-100 text-red-500 font-medium rounded-md" onClick={()=>navigate('/login', {replace:true})}>
@@ -39,14 +94,23 @@ export default function Aside() {
 
 type AsideLinksType = {
     name: string,
-    link: string,
+    link?: string,
     icon: string,
-    nestedlink?:boolean
+    nestedLink:{
+      name: string,
+      link: string,
+      icon: string,
+    }[]
 }[]
 const asideLinks:AsideLinksType = [
-    {name: 'Home', link: '/dashboard/home', icon: 'home'},
-    {name: 'My Profile', link: '/dashboard/profile', icon: 'profile'},
-    {name: 'Verification', link: '/dashboard/verification', icon: 'verification'},
-    {name: 'Payments', link: '/dashboard/payments', icon: 'payments'},
-    {name: 'Legals', link: '/dashboard/legals', icon: 'legals'},
+    {name: 'Home', link: '/dashboard/home', icon: 'home', nestedLink:[]},
+    {name: 'My Profile', link: '/dashboard/profile', icon: 'profile', nestedLink:[]},
+    {name: 'Verification', link: '/dashboard/verification', icon: 'verification', nestedLink:[]},
+    {name: 'Payments', link: '/dashboard/payments', icon: 'payments', nestedLink:[]},
+    {name: 'Legals', link: '/dashboard/legals', icon: 'legals', nestedLink:[]},
+    {name: 'Nested Link', icon: 'home', nestedLink:[
+        {name: 'Link 2', link: '/dashboard/not-found', icon: 'legals'}, 
+        {name: 'Link 1', link: '/dashboard/not-found', icon: 'home'}
+      ]
+    },
 ]

src/components/DashboardLayout/DashboardLayout.tsx

@@ -6,7 +6,7 @@ export default function DashboardLayout({children}:{children: ReactNode}) {
 
   const [showAside, setShowAside] = useState<boolean>(false)
 
-  const AsideDisplay = () => {
+  const asideDisplay = ():void => {
     setShowAside(prev => !prev)
   }
 
@@ -30,7 +30,7 @@ export default function DashboardLayout({children}:{children: ReactNode}) {
       </aside>
 
       <aside className={`w-[300px] md:hidden bg-white border-r-2 border-[#E6E6E6] fixed top-0 bottom-0 z-50 transition-all duration-500 ${showAside ? 'left-0' : '-left-[200%]'}`}>
-        <Aside />
+        <Aside asideDisplay={asideDisplay}/>
       </aside>
 
       <main className={`dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden`}>
@@ -43,22 +43,22 @@ export default function DashboardLayout({children}:{children: ReactNode}) {
                 <div className='w-full'>Welcome Austin Catherine</div>
                 <div
                 className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
-                onClick={AsideDisplay}
+                onClick={asideDisplay}
                 >
                 <div
-                    className={`absolute left-0 w-5 h-1 bg-black dark:bg-white transition-all duration-500 ${
+                    className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
                     showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
                     }`}
                 ></div>
                 <div
-                    className={`absolute left-0 w-5 h-1 bg-black dark:bg-white transition-all duration-300 ${
+                    className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
                     showAside
                         ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
                         : "top-1/2 -translate-y-1/2"
                     }`}
                 ></div>
                 <div
-                    className={`absolute left-0 w-5 h-1 bg-black dark:bg-white transition-all duration-500 ${
+                    className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
                     showAside
                         ? "top-1/2 -translate-y-1/2 -rotate-45"
                         : "bottom-0"