ghost-lite/src/components/Sidebar.tsx

import { HeartPulse, SendToBack, Book } from "lucide-react"
import { FaGithub } from "react-icons/fa"
import { Link, useLocation } from "react-router-dom"
import { useEffect } from "react"
import ReactGA from "react-ga4";

import { Logo } from "./Logo"
import pckg from "../../package.json"

type MenuItemTypes = "item" | "title" | "icon"

const item = [
    "group",
    "flex",
    "items-center",
    "text-base",
    "text-primary",
    "py-4",
    "px-6",
    "h-12",
    "overflow-hidden",
    "text-ellipsis",
    "whitespace-nowrap",
    "bg-background",
    "md:justify-start",
    "justify-center",
    "cursor-pointer",
]
const itemInactive = [
    "bg-transparent",
    "transition",
    "duration-300",
    "ease-in-out",
]
const itemActive = [
    "cursor-default",
]

const title = ["ml-4 font-inter font-medium text-primary"]
const titleInactive = ["group-hover:text-accent"]
const titleActive = ["text-accent", "cursor-default"]

const icon = [
    "w-6",
    "h-6",
    "md:w-4",
    "md:h-4",
    "text-primary",
]
const iconInactive = ["group-hover:text-accent"]
const iconActive = ["cursor-default"]

const cName = (type: MenuItemTypes, menu: string, reqMenu: string) => {
    let classes: string[] = []
    switch (type) {
        case "item":
            if (menu === reqMenu) {
                classes = [...item, ...itemActive]
            } else {
                classes = [...item, ...itemInactive]
            }
            break
        case "title":
            if (menu === reqMenu) {
                classes = [...title, ...titleActive]
            } else {
                classes = [...title, ...titleInactive]
            }
            break
        case "icon":
            if (menu === reqMenu) {
                classes = [...icon, ...iconActive]
            } else {
                classes = [...icon, ...iconInactive]
            }
            break
    }
    return classes.join(" ")
}

export const Sidebar = () => {
    const location = useLocation()
    const currentPath = location.pathname.replace("/", "")

    useEffect(() => {
        ReactGA.send({ hitType: "pageview", page: `/${currentPath}` });
    }, [currentPath])

    return (
        <header className="h-full sticky top-0 flex">
            <div className="h-[full] bg-muted flex flex-col md:w-60 w-[100px]">
                <div className="md:px-6 md:pt-5 md:pb-2 p-2 pt-6">
                    <div className="flex items-center">
                        <div className="grow">
                            <div className="flex justify-center items-center">
                                <Logo cName="md:w-[80%] cursor-pointer fill-primary hover:fill-accent w-full" />
                            </div>
                        </div>
                    </div>
                </div>

                <ul className="relative pt-6">
                    <Link to="/health" className="relative">
                        <div className={cName("item", currentPath, "health")}>
                            <HeartPulse className={cName("icon", currentPath, "health")} />
                            <span className={`md:block hidden ${cName("title", currentPath, "health")}`} >Health Check</span>
                        </div>
                    </Link>
                    <Link to="/transactions" className="relative">
                        <div className={cName("item", currentPath, "transactions")}>
                            <SendToBack className={cName("icon", currentPath, "transactions")} />
                            <span className={`md:block hidden ${cName("title", currentPath, "transactions")}`} >Transactions</span>
                        </div>
                    </Link>
                    <Link to="/book" className="relative">
                        <div className={cName("item", currentPath, "book")}>
                            <Book className={cName("icon", currentPath, "book")} />
                            <span className={`md:block hidden ${cName("title", currentPath, "book")}`} >Address Book</span>
                        </div>
                    </Link>
                </ul>

                <div className="w-full text-center flex-grow flex flex-col justify-end">
                    <hr className="m-0" />
                    <div className="block float-left px-6 py-4 cursor-pointer">
                        <a
                            href="https://git.ghostchain.io/ghostchain/ghost-lite"
                            target="_blank"
                            rel="noreferrer"
                            className="flex justify-center items-center md:flex-row flex-col gap-4"
                        >
                            <FaGithub className="w-8 h-8" />
                            <div className="block float-left text-xs text-left">
                                <div className="md:block hidden text-primary">GHOST Lite Git</div>
                                <div className="text-accent">v {pckg.version}</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </header>
    )
}