SME-Web/src/components/dashboard/SideBar.tsx

// SideBar.jsx - Updated version
import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import NavLink from './NavLink';
import SendForSign from './SendForSign';
import { HiTemplate } from "react-icons/hi";
import { BsLayoutSidebarInsetReverse, BsLayoutSidebarInset } from "react-icons/bs";
import { FaHome } from "react-icons/fa";
import { RiLogoutBoxLine } from 'react-icons/ri';
import { IoSettingsOutline } from "react-icons/io5";

import axios from 'axios';
import { MdManageAccounts } from 'react-icons/md';
import { GrContactInfo, GrTransaction } from 'react-icons/gr';
import logoSME from '../../assets/SMELogo.png'

type SideBarProps = {
    showSideBar: boolean;
    setShowSideBar: React.Dispatch<React.SetStateAction<boolean>>;
    isMobile?: boolean;
};

type MenuPathMap = {
    [key: string]: string;
}

const menuPathMap: MenuPathMap = {
    '/': 'Home',
    '/templates': 'Templates',
    // '/accounts': 'Accounts',
    '/transactions': 'Transactions',
    '/contacts': 'Contacts'
};

const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile = false }) => {
    const location = useLocation();
    const [showLogoutModal, setShowLogoutModal] = useState(false);

    const handleLogoutConfirm = async () => {
        try {
            await axios.post(`${import.meta.env.VITE_BASE_URI}/api/auth/logout`,
                {},
                {
                    withCredentials: true,
                    headers: { "ngrok-skip-browser-warning": "69420" }
                }
            );
            sessionStorage.clear();
            // Redirect to login or refresh the page after logout
            window.location.href = '/login';
        } catch (err) {
            console.error('Logout failed:', err);
        }
    };

    return (
        <>
            {/* Side Bar */}
            <div className={`
                ${isMobile ? 'fixed left-0 top-0 z-50' : 'relative'} 
                h-screen 
                ${isMobile 
                    ? (showSideBar ? 'w-[250px] translate-x-0' :  'hidden -translate-x-full') 
                    : (showSideBar ? 'w-[250px]' : 'w-[60px]')
                } 
                transition-all duration-600 
                bg-[var(--sidebarBg)] 
                shadow-md
            `}>
                {/* Menu */}
                <div className={`absolute top-0 ${showSideBar ? 'p-4' : 'py-4'} w-full max-h-max ${showSideBar ? '' : 'text-center'}`}>
                    <h1 className='w-full text-lg text-center tracking-widest font-medium text-gray-800'>
                        {showSideBar ? <img src={logoSME} loading='lazy' className='h-7 ms-6' /> : <p className='text-white'>SME</p>}
                    </h1>

                    <div
                        id="nav-link-dash"
                        className={`flex flex-col mt-4 ${showSideBar ? '' : 'items-center'}`}>
                        <SendForSign showSideBar={showSideBar} />
                        <NavLink to="/" icon={<FaHome />} label="Home" showSideBar={showSideBar} menuPathMap={menuPathMap} />
                        <NavLink to="/templates" icon={<HiTemplate />} label="Templates" showSideBar={showSideBar} menuPathMap={menuPathMap} />
                        {/* <NavLink to="/accounts" icon={<MdManageAccounts />} label="Accounts" showSideBar={showSideBar} menuPathMap={menuPathMap} /> */}
                        <NavLink to="/transactions" icon={<GrTransaction />} label="Transactions" showSideBar={showSideBar} menuPathMap={menuPathMap} />
                        <NavLink to="/contacts" icon={<GrContactInfo />} label="Contacts" showSideBar={showSideBar} menuPathMap={menuPathMap} />
                    </div>
                </div>

                {/* SideBar Toggle Button */}
                <div
                    onClick={() => setShowSideBar(!showSideBar)}
                    className={`
                        absolute top-[95%] translate-y-[-60%] 
                        ${isMobile 
                            ? (showSideBar ? 'right-2' : 'right-2') 
                            : 'right-0 top-[100%] translate-y-[-100%]'
                        } 
                        bg-[var(--dashBoardBg)] p-1 
                        ${isMobile 
                            ? 'rounded-md' 
                            : (showSideBar ? 'rounded-tl-sm rounded-bl-sm' : 'rounded-tl-sm rounded-bl-sm')
                        } 
                        cursor-pointer transition-colors
                    `}
                >
                    {!isMobile && (
                        <>
                            <div className='absolute top-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_5px_0px_0px_rgba(255,255,255,1)]'></div>
                            <div className='absolute bottom-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_-5px_0px_0px_rgba(255,255,255,1)]'></div>
                        </>
                    )}

                    {showSideBar ? (
                        <BsLayoutSidebarInsetReverse className='fill-[var(--primary)] hover:text-[var(--primary)] transition-all text-2xl' />
                    ) : (
                        <BsLayoutSidebarInset className='fill-[var(--primary)] hover:text-[var(--primary)] transition-all text-2xl' />
                    )}
                </div>

                {/* Bottom Action Buttons */}
                <div className='absolute bottom-14 right-0 flex flex-col gap-1'>
                    <button
                        onClick={() => setShowLogoutModal(true)}
                        className='flex items-center gap-2 px-3 py-2 text-[var(--sidebarMenuCol)] hover:bg-red-50 hover:text-red-600 rounded-l-sm transition-all duration-200 group'
                        title="Log out"
                    >
                        <RiLogoutBoxLine className="text-xl group-hover:scale-110 transition-transform" />
                        {/* {showSideBar && <span className="text-sm">Log Out</span>} */}
                    </button>

                    <Link
                        to="/s/settings"
                        className='flex items-center gap-2 px-3 py-2 text-[var(--sidebarMenuCol)] hover:bg-blue-50 hover:text-blue-600 rounded-l-sm transition-all duration-200 group'
                        title="Settings"
                    >
                        <IoSettingsOutline className="text-xl group-hover:scale-110 transition-transform" />
                        {/* {showSideBar && <span className="text-sm">Settings</span>} */}
                    </Link>
                </div>
            </div>

            {/* Logout Confirmation Modal */}
            {showLogoutModal && (
                <div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
                    <div className="bg-white rounded-lg shadow-xl p-4 sm:p-6 w-70 sm:w-40 lg:w-80">
                        <h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Logout</h3>
                        <p className="text-gray-600 mb-6">Are you sure you want to log out?</p>
                        <div className="flex justify-end gap-3">
                            <button
                                onClick={() => setShowLogoutModal(false)}
                                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
                            >
                                Cancel
                            </button>
                            <button
                                onClick={handleLogoutConfirm}
                                className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-md transition-colors"
                            >
                                Log Out
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default SideBar;