started layout adjusting
This commit was merged in pull request #2.
This commit is contained in:
victorAnumudu
@@ -1,8 +1,8 @@
|
||||
export default function DummyLogo() {
|
||||
return (
|
||||
<div className="w-20 rounded cursor-pointer bg-primary text-white-light p-2 flex flex-col justify-center items-center gap-0">
|
||||
<div className="w-20 rounded cursor-pointer bg-black text-white p-2 flex flex-col justify-center items-center gap-0">
|
||||
<h1 className="text-sm font-bold">digiFI</h1>
|
||||
<p className="text-12">Logo</p>
|
||||
<p className="text-12">logo here</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,6 +5,8 @@ import { FaEye, FaRegMoneyBill1 } from 'react-icons/fa6'
|
||||
import { GoDotFill } from 'react-icons/go'
|
||||
import { IoPeople, IoTrash } from 'react-icons/io5'
|
||||
import { TbPlayerTrackNext, TbPlayerTrackPrev } from 'react-icons/tb'
|
||||
import { IoMdSettings } from "react-icons/io";
|
||||
|
||||
|
||||
export default function Icons({name, className}) {
|
||||
return (
|
||||
@@ -29,6 +31,8 @@ export default function Icons({name, className}) {
|
||||
<TbPlayerTrackPrev className={`text-base ${className}`} />
|
||||
:name.toLowerCase() == 'edit' ?
|
||||
<FaEdit className={`text-base ${className}`} />
|
||||
:name.toLowerCase() == 'settings' ?
|
||||
<IoMdSettings className={`text-base ${className}`} />
|
||||
:
|
||||
null
|
||||
}
|
||||
|
||||
@@ -1,22 +1,59 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { MdKeyboardDoubleArrowRight } from 'react-icons/md'
|
||||
import { TiHomeOutline } from 'react-icons/ti'
|
||||
import DashboardHeader from '../layouts/DashboardHeader'
|
||||
|
||||
export default function BreadcrumbCom({title, span, paths}) {
|
||||
|
||||
const [stickNav, setStickNav] = useState(false)
|
||||
|
||||
useEffect(()=>{
|
||||
console.log('tru')
|
||||
|
||||
// var rect = navRef?.current?.getBoundingClientRect()?.bottom;
|
||||
var rect = 10;
|
||||
// window.addEventListener('scroll', ()=>{
|
||||
// if(window.scrollY >= rect + 20){
|
||||
// setStickNav(true)
|
||||
// console.log('tru')
|
||||
// }else{
|
||||
// setStickNav(false)
|
||||
// console.log('false')
|
||||
// }
|
||||
// })
|
||||
|
||||
// return () => window.removeEventListener('scroll', window.addEventListener('scroll', ()=>{
|
||||
// if(window.scrollY >= rect + 20){
|
||||
// setStickNav(true)
|
||||
// }else{
|
||||
// setStickNav(false)
|
||||
// }
|
||||
// }))
|
||||
},[])
|
||||
|
||||
return (
|
||||
<div className='w-full py-2 flex justify-between items-center'>
|
||||
<div className={`${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}`}>
|
||||
|
||||
<div className= {`w-full py-2 flex justify-between items-center`}>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='flex flex-col md:flex-row gap-1 md:items-center'>
|
||||
<h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-black-gray font-semibold'>{title}</h1>
|
||||
<h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
|
||||
<span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
|
||||
</div>
|
||||
<div className='flex gap-2 items-center text-black-gray dark:text-black-gray text-base'>
|
||||
<TiHomeOutline className='text-black dark:text-black-gray' />
|
||||
<div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
|
||||
<TiHomeOutline className='text-black dark:text-white-body' />
|
||||
{paths.map((item, index) => (
|
||||
<div className='flex gap-2 items-center text-black dark:text-black-gray text-10 sm:text-sm' key={index}>
|
||||
<div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
|
||||
<MdKeyboardDoubleArrowRight />
|
||||
<p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-black-gray' : ''}`}>{item}</p>
|
||||
<p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='hidden lg:flex'>
|
||||
<DashboardHeader />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -11,27 +11,17 @@ import { useState } from "react";
|
||||
import MainBtn from "../MainBtn";
|
||||
import { TbLogout2 } from "react-icons/tb";
|
||||
|
||||
export default function DashboardHeader({showAsideDrawer, setShowAsideDrawer}) {
|
||||
export default function DashboardHeader() {
|
||||
|
||||
const {theme, handleTheme, handleDrawer, setLogoutModal} = generalLayoutContext()
|
||||
|
||||
const [activeMenu, setActiveMenu] = useState('')
|
||||
|
||||
const handleActiveMenu = (name) => {
|
||||
if(activeMenu == name){
|
||||
setActiveMenu('')
|
||||
}else{
|
||||
setActiveMenu(name)
|
||||
}
|
||||
}
|
||||
const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* HEADER SECTION*/}
|
||||
<header className='sticky top-0 z-[777] w-full px-3 md:px-10 bg-white shadow-sm text-brown dark:shadow-white dark:bg-black dark:text-white'>
|
||||
<header className='text-brown dark:text-white'>
|
||||
<div className='w-full flex h-20 justify-between lg:justify-end items-center'>
|
||||
<div className="lg:hidden">
|
||||
<HandBurger asideDisplay={()=>setShowAsideDrawer(prev => !prev)} showAside={showAsideDrawer} barColor="bg-black-gray" />
|
||||
<HandBurger asideDisplay={()=>setShowAsideDrawer(prev => !prev)} showAside={showAsideDrawer} />
|
||||
</div>
|
||||
|
||||
{/* USER AVATAR */}
|
||||
@@ -48,12 +38,6 @@ export default function DashboardHeader({showAsideDrawer, setShowAsideDrawer}) {
|
||||
<div className="absolute w-4 h-4 right-0 top-4 text-[8px] flex justify-center items-center rounded-full bg-emerald-500 animate-pulse">1</div>
|
||||
</button> */}
|
||||
|
||||
{/* NOTIFICATION */}
|
||||
{/* <button onClick={()=>{}} className="relative px-2 flex justify-center items-center gap-2 cursor-pointer">
|
||||
<i className="fa-regular fa-bell text-xl"></i>
|
||||
<div className="absolute w-4 h-4 right-0 top-4 text-[8px] flex justify-center items-center rounded-full bg-emerald-500 animate-pulse">1</div>
|
||||
</button> */}
|
||||
|
||||
{/* THEME SELECTION */}
|
||||
<div onClick={handleTheme} className='px-2 flex justify-center items-center gap-2 cursor-pointer' title='Switch Color Mode'>
|
||||
{theme == 'dark' ?
|
||||
@@ -63,24 +47,19 @@ export default function DashboardHeader({showAsideDrawer, setShowAsideDrawer}) {
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* USER AVATRA */}
|
||||
{/* <div className='w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
|
||||
<img src={UserAvatar} alt='user image' className='w-full h-full p-1 rounded-full' />
|
||||
</div> */}
|
||||
|
||||
<div onClick={()=>handleActiveMenu('avatar')} className='relative cursor-pointer w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
|
||||
<img src={UserAvatar} alt='user avatar' className='w-full h-full p-1 rounded-full' />
|
||||
{activeMenu == 'avatar' &&
|
||||
<div className="pop-modal absolute p-4 w-52 sm:w-96 bg-white dark:bg-black right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
|
||||
<div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white-body dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
|
||||
<div className="w-full h-full flex flex-col gap-4">
|
||||
<div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
|
||||
<h1 className="font-semibold">Username</h1>
|
||||
<p className="-mt-2">username@gmail.com</p>
|
||||
</div>
|
||||
<div className="bg-primary rounded w-full flex justify-center items-center gap-2">
|
||||
<div className="rounded w-full flex justify-center items-center gap-2">
|
||||
<MainBtn
|
||||
text='Logout'
|
||||
className="w-full text-center text-white font-medium text-lg flex justify-center gap-2 items-center"
|
||||
className="w-full text-center text-black-body hover:text-red-500 dark:text-white-body font-bold text-lg flex justify-center gap-2 items-center"
|
||||
onClick={()=>setLogoutModal(true)}
|
||||
>
|
||||
<TbLogout2 className="text-base" />
|
||||
|
||||
@@ -1,63 +1,42 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
import { FaArrowRight, FaArrowLeft } from "react-icons/fa6";
|
||||
|
||||
import DashboardAside from './aside/DashboardAside'
|
||||
import DashboardHeader from './DashboardHeader'
|
||||
import { generalLayoutContext } from '../../context/GeneralLayoutContext'
|
||||
import DashboardAside from './aside/DashboardAside'
|
||||
|
||||
export default function DashboardLayout() {
|
||||
const [shrinkAside, setShrinkAside] = useState(false)
|
||||
|
||||
const [showAsideDrawer, setShowAsideDrawer] = useState(false)
|
||||
|
||||
useEffect(()=>{
|
||||
window.addEventListener('resize', ()=>{
|
||||
setShrinkAside(false)
|
||||
setShowAsideDrawer(false)
|
||||
})
|
||||
},[])
|
||||
const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
|
||||
|
||||
return (
|
||||
<div className='w-full flex relative m-auto h-screen overflow-hidden'>
|
||||
<div
|
||||
className={`${shrinkAside ? 'w-28' : 'w-72'} hidden lg:block relative z-[999] bg-black text-white-light`}
|
||||
>
|
||||
<div className='sticky top-0 h-full'>
|
||||
<DashboardAside shrinkAside={shrinkAside} />
|
||||
<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={()=>setShrinkAside(prev => !prev)}
|
||||
>
|
||||
{shrinkAside ? <FaArrowRight />: <FaArrowLeft />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
// onClick={()=>setShowAsideDrawer(prev => !prev)}
|
||||
className={`${showAsideDrawer ? 'left-0' : '-left-96'} w-4/5 sm:w-72 lg:hidden fixed inset-0 z-[999] bg-black text-white-light`}>
|
||||
<div className='w-full flex gap-10 relative m-auto h-screen overflow-x-hidden overflow-y-auto bg-white-body dark:bg-black-body p-8 pt-0 lg:p-10'>
|
||||
<div className='hidden lg:block w-[370px] px-8 py-4 rounded-3xl sticky top-0 h-full bg-white-aside dark:bg-black-aside shadow-round_black dark:shadow-round_white'>
|
||||
<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={(e)=>setShowAsideDrawer(prev => !prev)}
|
||||
>
|
||||
<FaArrowLeft />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='relative w-full h-full overflow-y-auto'>
|
||||
{/* HEADER SECTION generalLayoutContext*/}
|
||||
<DashboardHeader showAsideDrawer={showAsideDrawer} setShowAsideDrawer={setShowAsideDrawer} />
|
||||
{/* <div className={`${showAsideDrawer ? 'left-0' : '-left-full'} w-4/5 sm:w-72 px-8 py-4 lg:hidden fixed inset-0 z-[999] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
|
||||
<DashboardAside />
|
||||
</div> */}
|
||||
<div className={`${showAsideDrawer ? 'left-0' : '-left-full'} w-full lg:hidden fixed inset-0 z-[999]`}>
|
||||
<div className={`${showAsideDrawer ? 'left-0' : '-left-full'} fixed left-0 top-0 inset-0 w-full bg-white/20 transition-all`} onClick={()=>setShowAsideDrawer(prev => !prev)} ></div>
|
||||
<div className={`${showAsideDrawer ? 'left-0' : '-left-full'} px-8 py-4 fixed left-0 top-0 inset-0 w-4/5 sm:w-72 bg-white-aside dark:bg-black-aside dark:text-white-light`}>
|
||||
<DashboardAside />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BODY SECTION */}
|
||||
{/* main takes the full width minus that of the header and footer 72 for header, 39 for footer total 111 */}
|
||||
<div className='main p-3 md:p-10 bg-white-light dark:bg-slate-800 text-brown dark:text-white-light min-h-[calc(99vh-111px)]'>
|
||||
<div className='main w-full bg-inherit'>
|
||||
<div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
|
||||
<DashboardHeader showAsideDrawer={showAsideDrawer} setShowAsideDrawer={setShowAsideDrawer} />
|
||||
</div>
|
||||
|
||||
{/* main body section */}
|
||||
<div className='min-h-[calc(99vh-111px)] pt-20 lg:pt-0'>
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
{/* FOOTER SECTION */}
|
||||
<footer className="sticky bottom-0 text-center lg:text-end w-full bg-white dark:bg-slate-800 dark:text-white-light p-3 md:px-10 shadow-[0px_0px_2px_black]">
|
||||
<footer className="py-5 text-center lg:text-end w-full text-brown dark:text-white-light">
|
||||
<p className="text-10">Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -11,21 +11,21 @@ export default function HandBurger({showAside, asideDisplay, barColor}) {
|
||||
}`}
|
||||
></div> */}
|
||||
<div
|
||||
className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-white-light ${
|
||||
className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-black-box'} dark:bg-white-light ${
|
||||
showAside
|
||||
? "bottom-1/2 translate-y-1/2 rotate-45"
|
||||
: ""
|
||||
}`}
|
||||
></div>
|
||||
<div
|
||||
className={`absolute left-0 top-1/2 -translate-y-1/2 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-white-light transition-all duration-300 ${
|
||||
className={`absolute left-0 top-1/2 -translate-y-1/2 w-5 h-1 rounded-md ${barColor ? barColor :'bg-black-box/50'} dark:bg-white-light transition-all duration-300 ${
|
||||
showAside
|
||||
? "rotate-[2000deg] opacity-0"
|
||||
: ""
|
||||
}`}
|
||||
></div>
|
||||
<div
|
||||
className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-white-light ${
|
||||
className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-black-box/50'} dark:bg-white-light ${
|
||||
showAside
|
||||
? "top-1/2 -translate-y-1/2 -rotate-45"
|
||||
: "bottom-0"
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
import { FaArrowRight, FaArrowLeft } from "react-icons/fa6";
|
||||
|
||||
import DashboardAside from './aside/DashboardAside'
|
||||
import DashboardHeader from './DashboardHeader'
|
||||
import { generalLayoutContext } from '../../context/GeneralLayoutContext'
|
||||
|
||||
export default function DashboardLayout() {
|
||||
const [shrinkAside, setShrinkAside] = useState(false)
|
||||
|
||||
const [showAsideDrawer, setShowAsideDrawer] = useState(false)
|
||||
|
||||
useEffect(()=>{
|
||||
window.addEventListener('resize', ()=>{
|
||||
setShrinkAside(false)
|
||||
setShowAsideDrawer(false)
|
||||
})
|
||||
},[])
|
||||
return (
|
||||
<div className='w-full flex relative m-auto h-screen overflow-hidden'>
|
||||
<div
|
||||
className={`${shrinkAside ? 'w-28' : 'w-72'} hidden lg:block relative z-[999] bg-black text-white-light`}
|
||||
>
|
||||
<div className='sticky top-0 h-full'>
|
||||
<DashboardAside shrinkAside={shrinkAside} />
|
||||
<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={()=>setShrinkAside(prev => !prev)}
|
||||
>
|
||||
{shrinkAside ? <FaArrowRight />: <FaArrowLeft />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
// onClick={()=>setShowAsideDrawer(prev => !prev)}
|
||||
className={`${showAsideDrawer ? 'left-0' : '-left-96'} w-4/5 sm: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={(e)=>setShowAsideDrawer(prev => !prev)}
|
||||
>
|
||||
<FaArrowLeft />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='relative w-full h-full overflow-y-auto'>
|
||||
{/* HEADER SECTION generalLayoutContext*/}
|
||||
<DashboardHeader showAsideDrawer={showAsideDrawer} setShowAsideDrawer={setShowAsideDrawer} />
|
||||
|
||||
{/* BODY SECTION */}
|
||||
{/* main takes the full width minus that of the header and footer 72 for header, 39 for footer total 111 */}
|
||||
<div className='main p-3 md:p-10 bg-white-light dark:bg-slate-800 text-brown dark:text-white-light min-h-[calc(99vh-111px)]'>
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
{/* FOOTER SECTION */}
|
||||
<footer className="sticky bottom-0 text-center lg:text-end w-full bg-white dark:bg-slate-800 dark:text-white-light p-3 md:px-10 shadow-[0px_0px_2px_black]">
|
||||
<p className="text-10">Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,14 +1,18 @@
|
||||
import { Link, useLocation } from "react-router-dom"
|
||||
import Icons from "../../Icons"
|
||||
import { generalLayoutContext } from "../../../context/GeneralLayoutContext"
|
||||
|
||||
export default function AsideLink({shrinkAside, name, to, icon}) {
|
||||
export default function AsideLink({name, to, icon}) {
|
||||
|
||||
const {shrinkAside, setShowAsideDrawer} = generalLayoutContext()
|
||||
|
||||
const {pathname} = useLocation()
|
||||
|
||||
return (
|
||||
<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 == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
|
||||
className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded-md hover:bg-white dark:hover:bg-black-box text-black-box/80 dark:text-white-body/80 ${pathname == to ? 'bg-white-body dark:bg-black-box' : ''}`}
|
||||
to={to}
|
||||
onClick={()=>setShowAsideDrawer(false)}
|
||||
>
|
||||
{icon && <Icons name={icon} />}
|
||||
{shrinkAside ? '' : name}
|
||||
|
||||
@@ -2,11 +2,12 @@ import { useState } from "react";
|
||||
import { useLocation } from "react-router-dom"
|
||||
import { FaCaretDown } from "react-icons/fa";
|
||||
import Icons from "../../Icons";
|
||||
import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
|
||||
|
||||
|
||||
export default function AsideLinkWithSubLinks({shrinkAside, name, icon, to, children, isOpen}) {
|
||||
export default function AsideLinkWithSubLinks({name, icon, to, children, isOpen}) {
|
||||
|
||||
// const btnName = name
|
||||
const {shrinkAside} = generalLayoutContext()
|
||||
|
||||
const {pathname} = useLocation()
|
||||
|
||||
@@ -17,9 +18,9 @@ export default function AsideLinkWithSubLinks({shrinkAside, name, icon, to, chil
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`w-full px-4 text-[13px] font-semibold rounded`}
|
||||
className={`w-full px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded`}
|
||||
>
|
||||
<button onClick={()=>setHideSubMenu(prev => !prev)} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-400">
|
||||
<button onClick={()=>setHideSubMenu(prev => !prev)} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-black-body/90 dark:text-white-body/90">
|
||||
<span className="flex gap-2 items-center">{icon && <Icons name={icon} />}{shrinkAside ? '' : name}</span>
|
||||
<FaCaretDown className={`text-base ${(hideSubMenu) ? 'rotate-180' : 'rotate-0'}`} />
|
||||
</button>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {Link, useLocation} from 'react-router-dom'
|
||||
import {useLocation} from 'react-router-dom'
|
||||
import RouteLinks from "../../../RouteLinks";
|
||||
import DummyLogo from "../../DummyLogo";
|
||||
import MainBtn from "../../MainBtn";
|
||||
@@ -8,45 +7,33 @@ import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
|
||||
import { useSelector } from "react-redux";
|
||||
import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
|
||||
import { TbLogout2 } from "react-icons/tb";
|
||||
import UserAvatar from '../../../assets/user_avatar.jpg'
|
||||
import Icons from "../../Icons";
|
||||
|
||||
|
||||
export default function DashboardAside({shrinkAside=false}) {
|
||||
export default function DashboardAside() {
|
||||
|
||||
const {pathname} = useLocation()
|
||||
|
||||
const {setLogoutModal} = generalLayoutContext()
|
||||
const {setLogoutModal, activeMenu, handleActiveMenu} = generalLayoutContext()
|
||||
|
||||
const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
|
||||
const {role}= userDetails
|
||||
|
||||
// const [hideSubMenu, setHideSubMenu] = useState('')
|
||||
|
||||
// const handleHideSubMenu = (name) => {
|
||||
// // e.stopPropagation()
|
||||
// setHideSubMenu((prev) => {
|
||||
// if(prev == name){
|
||||
// return ''
|
||||
// }else{
|
||||
// return name
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col'>
|
||||
<div className="px-4 w-full h-24 logo flex items-center">
|
||||
<div className="mb-3 w-full h-24 logo flex items-center">
|
||||
<DummyLogo />
|
||||
</div>
|
||||
<hr className="border-slate-400" />
|
||||
{/* <hr className="border-slate-400" /> */}
|
||||
|
||||
<div className="p-4 w-full flex flex-col gap-2 h-full overflow-y-auto">
|
||||
<div className="aside-scroll-design w-full flex flex-col gap-2 h-full overflow-y-auto">
|
||||
{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 (
|
||||
<div key={index}>
|
||||
<AsideLink to={link.to} shrinkAside={shrinkAside} name={link.name} icon={link.icon} />
|
||||
<AsideLink to={link.to} name={link.name} icon={link.icon} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -70,9 +57,9 @@ export default function DashboardAside({shrinkAside=false}) {
|
||||
return (
|
||||
<div key={index} className="w-full">
|
||||
{link.title &&
|
||||
<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>
|
||||
<h1 className="px-4 py-2 text-sm sm:text-sm text-black dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
|
||||
}
|
||||
<AsideLinkWithSubLinks shrinkAside={shrinkAside} name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname)} >
|
||||
<AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname)} >
|
||||
<>
|
||||
{link.subLinks.map((subItem, index)=>{
|
||||
let active = subItem.status == 1 ? true : false
|
||||
@@ -80,7 +67,7 @@ export default function DashboardAside({shrinkAside=false}) {
|
||||
if(active && !hasSubLinks){
|
||||
return (
|
||||
<div key={index}>
|
||||
<AsideLink key={index} to={subItem.to} shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} />
|
||||
<AsideLink key={index} to={subItem.to} name={subItem.name} icon={subItem.icon} />
|
||||
</div>
|
||||
)
|
||||
}else if(active && hasSubLinks){
|
||||
@@ -90,14 +77,14 @@ export default function DashboardAside({shrinkAside=false}) {
|
||||
}
|
||||
})
|
||||
return(
|
||||
<AsideLinkWithSubLinks shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
|
||||
<AsideLinkWithSubLinks name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
|
||||
<>
|
||||
{subItem.subLinks.map((item, index)=>{
|
||||
let active = item.status == 1 ? true : false
|
||||
if(active){
|
||||
return (
|
||||
<div key={index}>
|
||||
<AsideLink key={index} to={item.to} shrinkAside={shrinkAside} name={item.name} icon={item.icon} />
|
||||
<AsideLink key={index} to={item.to} name={item.name} icon={item.icon} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -117,17 +104,40 @@ export default function DashboardAside({shrinkAside=false}) {
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className='px-4 py-2'>
|
||||
<div className="bg-primary rounded w-full flex justify-center items-center gap-2">
|
||||
<MainBtn
|
||||
shrinkAside={shrinkAside}
|
||||
text='Logout'
|
||||
className="w-full text-center flex justify-center gap-2 items-center"
|
||||
onClick={()=>setLogoutModal(true)}
|
||||
>
|
||||
<TbLogout2 className="text-base" />
|
||||
</MainBtn>
|
||||
<div className='py-2 mt-4 relative'>
|
||||
<div className="w-full flex items-center gap-2">
|
||||
<div className="w-full flex items-center gap-2">
|
||||
<img src={UserAvatar} alt='user avatar' className='w-12 h-12 p-1 rounded-full' />
|
||||
<div>
|
||||
<p className="text-sm font-bold text-black-body dark:text-white-body">Username</p>
|
||||
<p className="text-12 text-black-box/90 dark:text-white-body/80">username@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={()=>handleActiveMenu('settings')} className="text-black-body dark:text-white-body">
|
||||
<Icons name='settings' className='text-3xl' />
|
||||
</button>
|
||||
</div>
|
||||
{activeMenu == 'settings' &&
|
||||
<div className="pop-modal-down absolute p-4 w-full bg-white-body dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
|
||||
<div className="w-full min-h-48 flex flex-col justify-between gap-4">
|
||||
<div className="w-full h-full">
|
||||
<div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
|
||||
<h1 className="font-semibold">Username</h1>
|
||||
<p className="-mt-2">username@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded w-full flex items-center gap-2">
|
||||
<MainBtn
|
||||
text='Logout'
|
||||
className="w-full text-center text-black-body hover:text-red-500 dark:text-white-body font-bold text-lg flex justify-center gap-2 items-center"
|
||||
onClick={()=>setLogoutModal(true)}
|
||||
>
|
||||
<TbLogout2 className="text-base" />
|
||||
</MainBtn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,163 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {Link, useLocation} from 'react-router-dom'
|
||||
import RouteLinks from "../../../RouteLinks";
|
||||
import DummyLogo from "../../DummyLogo";
|
||||
import MainBtn from "../../MainBtn";
|
||||
import AsideLink from "./AsideLink";
|
||||
import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
|
||||
import { useSelector } from "react-redux";
|
||||
import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
|
||||
import { TbLogout2 } from "react-icons/tb";
|
||||
|
||||
|
||||
export default function DashboardAside({shrinkAside=false}) {
|
||||
|
||||
const {pathname} = useLocation()
|
||||
|
||||
const {setLogoutModal} = generalLayoutContext()
|
||||
|
||||
const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
|
||||
const {role}= userDetails
|
||||
|
||||
// const [hideSubMenu, setHideSubMenu] = useState('')
|
||||
|
||||
// const handleHideSubMenu = (name) => {
|
||||
// // e.stopPropagation()
|
||||
// setHideSubMenu((prev) => {
|
||||
// if(prev == name){
|
||||
// return ''
|
||||
// }else{
|
||||
// return name
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col'>
|
||||
<div className="px-4 w-full h-24 logo flex items-center">
|
||||
<DummyLogo />
|
||||
</div>
|
||||
<hr className="border-slate-400" />
|
||||
|
||||
<div className="p-4 w-full flex flex-col gap-2 h-full overflow-y-auto">
|
||||
{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 (
|
||||
<div key={index}>
|
||||
<AsideLink to={link.to} shrinkAside={shrinkAside} name={link.name} icon={link.icon} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if(active && hasSubLinks){
|
||||
// let subLinkList = link.subLinks.filter(value => value.to).map(item => { //any of all open
|
||||
// if(item.to){
|
||||
// return item.to
|
||||
// }
|
||||
// })
|
||||
let subLinkList = []
|
||||
link.subLinks.forEach(item =>{
|
||||
if(item.to){
|
||||
subLinkList.push(item.to)
|
||||
}else if(item.subLinks?.length > 0){
|
||||
item.subLinks.forEach(item => {
|
||||
subLinkList.push(item.to)
|
||||
})
|
||||
}
|
||||
})
|
||||
// console.log('subLinkList', subLinkList)
|
||||
return (
|
||||
<div key={index} className="w-full">
|
||||
{link.title &&
|
||||
<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>
|
||||
}
|
||||
<AsideLinkWithSubLinks shrinkAside={shrinkAside} name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname)} >
|
||||
<>
|
||||
{link.subLinks.map((subItem, index)=>{
|
||||
let active = subItem.status == 1 ? true : false
|
||||
let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
|
||||
if(active && !hasSubLinks){
|
||||
return (
|
||||
<div key={index}>
|
||||
<AsideLink key={index} to={subItem.to} shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} />
|
||||
</div>
|
||||
)
|
||||
}else if(active && hasSubLinks){
|
||||
let subLinkList = subItem.subLinks.filter(value => value.to).map(item => { // specific open
|
||||
if(item.to){
|
||||
return item.to
|
||||
}
|
||||
})
|
||||
return(
|
||||
<AsideLinkWithSubLinks shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
|
||||
<>
|
||||
{subItem.subLinks.map((item, index)=>{
|
||||
let active = item.status == 1 ? true : false
|
||||
if(active){
|
||||
return (
|
||||
<div key={index}>
|
||||
<AsideLink key={index} to={item.to} shrinkAside={shrinkAside} name={item.name} icon={item.icon} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</>
|
||||
</AsideLinkWithSubLinks>
|
||||
)
|
||||
}else{
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</>
|
||||
</AsideLinkWithSubLinks>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className='px-4 py-2'>
|
||||
<div className="bg-primary rounded w-full flex justify-center items-center gap-2">
|
||||
<MainBtn
|
||||
shrinkAside={shrinkAside}
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
const asideNavLinks = [
|
||||
{name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
|
||||
{name:'Salary Loan', title:'Loan', status:1, icon: 'money', subLinks: [
|
||||
{name: 'Selected Loans', status:1, icon: 'dot', to: RouteLinks.selectedLoanPage},
|
||||
{name: 'Applications', status:1, icon: 'dot', to: RouteLinks.applicationsLoanPage},
|
||||
{name: 'Approved Loans', status:1, icon: 'dot', to: RouteLinks.approvedLoansPage},
|
||||
{name: 'Disbursements', status:1, icon: 'dot', to: RouteLinks.disbursementsLoanPage},
|
||||
{name: 'Payments', status:1, icon: 'dot', to: ''},
|
||||
{name: 'Configurations', status:1, icon: 'dot', subLinks: [
|
||||
{name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.loanOffersPage },
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
// {name:'Product 2', title:'Product 2', status:1, icon: 'product', subLinks: [
|
||||
// {name: 'Applications', 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},
|
||||
// ]
|
||||
// },
|
||||
]
|
||||
Reference in New Issue
Block a user