made aside bar to close on mobile view whenever a link is clicked

src/components/Cards/DefaultCard.tsx

@@ -0,0 +1,42 @@
+import { Icons } from "../"
+
+type Props = {
+  title?: string,
+  descText?: string,
+  iconName?: string,
+  iconColor?: string,
+  cardClass?: string,
+  titleClass?: string,
+  descTextClass?: string,
+  onClick?: ()=>any
+}
+
+
+export default function DefaultCard({
+title,
+descText,
+iconName,
+iconColor,
+cardClass,
+titleClass,
+descTextClass,
+onClick
+}:Props) {
+  return (
+    <button 
+      className={`h-full w-full rounded-lg p-5 shadow-lg hover:shadow-none bg-no-repeat bg-[90%] flex justify-between gap-4 items-center transition-all duration-300 ${cardClass && cardClass}`}
+      onClick={onClick}
+    >
+      <div className='w-3/4'>
+        <h1 className={`mb-1 text-[#FFF] text-lg text-left font-bold ${titleClass && titleClass}`}>{title}</h1>
+        <p className={`text-sm text-left ${descTextClass && descTextClass}`}>{descText}</p>
+      </div>
+
+      {iconName && // DISPLAYS ICON IF THERE IS ICON NAME PRESENT
+      <div className='group-hover:-translate-x-2 transition-all duration-300'>
+        <Icons name={iconName} fillColor={`${iconColor ? iconColor : '#FFF'}`} />
+      </div>
+      }
+    </button>
+  )
+}

src/components/Cards/index.tsx

@@ -0,0 +1,3 @@
+import DefaultCard from "./DefaultCard";
+
+export { DefaultCard };

src/components/Dashboard/DashboardHome.tsx

