Menu.tsx

import React from "react"
import { graphql, useStaticQuery } from "gatsby"

import { ChevronRightIcon, ChevronDownIcon } from "@heroicons/react/solid"

import { Link } from "@onegeo-suite/gatsby-theme-onegeo"
import { UserMenu } from "@onegeo-suite/gatsby-plugin-auth"

interface Imenu {
    className?: string
    name: string
    userMenu?: boolean
}
const Menu = (props: Imenu) => {
    const { className, name, userMenu = false } = props

    const data = useStaticQuery(graphql`
        fragment MenuItem on DirectusData_menus {
            name
            type
            url
            page {
                slug
            }
        }

        fragment MenusRecursive on DirectusData_menus {
            children {
                ...MenuItem
                children {
                    ...MenuItem
                    children {
                        ...MenuItem
                    }
                }
            }
        }

        query {
            directus {
                menus(filter: { status: { _eq: "published" } }) {
                    name
                    ...MenusRecursive
                }
            }
        }
    `)

    const menuContent = data.directus.menus

    const menu =
        menuContent.find(
            (menu: any) => name?.toLowerCase() === menu.name?.toLowerCase()
        )?.children || []

    const goto = (item) => {
        if (!item) return "/"
        if (item?.type === "page") {
            const slug = item?.page?.slug || ""
            if (slug.at(0) === "/") return slug
            return "/" + slug
        }
        return item.url
    }

    const subitems = (item: any) => {
        return (
            <ul className="bg-base-100 z-50 p-2 shadow-md">
                {item.children.map((itemChild: any, idx: number) => {
                    return (
                        <li key={"M_" + name + "_L2_" + idx}>
                            <Link to={goto(itemChild)} target="_blank">
                                <span>{itemChild.name}</span>
                            </Link>
                        </li>
                    )
                })}
            </ul>
        )
    }

    const items = (item: any) => {
        return (
            <ul className="menu bg-base-100 rounded-box z-50 min-w-[12rem] p-2 shadow-md">
                {item.children.map((itemChild: any, idx: number) => {
                    return (
                        <li key={"M_" + name + "_L1_" + idx}>
                            <Link to={goto(itemChild)} target="_blank">
                                <span className="grow">{itemChild.name}</span>
                                {itemChild?.children.length > 0 && (
                                    <ChevronRightIcon className="h-5 w-5" />
                                )}
                            </Link>
                            {itemChild?.children?.length > 0 &&
                                subitems(itemChild)}
                        </li>
                    )
                })}
            </ul>
        )
    }

    return (
        <>
            {/* MENU standart */}
            <ul className={className}>
                {menu?.map((item: any, key: number) => {
                    return (
                        <li key={"M_" + name + "_L0_" + key}>
                            <Link to={goto(item)} target="_blank">
                                <span>{item.name}</span>
                                {item?.children.length > 0 && (
                                    <ChevronDownIcon className="h-5 w-5" />
                                )}
                            </Link>
                            {item?.children?.length > 0 && items(item)}
                        </li>
                    )
                })}
                {userMenu ? <UserMenu /> : null}
            </ul>
            {/* END MENU standart */}
        </>
    )
}

export default Menu