MermsFirstOffice/src/components/layouts/aside/DashboardAside.jsx

import {useLocation} from 'react-router-dom'
import {useSelector} from "react-redux";
import RouteLinks from "../../../RouteLinks";
import DummyLogo from "../../DummyLogo";
import MainBtn from "../../MainBtn";
import AsideLink from "./AsideLink";
import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
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() {

    const {pathname} = useLocation()

    const {setLogoutModal, handleActiveMenu} = GeneralLayoutContext()

    const {userDetails: {username, email}} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER
    // const {role}= userDetails

    return (
        <div className='w-full h-full flex flex-col'>
            <div className="mb-3 w-full h-24 logo flex items-center">
                <DummyLogo/>
            </div>
            {/* <hr className="border-slate-400" /> */}

            <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={link.name}>
                                <AsideLink to={link.to} name={link.name} icon={link.icon}/>
                            </div>
                        )
                    }
                    if (active && hasSubLinks) {
                        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)
                                })
                            }
                        })
                        return (
                            <div key={link.name} className="w-full">
                                {link.title &&
                                    <h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
                                }
                                <AsideLinkWithSubLinks name={link.name} icon={link.icon}
                                                       isOpen={subLinkList.includes(pathname) || index === 1}>
                                    <>
                                        {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={subItem.name}>
                                                        <AsideLink to={subItem.to} 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 key={subItem.name} 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}
                                                                                       name={item.name}
                                                                                       icon={item.icon}/>
                                                                        </div>
                                                                    )
                                                                } else {
                                                                    return null
                                                                }
                                                            })}
                                                        </>
                                                    </AsideLinkWithSubLinks>
                                                )
                                            } else {
                                                return null
                                            }
                                        })}
                                    </>
                                </AsideLinkWithSubLinks>
                            </div>
                        )
                    } else {
                        return null
                    }
                })}
            </div>

            <div className='py-2 mt-4 relative'>
                <div className="group 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="peer text-slate-500 dark:text-white-body">
                        <Icons name='settings' className='text-3xl'/>
                    </button>
                    <div
                        className="hidden group-hover:block pop-modal-down absolute p-4 w-full bg-white 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">{email}</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>
        </div>
    )
}

const asideNavLinks = [
    {name: 'Dashboard', status: 1, icon: 'dashboard', to: RouteLinks.homePage},
    {
        name: 'Deployments', title: 'Activities', status: 1, icon: 'arrow-right', subLinks: [
            {name: 'Recent Signup', status: 1, icon: 'dot', to: RouteLinks.recentSignup},
            {name: 'Provisions', status: 1, icon: 'dot', to: RouteLinks.subscriptions},
            {name: 'Customers', status: 1, icon: 'dot', to: RouteLinks.customerPage},
            {name: 'Billings', status: 1, icon: 'dot', to: RouteLinks.billings},
            {name: 'Files & Uploads', status: 1, icon: 'dot', to: RouteLinks.files_uploads},
            {
                name: 'Configurations', status: 1, icon: 'arrow-right', subLinks: [
                    {name: 'Country', status: 1, icon: 'dot', to: RouteLinks.countrySettings},
                    {name: 'Product Settings', status: 1, icon: 'dot', to: RouteLinks.products},
                    {name: 'Product Templates', status: 1, icon: 'dot', to: RouteLinks.productTemplates},
                    {name: 'Custom Templates', status: 1, icon: 'dot', to: RouteLinks.customTemplates},
                    {name: 'Admin Manager', status: 1, icon: 'dot', to: RouteLinks.usersAdmin},
                ]
            },
        ],
    },
]