@@ -0,0 +1,58 @@
+import { DefaultCard } from "../"
+
+export default function DashboardHome() {
+  return (
+    <div className='w-full'>
+      <div className='group w-full xxs: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'
+          iconColor='#FBB700'
+          cardClass={`p-4 bg-[#FFFAFA] border border-[#EE4040]`}
+          descTextClass='text-[#423131] leading-5'
+          onClick={()=>{console.log('working')}}
+        />
+      </div>
+
+      <div className='w-full mt-20 flex gap-16 flex-wrap'>
+        {/* cards display */}
+        <div className='group h-40 w-full xxs: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.'
+            iconName='greater-than'
+            iconColor='#FFF'
+            cardClass={`bg-[#5C2684] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+            titleClass='text-[#FFF]'
+            descTextClass='text-[#EFEFEF] leading-5'
+            onClick={()=>{console.log('working')}}
+          />
+        </div>
+        <div className='group h-40 w-full xxs:w-80'>
+          <DefaultCard 
+            title='Loan history'
+            descText='You currently do not have any open application. Click on apply for a loan to get started.'
+            iconName='greater-than'
+            iconColor='#FFF'
+            cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+            titleClass='text-[#FFF]'
+            descTextClass='text-[#EFEFEF] leading-5'
+            onClick={()=>{console.log('working')}}
+          />
+        </div>
+        <div className='group h-40 w-full xxs:w-80'>
+          <DefaultCard 
+            title='How it works?'
+            descText='Steps to follow to complete your loan application successfully.'
+            iconName='greater-than'
+            iconColor='#FFF'
+            cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+            titleClass='text-[#FFF]'
+            descTextClass='text-[#EFEFEF] leading-5'
+            onClick={()=>{console.log('working')}}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Dashboard/index.tsx

@@ -0,0 +1,3 @@
+import DashboardHome from './DashboardHome'
+
+export { DashboardHome };

src/components/DashboardLayout/Aside.tsx

@@ -1,34 +1,89 @@
+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" onClick={()=>navigate('/login', {replace:true})}>
+        <button className="py-3 px-6 bg-red-100 text-red-500 font-medium rounded-md" onClick={()=>navigate('/login', {replace:true})}>
           Log out
         </button>
       </div>
@@ -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,11 +30,11 @@ 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`}>
-          <header className={`p-5 sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6] bg-[url('../../../src/assets/images/dashboard/Ellipse1.png')] bg-no-repeat bg-[top_right]`}>
+          <header className={`p-5 sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6] bg-[url('../../../src/assets/images/dashboard/bg_ellipse1.png')] bg-no-repeat bg-[top_right]`}>
             <div className='h-14 w-full flex justify-end items-center gap-5'>
                 {/* <div className=''>
                 <button className='px-4 py-2 rounded-lg shadow-lg bg-white/50'>DarkMode</button>
@@ -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"

src/components/Icons/Icons.tsx

@@ -28,6 +28,14 @@ export default function Icons({name, fillColor}:Props) {
     <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M8 10.5H7.99937C7.99937 9.99438 8.04125 10.2272 5.34156 4.82781C4.79 3.725 3.21062 3.72281 2.65812 4.82781C-0.0643752 10.2734 0.000625 10.0103 0.000625 10.5H0C0 11.8806 1.79094 13 4 13C6.20906 13 8 11.8806 8 10.5ZM4 5.5L6.25 10H1.75L4 5.5ZM19.9994 10.5C19.9994 9.99438 20.0413 10.2272 17.3416 4.82781C16.79 3.725 15.2106 3.72281 14.6581 4.82781C11.9356 10.2734 12.0006 10.0103 12.0006 10.5H12C12 11.8806 13.7909 13 16 13C18.2091 13 20 11.8806 20 10.5H19.9994ZM13.75 10L16 5.5L18.25 10H13.75ZM16.5 14H11V4.78906C11.7347 4.4675 12.2863 3.80531 12.4497 3H16.5C16.7763 3 17 2.77625 17 2.5V1.5C17 1.22375 16.7763 1 16.5 1H11.9888C11.5325 0.39625 10.8153 0 10 0C9.18469 0 8.4675 0.39625 8.01125 1H3.5C3.22375 1 3 1.22375 3 1.5V2.5C3 2.77625 3.22375 3 3.5 3H7.55031C7.71375 3.805 8.265 4.4675 9 4.78906V14H3.5C3.22375 14 3 14.2238 3 14.5V15.5C3 15.7762 3.22375 16 3.5 16H16.5C16.7763 16 17 15.7762 17 15.5V14.5C17 14.2238 16.7763 14 16.5 14Z" fill={fillColor ? fillColor : '#5C2684'}/>
     </svg>
+    :name == 'arrow'?
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.3072 1.05822L7.03885 0.34847C7.34865 0.0479466 7.8496 0.0479466 8.15611 0.34847L14.563 6.56035C14.8728 6.86087 14.8728 7.34682 14.563 7.64415L8.15611 13.8592C7.84631 14.1597 7.34536 14.1597 7.03885 13.8592L6.3072 13.1495C5.9941 12.8458 6.00069 12.3502 6.32038 12.0529L10.2917 8.38267H0.819787C0.381453 8.38267 0.0288086 8.04058 0.0288086 7.61538V6.59232C0.0288086 6.16711 0.381453 5.82503 0.819787 5.82503H10.2917L6.32038 2.15481C5.9974 1.85748 5.99081 1.36194 6.3072 1.05822Z" fill={fillColor ? fillColor : '#FBB700'}/>
+    </svg>
+    :name == 'greater-than'?
+    <svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.74365 8.64502L3.10303 15.2856C2.64404 15.7446 1.90186 15.7446 1.44775 15.2856L0.344238 14.1821C-0.114746 13.7231 -0.114746 12.981 0.344238 12.5269L5.05127 7.81982L0.344238 3.11279C-0.114746 2.65381 -0.114746 1.91162 0.344238 1.45752L1.44287 0.344238C1.90186 -0.114746 2.64404 -0.114746 3.09814 0.344238L9.73877 6.98486C10.2026 7.44385 10.2026 8.18604 9.74365 8.64502Z" fill={fillColor ? fillColor : '#FFF'}/>
+    </svg>
     :
     null
     }

src/components/index.ts

@@ -5,3 +5,5 @@ export * from "./shared";
 export * from "./Footer";
 export * from "./DashboardLayout";
 export * from "./Icons";
+export * from './Dashboard'
+export * from './Cards'

src/pages/DashboardHome.tsx

@@ -1,5 +0,0 @@
-export default function DashboardHome() {
-  return (
-    <div className=''>DashboardHome</div>
-  )
-}

src/pages/DashboardHomePage.tsx

@@ -0,0 +1,9 @@
+import { DashboardHome } from "../components"
+
+export default function DashboardHomePage() {
+  return (
+    <div className=''>
+      <DashboardHome />
+    </div>
+  )
+}

src/pages/DashboardLegalsPage.tsx

@@ -1,4 +1,4 @@
-export default function DashboardLegals() {
+export default function DashboardLegalsPage() {
   return (
     <div>DashboardLegals</div>
   )

src/pages/DashboardPaymentsPage.tsx

@@ -1,4 +1,4 @@
-export default function Dashboardpayments() {
+export default function DashboardpaymentsPage() {
   return (
     <div>Dashboardpayments</div>
   )

src/pages/DashboardProfilePage.tsx

@@ -1,4 +1,4 @@
-export default function DashboardProfile() {
+export default function DashboardProfilePage() {
   return (
     <div>DashboardProfile</div>
   )

src/pages/DashboardVerificationPage.tsx

@@ -1,4 +1,4 @@
-export default function DashboardVerification() {
+export default function DashboardVerificationPage() {
   return (
     <div>DashboardVerification</div>
   )

src/pages/index.ts

@@ -1,10 +1,10 @@
 import HomePage from "./HomePage";
 import LoginPage from "./LoginPage";
 import GetStartedPage from "./GetStartedPage";
-import DashboardHome from "./DashboardHome";
-import DashboardLegals from "./DashboardLegals";
-import DashboardProfile from "./DashboardProfile";
-import DashboardVerification from "./DashboardVerification";
-import Dashboardpayments from "./DashboardPayments";
+import DashboardHomePage from "./DashboardHomePage";
+import DashboardLegalsPage from "./DashboardLegalsPage";
+import DashboardProfilePage from "./DashboardProfilePage";
+import DashboardVerificationPage from "./DashboardVerificationPage";
+import DashboardpaymentsPage from "./DashboardPaymentsPage";
 
-export {HomePage, LoginPage, GetStartedPage, DashboardHome, DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments}
+export {HomePage, LoginPage, GetStartedPage, DashboardHomePage, DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, DashboardpaymentsPage}

src/router/Router.tsx

@@ -1,6 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 import { RouteHandler } from "./routes";
-import { GetStartedPage, HomePage, LoginPage, DashboardHome,  DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments } from "../pages";
+import { GetStartedPage, HomePage, LoginPage, DashboardHomePage,  DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, DashboardpaymentsPage } from "../pages";
 import { DashboardAuth } from "../components";
 
 const Routers = () => {
@@ -10,11 +10,11 @@ const Routers = () => {
       <Route path={RouteHandler.loginpage} element={<LoginPage />} />
       <Route path={RouteHandler.getStarted} element={<GetStartedPage />} />
       <Route element={<DashboardAuth />}>
-          <Route path={RouteHandler.dashboardHome} element={<DashboardHome />} />
-          <Route path={RouteHandler.dashboardProfile} element={<DashboardProfile />} />
-          <Route path={RouteHandler.dashboardVerification} element={<DashboardVerification />} />
-          <Route path={RouteHandler.dashboardPayments} element={<Dashboardpayments />} />
-          <Route path={RouteHandler.dashboardLegals} element={<DashboardLegals />} />
+          <Route path={RouteHandler.dashboardHome} element={<DashboardHomePage />} />
+          <Route path={RouteHandler.dashboardProfile} element={<DashboardProfilePage />} />
+          <Route path={RouteHandler.dashboardVerification} element={<DashboardVerificationPage />} />
+          <Route path={RouteHandler.dashboardPayments} element={<DashboardpaymentsPage />} />
+          <Route path={RouteHandler.dashboardLegals} element={<DashboardLegalsPage />} />
       </Route>
       <Route path='*'element={<>Error Page</>} />
     </Routes>