Dev_Socialbuddy_Frontend/components/layouts/sidebar.tsx

'use client';

import PerfectScrollbar from 'react-perfect-scrollbar';
import { useDispatch, useSelector } from 'react-redux';
import Link from 'next/link';
import { toggleSidebar } from '@/store/themeConfigSlice';
import { IRootState } from '@/store';
import { useState, useEffect } from 'react';
import IconCaretsDown from '@/components/icon/icon-carets-down';
import { usePathname } from 'next/navigation';
import { getTranslation } from '@/i18n';

import {
    LayoutDashboard,
    Link2,
    Instagram,
    Image,
    Bot,
    User,
    Gem,
} from "lucide-react";

const Sidebar = () => {
    const dispatch = useDispatch();
    const { t } = getTranslation();
    const pathname = usePathname();
    const [currentMenu, setCurrentMenu] = useState<string>('');
    const themeConfig = useSelector((state: IRootState) => state.themeConfig);

    const toggleMenu = (value: string) => {
        setCurrentMenu((oldValue) => (oldValue === value ? '' : value));
    };

    /* Auto-open Active Item */
    useEffect(() => {
        const selector = document.querySelector('.sidebar ul a[href="' + window.location.pathname + '"]');
        if (selector) {
            selector.classList.add('active');
            const ul: any = selector.closest('ul.sub-menu');
            if (ul) {
                let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link') || [];
                if (ele.length) {
                    ele = ele[0];
                    setTimeout(() => ele.click());
                }
            }
        }
    }, []);

    /* Active Route Setter */
    useEffect(() => {
        setActiveRoute();

        if (window.innerWidth < 1024 && themeConfig.sidebar) {
            dispatch(toggleSidebar());
        }
    }, [pathname, dispatch, themeConfig.sidebar]);

    const setActiveRoute = () => {
        document.querySelectorAll('.sidebar ul a.active')
            .forEach((el) => el.classList.remove('active'));

        document
            .querySelector('.sidebar ul a[href="' + window.location.pathname + '"]')
            ?.classList.add('active');
    };

    return (
        <div className="dark">
            <nav className="sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] bg-[#242424] text-white transition-all duration-300">
                <div className="h-full bg-[#242424]">

                    {/* Logo Section */}
                    <div className="flex items-center justify-between px-4 py-3 border-b border-gray-800">
                        <Link href="/" className="main-logo flex shrink-0 items-center">
                            <img className="ml-[5px] w-8 flex-none" src="/assets/images/logo_sb.png" alt="logo" />
                            <span className="align-middle text-2xl font-semibold text-white">Social Buddy</span>
                        </Link>

                        <button
                            type="button"
                            className="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-black/40"
                            onClick={() => dispatch(toggleSidebar())}
                        >
                            <IconCaretsDown className="m-auto rotate-90 text-white" />
                        </button>
                    </div>

                    {/* SIDEBAR CONTENT */}
                    <PerfectScrollbar className="relative h-[calc(100vh-80px)] mt-3">
                        <ul className="relative space-y-0.5 p-4 py-0 font-semibold">

                            <li className="menu nav-item pb-3">
                                <Link href="/" className="group">
                                    <div className="flex items-center px-3 py-2 rounded-lg hover:bg-black/40">
                                        <LayoutDashboard size={20} className="shrink-0 text-white group-hover:text-amber-400" />
                                        <span className="ltr:pl-3 rtl:pr-3 text-white">{t('dashboard')}</span>
                                    </div>
                                </Link>
                            </li>


                            {/* SOCIAL MEDIA SECTION */}
                            <h2 className="-mx-4 mb-1 flex items-center bg-[#111111] px-7 py-3 font-extrabold uppercase text-white">
                                {t('Social Media')}
                            </h2>

                            <li className="nav-item">
                                <ul>

                                    {/* Facebook Connect */}
                                    <li className="nav-item pt-2">
                                        <Link href="/social-media-connect" className="group">
                                            <div className="flex items-center px-3 py-2 rounded-lg hover:bg-black/40">
                                                <Link2 size={20} className="text-white group-hover:text-blue-400" />
                                                <span className="ltr:pl-3 rtl:pr-3">{t('Connect FB Business')}</span>
                                            </div>
                                        </Link>
                                    </li>

                                    {/* Channels */}
                                    <li className="nav-item">
                                        <Link href="/social-media-channels" className="group">
                                            <div className="flex items-center px-3 py-2 rounded-lg hover:bg-black/40">
                                                <Instagram size={20} className="text-white group-hover:text-pink-400" />
                                                <span className="ltr:pl-3 rtl:pr-3">{t('Instagram Channels')}</span>
                                            </div>
                                        </Link>
                                    </li>

                                    {/* Posts */}
                                    <li className="nav-item">
                                        <Link href="/social-media-posts" className="group">
                                            <div className="flex items-center px-3 py-2 rounded-lg hover:bg-black/40">
                                                <Image size={20} className="text-white group-hover:text-green-400" />
                                                <span className="ltr:pl-3 rtl:pr-3">{t('Posts and Comments')}</span>
                                            </div>
                                        </Link>
                                    </li>

                                    {/* Comments Automation */}
                                    {/* <li className="nav-item">
                                        <Link href="/comments-automation" className="group">
                                            <div className="flex items-center px-3 py-2 rounded-lg hover:bg-black/40">
                                                <Bot size={20} className="text-white group-hover:text-cyan-400" />
                                                <span className="ltr:pl-3 rtl:pr-3">{t('Comments Automation')}</span>
                                            </div>
                                        </Link>
                                    </li> */}

                                </ul>
                            </li>

                            {/* ================= ACCOUNT SECTION ================= */}
                            <h2 className="-mx-4 mb-1 mt-6 flex items-center bg-[#111111] px-7 py-3 font-extrabold uppercase text-white">
                                {t('Account')}
                            </h2>

                            <li className="nav-item">
                                <ul>

                                    {/* Account Settings */}
                                    <li className="nav-item pt-2">
                                        <Link href="/account-settings" className="group">
                                            <div className="flex items-center px-3 py-2 rounded-lg hover:bg-black/40">
                                                <User size={20} className="text-white group-hover:text-yellow-400" />
                                                <span className="ltr:pl-3 rtl:pr-3">{t('Account Settings')}</span>
                                            </div>
                                        </Link>
                                    </li>

                                    {/* Pricing */}
                                    <li className="nav-item">
                                        <Link href="/pricing" className="group">
                                            <div className="flex items-center px-3 py-2 rounded-lg hover:bg-black/40">
                                                <Gem size={20} className="text-white group-hover:text-purple-400" />
                                                <span className="ltr:pl-3 rtl:pr-3">{t('Pricing')}</span>
                                            </div>
                                        </Link>
                                    </li>

                                </ul>
                            </li>

                        </ul>
                    </PerfectScrollbar>
                </div>
            </nav>
        </div>
    );
};

export default Sidebar;