/*
 * Copyright (C) 2024 Aleksander <alekswilc> Wilczyński (aleks@alekswilc.dev)
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published
 * by the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * See LICENSE for more.
 */

import React, { useEffect, useRef, useState } from "react";
import { NavLink, useLocation } from "react-router-dom";
import SidebarLinkGroup from "./SidebarLinkGroup.tsx";
import { useTranslation } from "react-i18next";
import { HamburgerGoBackIcon } from "../icons/SidebarIcons.tsx";
import { ArrowIcon } from "../icons/ArrowIcon.tsx";
import { FaHome, FaClipboardList } from "react-icons/fa";
import { FaChartSimple, FaTrain, FaBuildingFlag, FaBolt  } from "react-icons/fa6";
import { useAuth } from "../../../hooks/useAuth.tsx";

interface SidebarProps
{
    sidebarOpen: boolean;
    setSidebarOpen: (arg: boolean) => void;
}

export const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) =>
{
    const location = useLocation();
    const { pathname } = location;

    const trigger = useRef<any>(null);
    const sidebar = useRef<any>(null);

    const storedSidebarExpanded = localStorage.getItem("sidebar-expanded");
    const [ sidebarExpanded, setSidebarExpanded ] = useState(
            storedSidebarExpanded === null ? false : storedSidebarExpanded === "true",
    );

    const { t } = useTranslation();

    // close on click outside
    useEffect(() =>
    {
        const clickHandler = ({ target }: MouseEvent) =>
        {
            if (!sidebar.current || !trigger.current)
            {
                return;
            }
            if (
                    !sidebarOpen ||
                    sidebar.current.contains(target) ||
                    trigger.current.contains(target)
            )
            {
                return;
            }
            setSidebarOpen(false);
        };
        document.addEventListener("click", clickHandler);
        return () => document.removeEventListener("click", clickHandler);
    });

    // close if the esc key is pressed
    useEffect(() =>
    {
        const keyHandler = ({ keyCode }: KeyboardEvent) =>
        {
            if (!sidebarOpen || keyCode !== 27)
            {
                return;
            }
            setSidebarOpen(false);
        };
        document.addEventListener("keydown", keyHandler);
        return () => document.removeEventListener("keydown", keyHandler);
    });

    useEffect(() =>
    {
        localStorage.setItem("sidebar-expanded", sidebarExpanded.toString());
        if (sidebarExpanded)
        {
            document.querySelector("body")?.classList.add("sidebar-expanded");
        }
        else
        {
            document.querySelector("body")?.classList.remove("sidebar-expanded");
        }
    }, [ sidebarExpanded ]);

    const { isAdmin, username } = useAuth();

    return (
            <aside
                    ref={ sidebar }
                    className={ `absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${
                            sidebarOpen ? "translate-x-0" : "-translate-x-full"
                    }` }
            >
                {/* <!-- SIDEBAR HEADER --> */ }
                <div className="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
                    <button
                            ref={ trigger }
                            onClick={ () => setSidebarOpen(!sidebarOpen) }
                            aria-controls="sidebar"
                            aria-expanded={ sidebarOpen }
                            className="block lg:hidden"
                    >
                        <HamburgerGoBackIcon/>
                    </button>
                </div>
                {/* <!-- SIDEBAR HEADER --> */ }

                <div className="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
                    <nav className="mt-5 py-4 px-4 lg:mt-9 lg:px-6">
                        <div>
                            <ul className="mb-6 flex flex-col gap-1.5">
                                <li>
                                    <NavLink
                                            to="/"
                                            className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
                                                    pathname === "/" &&
                                                    "bg-graydark dark:bg-meta-4"
                                            }` }
                                    >
                                        <FaHome/>
                                        { t("sidebar.home") }
                                    </NavLink>
                                </li>


                            </ul>
                            <ul className="mb-6 flex flex-col gap-1.5">
                                <h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">
                                    { t("sidebar.info") }
                                </h3>

                                <SidebarLinkGroup
                                        activeCondition={
                                                pathname === "/logs" || pathname.includes("logs")
                                        }
                                >
                                    { (handleClick, open) =>
                                    {
                                        return (
                                                <React.Fragment>
                                                    <NavLink
                                                            to="#"
                                                            className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
                                                                    (pathname === "/logs" ||
                                                                            pathname.includes("logs")) &&
                                                                    "bg-graydark dark:bg-meta-4"
                                                            }` }
                                                            onClick={ (e) =>
                                                            {
                                                                e.preventDefault();
                                                                sidebarExpanded
                                                                        ? handleClick()
                                                                        : setSidebarExpanded(true);
                                                            } }
                                                    >
                                                        <FaClipboardList/>
                                                        { t("sidebar.logs") }
                                                        <ArrowIcon rotated={ open }/>
                                                    </NavLink>

                                                    <div
                                                            className={ `translate transform overflow-hidden ${
                                                                    !open && "hidden"
                                                            }` }
                                                    >
                                                        <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
                                                            <li>
                                                                <NavLink
                                                                        to="/logs/stations"
                                                                        className={ ({ isActive }) =>
                                                                                "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
                                                                                (isActive && "!text-white")
                                                                        }
                                                                >
                                                                    <FaBuildingFlag/>
                                                                    { t("sidebar.stations") }
                                                                </NavLink>
                                                            </li>
                                                            <li>
                                                                <NavLink
                                                                        to="/logs/trains"
                                                                        className={ ({ isActive }) =>
                                                                                "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
                                                                                (isActive && "!text-white")
                                                                        }
                                                                >
                                                                    <FaTrain/>
                                                                    { t("sidebar.trains") }
                                                                </NavLink>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </React.Fragment>
                                        );
                                    } }
                                </SidebarLinkGroup>

                                <SidebarLinkGroup
                                        activeCondition={
                                                pathname === "/leaderboard" || pathname.includes("leaderboard")
                                        }
                                >
                                    { (handleClick, open) =>
                                    {
                                        return (
                                                <React.Fragment>
                                                    <NavLink
                                                            to="#"
                                                            className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
                                                                    (pathname === "/leaderboard" ||
                                                                            (pathname.includes("leaderboard/") && !pathname.includes('leaderboard/steam'))) &&
                                                                    "bg-graydark dark:bg-meta-4"
                                                            }` }
                                                            onClick={ (e) =>
                                                            {
                                                                e.preventDefault();
                                                                sidebarExpanded
                                                                        ? handleClick()
                                                                        : setSidebarExpanded(true);
                                                            } }
                                                    >
                                                        <FaChartSimple/>
                                                        { t("sidebar.leaderboard") }
                                                        <ArrowIcon rotated={ open }/>
                                                    </NavLink>
                                                    <div
                                                            className={ `translate transform overflow-hidden ${
                                                                    !open && "hidden"
                                                            }` }
                                                    >
                                                        <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
                                                            <li>
                                                                <NavLink
                                                                        to="/leaderboard/stations"
                                                                        className={ ({ isActive }) =>
                                                                                "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
                                                                                (isActive && "!text-white")
                                                                        }
                                                                >
                                                                    <FaBuildingFlag/>
                                                                    { t("sidebar.stations") }
                                                                </NavLink>
                                                            </li>
                                                            <li>
                                                                <NavLink
                                                                        to="/leaderboard/trains"
                                                                        className={ ({ isActive }) =>
                                                                                "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
                                                                                (isActive && "!text-white")
                                                                        }
                                                                >
                                                                    <FaTrain/>
                                                                    { t("sidebar.trains") }
                                                                </NavLink>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </React.Fragment>
                                        );
                                    } }
                                </SidebarLinkGroup>


                                <SidebarLinkGroup
                                        activeCondition={
                                                pathname === "/active/trains" || pathname.includes("active/trains")
                                        }
                                >
                                    { (handleClick, open) =>
                                    {
                                        return (
                                                <React.Fragment>
                                                    <NavLink
                                                            to="#"
                                                            className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
                                                                    (pathname === "/active" ||
                                                                            pathname.includes("/active/")) &&
                                                                    "bg-graydark dark:bg-meta-4"
                                                            }` }
                                                            onClick={ (e) =>
                                                            {
                                                                e.preventDefault();
                                                                sidebarExpanded
                                                                        ? handleClick()
                                                                        : setSidebarExpanded(true);
                                                            } }
                                                    >
                                                        <FaBolt />
                                                        { t("sidebar.active_players") }
                                                        <ArrowIcon rotated={ open }/>
                                                    </NavLink>
                                                    <div
                                                            className={ `translate transform overflow-hidden ${
                                                                    !open && "hidden"
                                                            }` }
                                                    >
                                                        <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
                                                            <li>
                                                                <NavLink
                                                                        to="/active/stations"
                                                                        className={ ({ isActive }) =>
                                                                                "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
                                                                                (isActive && "!text-white")
                                                                        }
                                                                >
                                                                    <FaBuildingFlag/>
                                                                    { t("sidebar.stations") }
                                                                </NavLink>
                                                            </li>
                                                            <li>
                                                                <NavLink
                                                                        to="/active/trains"
                                                                        className={ ({ isActive }) =>
                                                                                "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
                                                                                (isActive && "!text-white")
                                                                        }
                                                                >
                                                                    <FaTrain/>
                                                                    { t("sidebar.trains") }
                                                                </NavLink>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </React.Fragment>
                                        );
                                    } }
                                </SidebarLinkGroup>
                            </ul>

                            { isAdmin && <ul className="mb-6 flex flex-col gap-1.5">
                                <h3 className="ml-4 text-sm font-semibold text-bodydark2">
                                    { t("sidebar.admin") }
                                </h3>

                                <li>
                                    <p className="group relative flex items-center rounded-sm py-2 px-4 text-sm text-bodydark1 duration-300 ease-in-out ">{t("sidebar.logged", { username })}</p>
                                </li>
                                <button onClick={() => {
                                    window.localStorage.setItem('auth_token', 'undefined');
                                    window.location.reload();
                                }} className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center text-sm text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
                                >{t("sidebar.logout")}
                                </button>

                            </ul> }
                        </div>

                        {/* TODO: add admin panel with simple auth */ }
                        {/*{false && <div>*/ }
                        {/*    <h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">*/ }
                        {/*        {t('sidebar.admin')}*/ }
                        {/*    </h3>*/ }

                        {/*    <ul className="mb-6 flex flex-col gap-1.5">*/ }
                        {/*        */ }{/*{/* <!-- Menu Item Chart --> */ }
                        {/*        <li>*/ }
                        {/*            <NavLink*/ }
                        {/*                    to="/chart"*/ }
                        {/*                    className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${*/ }
                        {/*                            pathname.includes('chart') && 'bg-graydark dark:bg-meta-4'*/ }
                        {/*                    }`}*/ }
                        {/*            >*/ }
                        {/*                <svg*/ }
                        {/*                        className="fill-current"*/ }
                        {/*                        width="18"*/ }
                        {/*                        height="19"*/ }
                        {/*                        viewBox="0 0 18 19"*/ }
                        {/*                        fill="none"*/ }
                        {/*                        xmlns="http://www.w3.org/2000/svg"*/ }
                        {/*                >*/ }
                        {/*                    <g clipPath="url(#clip0_130_9801)">*/ }
                        {/*                        <path*/ }
                        {/*                                d="M10.8563 0.55835C10.5188 0.55835 10.2095 0.8396 10.2095 1.20522V6.83022C10.2095 7.16773 10.4907 7.4771 10.8563 7.4771H16.8751C17.0438 7.4771 17.2126 7.39272 17.3251 7.28022C17.4376 7.1396 17.4938 6.97085 17.4938 6.8021C17.2688 3.28647 14.3438 0.55835 10.8563 0.55835ZM11.4751 6.15522V1.8521C13.8095 2.13335 15.6938 3.8771 16.1438 6.18335H11.4751V6.15522Z"*/ }
                        {/*                                fill=""*/ }
                        {/*                        />*/ }
                        {/*                        <path*/ }
                        {/*                                d="M15.3845 8.7427H9.1126V2.69582C9.1126 2.35832 8.83135 2.07707 8.49385 2.07707C8.40947 2.07707 8.3251 2.07707 8.24072 2.07707C3.96572 2.04895 0.506348 5.53645 0.506348 9.81145C0.506348 14.0864 3.99385 17.5739 8.26885 17.5739C12.5438 17.5739 16.0313 14.0864 16.0313 9.81145C16.0313 9.6427 16.0313 9.47395 16.0032 9.33332C16.0032 8.99582 15.722 8.7427 15.3845 8.7427ZM8.26885 16.3083C4.66885 16.3083 1.77197 13.4114 1.77197 9.81145C1.77197 6.3802 4.47197 3.53957 7.8751 3.3427V9.36145C7.8751 9.69895 8.15635 10.0083 8.52197 10.0083H14.7938C14.6813 13.4958 11.7845 16.3083 8.26885 16.3083Z"*/ }
                        {/*                                fill=""*/ }
                        {/*                        />*/ }
                        {/*                    </g>*/ }
                        {/*                    <defs>*/ }
                        {/*                        <clipPath id="clip0_130_9801">*/ }
                        {/*                            <rect*/ }
                        {/*                                    width="18"*/ }
                        {/*                                    height="18"*/ }
                        {/*                                    fill="white"*/ }
                        {/*                                    transform="translate(0 0.052124)"*/ }
                        {/*                            />*/ }
                        {/*                        </clipPath>*/ }
                        {/*                    </defs>*/ }
                        {/*                </svg>*/ }
                        {/*                Chart*/ }
                        {/*            </NavLink>*/ }
                        {/*        </li>*/ }
                        {/*        */ }{/*{/* <!-- Menu Item Chart --> */ }

                        {/*        */ }{/*{/* <!-- Menu Item Ui Elements --> */ }
                        {/*        <SidebarLinkGroup*/ }
                        {/*                activeCondition={pathname === '/ui' || pathname.includes('ui')}*/ }
                        {/*        >*/ }
                        {/*            {(handleClick, open) => {*/ }
                        {/*                return (*/ }
                        {/*                        <React.Fragment>*/ }
                        {/*                            <NavLink*/ }
                        {/*                                    to="#"*/ }
                        {/*                                    className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${*/ }
                        {/*                                            (pathname === '/ui' || pathname.includes('ui')) &&*/ }
                        {/*                                            'bg-graydark dark:bg-meta-4'*/ }
                        {/*                                    }`}*/ }
                        {/*                                    onClick={(e) => {*/ }
                        {/*                                        e.preventDefault();*/ }
                        {/*                                        sidebarExpanded*/ }
                        {/*                                                ? handleClick()*/ }
                        {/*                                                : setSidebarExpanded(true);*/ }
                        {/*                                    }}*/ }
                        {/*                            >*/ }
                        {/*                                <svg*/ }
                        {/*                                        className="fill-current"*/ }
                        {/*                                        width="18"*/ }
                        {/*                                        height="19"*/ }
                        {/*                                        viewBox="0 0 18 19"*/ }
                        {/*                                        fill="none"*/ }
                        {/*                                        xmlns="http://www.w3.org/2000/svg"*/ }
                        {/*                                >*/ }
                        {/*                                    <g clipPath="url(#clip0_130_9807)">*/ }
                        {/*                                        <path*/ }
                        {/*                                                d="M15.7501 0.55835H2.2501C1.29385 0.55835 0.506348 1.34585 0.506348 2.3021V7.53335C0.506348 8.4896 1.29385 9.2771 2.2501 9.2771H15.7501C16.7063 9.2771 17.4938 8.4896 17.4938 7.53335V2.3021C17.4938 1.34585 16.7063 0.55835 15.7501 0.55835ZM16.2563 7.53335C16.2563 7.8146 16.0313 8.0396 15.7501 8.0396H2.2501C1.96885 8.0396 1.74385 7.8146 1.74385 7.53335V2.3021C1.74385 2.02085 1.96885 1.79585 2.2501 1.79585H15.7501C16.0313 1.79585 16.2563 2.02085 16.2563 2.3021V7.53335Z"*/ }
                        {/*                                                fill=""*/ }
                        {/*                                        />*/ }
                        {/*                                        <path*/ }
                        {/*                                                d="M6.13135 10.9646H2.2501C1.29385 10.9646 0.506348 11.7521 0.506348 12.7083V15.8021C0.506348 16.7583 1.29385 17.5458 2.2501 17.5458H6.13135C7.0876 17.5458 7.8751 16.7583 7.8751 15.8021V12.7083C7.90322 11.7521 7.11572 10.9646 6.13135 10.9646ZM6.6376 15.8021C6.6376 16.0833 6.4126 16.3083 6.13135 16.3083H2.2501C1.96885 16.3083 1.74385 16.0833 1.74385 15.8021V12.7083C1.74385 12.4271 1.96885 12.2021 2.2501 12.2021H6.13135C6.4126 12.2021 6.6376 12.4271 6.6376 12.7083V15.8021Z"*/ }
                        {/*                                                fill=""*/ }
                        {/*                                        />*/ }
                        {/*                                        <path*/ }
                        {/*                                                d="M15.75 10.9646H11.8688C10.9125 10.9646 10.125 11.7521 10.125 12.7083V15.8021C10.125 16.7583 10.9125 17.5458 11.8688 17.5458H15.75C16.7063 17.5458 17.4938 16.7583 17.4938 15.8021V12.7083C17.4938 11.7521 16.7063 10.9646 15.75 10.9646ZM16.2562 15.8021C16.2562 16.0833 16.0312 16.3083 15.75 16.3083H11.8688C11.5875 16.3083 11.3625 16.0833 11.3625 15.8021V12.7083C11.3625 12.4271 11.5875 12.2021 11.8688 12.2021H15.75C16.0312 12.2021 16.2562 12.4271 16.2562 12.7083V15.8021Z"*/ }
                        {/*                                                fill=""*/ }
                        {/*                                        />*/ }
                        {/*                                    </g>*/ }
                        {/*                                    <defs>*/ }
                        {/*                                        <clipPath id="clip0_130_9807">*/ }
                        {/*                                            <rect*/ }
                        {/*                                                    width="18"*/ }
                        {/*                                                    height="18"*/ }
                        {/*                                                    fill="white"*/ }
                        {/*                                                    transform="translate(0 0.052124)"*/ }
                        {/*                                            />*/ }
                        {/*                                        </clipPath>*/ }
                        {/*                                    </defs>*/ }
                        {/*                                </svg>*/ }
                        {/*                                UI Elements*/ }
                        {/*                                <svg*/ }
                        {/*                                        className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${*/ }
                        {/*                                                open && 'rotate-180'*/ }
                        {/*                                        }`}*/ }
                        {/*                                        width="20"*/ }
                        {/*                                        height="20"*/ }
                        {/*                                        viewBox="0 0 20 20"*/ }
                        {/*                                        fill="none"*/ }
                        {/*                                        xmlns="http://www.w3.org/2000/svg"*/ }
                        {/*                                >*/ }
                        {/*                                    <path*/ }
                        {/*                                            fillRule="evenodd"*/ }
                        {/*                                            clipRule="evenodd"*/ }
                        {/*                                            d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"*/ }
                        {/*                                            fill=""*/ }
                        {/*                                    />*/ }
                        {/*                                </svg>*/ }
                        {/*                            </NavLink>*/ }
                        {/*                            */ }{/*{/* <!-- Dropdown Menu Start --> */ }
                        {/*                            <div*/ }
                        {/*                                    className={`translate transform overflow-hidden ${*/ }
                        {/*                                            !open && 'hidden'*/ }
                        {/*                                    }`}*/ }
                        {/*                            >*/ }
                        {/*                                <ul className="mb-5.5 mt-4 flex flex-col gap-2.5 pl-6">*/ }
                        {/*                                    <li>*/ }
                        {/*                                        <NavLink*/ }
                        {/*                                                to="/ui/alerts"*/ }
                        {/*                                                className={({ isActive }) =>*/ }
                        {/*                                                        'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/ }
                        {/*                                                        (isActive && '!text-white')*/ }
                        {/*                                                }*/ }
                        {/*                                        >*/ }
                        {/*                                            Alerts*/ }
                        {/*                                        </NavLink>*/ }
                        {/*                                    </li>*/ }
                        {/*                                    <li>*/ }
                        {/*                                        <NavLink*/ }
                        {/*                                                to="/ui/buttons"*/ }
                        {/*                                                className={({ isActive }) =>*/ }
                        {/*                                                        'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/ }
                        {/*                                                        (isActive && '!text-white')*/ }
                        {/*                                                }*/ }
                        {/*                                        >*/ }
                        {/*                                            Buttons*/ }
                        {/*                                        </NavLink>*/ }
                        {/*                                    </li>*/ }
                        {/*                                </ul>*/ }
                        {/*                            </div>*/ }
                        {/*                            */ }{/*{/* <!-- Dropdown Menu End --> */ }
                        {/*                        </React.Fragment>*/ }
                        {/*                );*/ }
                        {/*            }}*/ }
                        {/*        </SidebarLinkGroup>*/ }
                        {/*        */ }{/*{/* <!-- Menu Item Ui Elements --> */ }

                        {/*        */ }{/*{/* <!-- Menu Item Auth Pages --> */ }
                        {/*        <SidebarLinkGroup*/ }
                        {/*                activeCondition={*/ }
                        {/*                        pathname === '/auth' || pathname.includes('auth')*/ }
                        {/*                }*/ }
                        {/*        >*/ }
                        {/*            {(handleClick, open) => {*/ }
                        {/*                return (*/ }
                        {/*                        <React.Fragment>*/ }
                        {/*                            <NavLink*/ }
                        {/*                                    to="#"*/ }
                        {/*                                    className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${*/ }
                        {/*                                            (pathname === '/auth' || pathname.includes('auth')) &&*/ }
                        {/*                                            'bg-graydark dark:bg-meta-4'*/ }
                        {/*                                    }`}*/ }
                        {/*                                    onClick={(e) => {*/ }
                        {/*                                        e.preventDefault();*/ }
                        {/*                                        sidebarExpanded*/ }
                        {/*                                                ? handleClick()*/ }
                        {/*                                                : setSidebarExpanded(true);*/ }
                        {/*                                    }}*/ }
                        {/*                            >*/ }
                        {/*                                <svg*/ }
                        {/*                                        className="fill-current"*/ }
                        {/*                                        width="18"*/ }
                        {/*                                        height="19"*/ }
                        {/*                                        viewBox="0 0 18 19"*/ }
                        {/*                                        fill="none"*/ }
                        {/*                                        xmlns="http://www.w3.org/2000/svg"*/ }
                        {/*                                >*/ }
                        {/*                                    <g clipPath="url(#clip0_130_9814)">*/ }
                        {/*                                        <path*/ }
                        {/*                                                d="M12.7127 0.55835H9.53457C8.80332 0.55835 8.18457 1.1771 8.18457 1.90835V3.84897C8.18457 4.18647 8.46582 4.46772 8.80332 4.46772C9.14082 4.46772 9.45019 4.18647 9.45019 3.84897V1.88022C9.45019 1.82397 9.47832 1.79585 9.53457 1.79585H12.7127C13.3877 1.79585 13.9221 2.33022 13.9221 3.00522V15.0709C13.9221 15.7459 13.3877 16.2802 12.7127 16.2802H9.53457C9.47832 16.2802 9.45019 16.2521 9.45019 16.1959V14.2552C9.45019 13.9177 9.16894 13.6365 8.80332 13.6365C8.43769 13.6365 8.18457 13.9177 8.18457 14.2552V16.1959C8.18457 16.9271 8.80332 17.5459 9.53457 17.5459H12.7127C14.0908 17.5459 15.1877 16.4209 15.1877 15.0709V3.03335C15.1877 1.65522 14.0627 0.55835 12.7127 0.55835Z"*/ }
                        {/*                                                fill=""*/ }
                        {/*                                        />*/ }
                        {/*                                        <path*/ }
                        {/*                                                d="M10.4346 8.60205L7.62207 5.7333C7.36895 5.48018 6.97519 5.48018 6.72207 5.7333C6.46895 5.98643 6.46895 6.38018 6.72207 6.6333L8.46582 8.40518H3.45957C3.12207 8.40518 2.84082 8.68643 2.84082 9.02393C2.84082 9.36143 3.12207 9.64268 3.45957 9.64268H8.49395L6.72207 11.4427C6.46895 11.6958 6.46895 12.0896 6.72207 12.3427C6.83457 12.4552 7.00332 12.5114 7.17207 12.5114C7.34082 12.5114 7.50957 12.4552 7.62207 12.3145L10.4346 9.4458C10.6877 9.24893 10.6877 8.85518 10.4346 8.60205Z"*/ }
                        {/*                                                fill=""*/ }
                        {/*                                        />*/ }
                        {/*                                    </g>*/ }
                        {/*                                    <defs>*/ }
                        {/*                                        <clipPath id="clip0_130_9814">*/ }
                        {/*                                            <rect*/ }
                        {/*                                                    width="18"*/ }
                        {/*                                                    height="18"*/ }
                        {/*                                                    fill="white"*/ }
                        {/*                                                    transform="translate(0 0.052124)"*/ }
                        {/*                                            />*/ }
                        {/*                                        </clipPath>*/ }
                        {/*                                    </defs>*/ }
                        {/*                                </svg>*/ }
                        {/*                                Authentication*/ }
                        {/*                                <svg*/ }
                        {/*                                        className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${*/ }
                        {/*                                                open && 'rotate-180'*/ }
                        {/*                                        }`}*/ }
                        {/*                                        width="20"*/ }
                        {/*                                        height="20"*/ }
                        {/*                                        viewBox="0 0 20 20"*/ }
                        {/*                                        fill="none"*/ }
                        {/*                                        xmlns="http://www.w3.org/2000/svg"*/ }
                        {/*                                >*/ }
                        {/*                                    <path*/ }
                        {/*                                            fillRule="evenodd"*/ }
                        {/*                                            clipRule="evenodd"*/ }
                        {/*                                            d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"*/ }
                        {/*                                            fill=""*/ }
                        {/*                                    />*/ }
                        {/*                                </svg>*/ }
                        {/*                            </NavLink>*/ }
                        {/*                            */ }{/*{/* <!-- Dropdown Menu Start --> */ }
                        {/*                            <div*/ }
                        {/*                                    className={`translate transform overflow-hidden ${*/ }
                        {/*                                            !open && 'hidden'*/ }
                        {/*                                    }`}*/ }
                        {/*                            >*/ }
                        {/*                                <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">*/ }
                        {/*                                    <li>*/ }
                        {/*                                        <NavLink*/ }
                        {/*                                                to="/auth/signin"*/ }
                        {/*                                                className={({ isActive }) =>*/ }
                        {/*                                                        'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/ }
                        {/*                                                        (isActive && '!text-white')*/ }
                        {/*                                                }*/ }
                        {/*                                        >*/ }
                        {/*                                            Sign In*/ }
                        {/*                                        </NavLink>*/ }
                        {/*                                    </li>*/ }
                        {/*                                    <li>*/ }
                        {/*                                        <NavLink*/ }
                        {/*                                                to="/auth/signup"*/ }
                        {/*                                                className={({ isActive }) =>*/ }
                        {/*                                                        'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/ }
                        {/*                                                        (isActive && '!text-white')*/ }
                        {/*                                                }*/ }
                        {/*                                        >*/ }
                        {/*                                            Sign Up*/ }
                        {/*                                        </NavLink>*/ }
                        {/*                                    </li>*/ }
                        {/*                                </ul>*/ }
                        {/*                            </div>*/ }
                        {/*                            */ }{/*{/* <!-- Dropdown Menu End --> */ }
                        {/*                        </React.Fragment>*/ }
                        {/*                );*/ }
                        {/*            }}*/ }
                        {/*        </SidebarLinkGroup>*/ }
                        {/*        */ }{/*{/* <!-- Menu Item Auth Pages --> */ }
                        {/*    </ul>*/ }
                        {/*</div>}*/ }
                    </nav>
                    {/* <!-- Sidebar Menu --> */ }
                </div>
            </aside>
    );
};