digifi-www/src/layouts/DashboardLayout/Aside.tsx

import { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import Logo from '../../assets/icons/logo.svg';
import { Icons } from '../../components';
import { contactDetails } from '../../utils/data';

type Props = {
  asideDisplay?: () => void;
  logoutUser: () => void;
};

export default function Aside({ asideDisplay, logoutUser }: Props) {
  const { pathname } = useLocation();

  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 });
    }
  };

  // Track user activity
  useEffect(() => {
    let timeout: number;

    const resetTimeout = () => {
      clearTimeout(timeout);
      timeout = window.setTimeout(() => {
        // Logout user after 7 minutes of inactivity
        logoutUser();
      }, 7 * 60 * 1000); // 7 minutes in milliseconds
    };

    const handleUserActivity = () => {
      resetTimeout();
    };

    // Attach event listeners to track user activity
    document.addEventListener('mousemove', handleUserActivity);
    document.addEventListener('keypress', handleUserActivity);

    // Initialize timeout
    resetTimeout();

    // Clear timeout and remove event listeners on component unmount
    return () => {
      clearTimeout(timeout);
      document.removeEventListener('mousemove', handleUserActivity);
      document.removeEventListener('keypress', handleUserActivity);
    };
  }, [logoutUser]);

  return (
    <div className="py-5 px-10 flex flex-col h-full bg-inherit">
      <Link to="/">
        <img src={Logo} alt="Logo" className="w-[72px] h-[63px]" />
      </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 flex justify-between items-center z-10 bg-inherit ${
                    allNestedLinks.includes(pathname)
                      ? ' text-[#5C2684]'
                      : ' 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 ${
                        pathname == nextLink.link
                          ? ' text-[#5C2684]'
                          : '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 ${
                  pathname == link.link ? 'text-[#5C2684]' : '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 flex-col gap-3">
        <button
          className="py-3 px-6 bg-red-100 text-red-500 font-medium rounded-md w-full"
          onClick={() => logoutUser()}
        >
          Log out
        </button>

        <div className="flex flex-col gap-[.4375rem] text-[.75rem]">
          <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
            For more enquiries and support
          </p>
          {/* <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
            Call: 09099000000
          </p>
          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
            Email: fcmbloan@support.com
          </p> */}
          {contactDetails.map(({ name, value }) => (
            <p
              key={name}
              className="font-extrabold tracking-[3%] text-[#5A5A5A]"
            >
              {name}: {value}
            </p>
          ))}
        </div>
      </div>
    </div>
  );
}

type AsideLinksType = {
  name: string;
  link?: string;
  icon: string;
  nestedLink?: {
    name: string;
    link: string;
    icon: string;
  }[];
}[];

const asideLinks: AsideLinksType = [
  {
    name: 'Dashboard',
    link: '/dashboard/home',
    icon: 'dash-icon',
    nestedLink: [],
  },
  {
    name: 'Your Profile',
    link: '/dashboard/profile',
    icon: 'dash-icon',
    nestedLink: [],
  },
  {
    name: 'Employment Details',
    link: '/dashboard/verification',
    icon: 'dash-icon',
    nestedLink: [],
  },
  {
    name: 'Reference Details',
    link: "/dashboard/reference",
    icon: 'dash-icon',
    nestedLink: [],
  },
  {
    name: 'Agreements',
    link: '/dashboard/legals',
    icon: 'dash-icon',
    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'}
  //   ]
  // },
];