MenuMobile.tsx

import { Link } from "@onegeo/gatsby-theme-onegeo"
import { graphql, useStaticQuery } from "gatsby"
import React from "react"

const MenuMobile = () => {

    const data = useStaticQuery(graphql`
        fragment MenuItem on DirectusData_menus {
            name
            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 header = menuContent.filter((head:any) => {
        return head.name == "Header"
    })

    const menu = header[0].children

    const items = (item:any) => {
        return (
            <ul className="p-2 z-50 bg-base-100 shadow-md">
                {item.children.map((itemChild: any, idx: number) => {
                    return (
                        <li key={idx}>
                            <Link
                                to="#"
                                activeClassName="text-neutral-content hover:bg-submenu active:bg-allsubmenu z-50"
                            >
                                {itemChild.name}
                            </Link>
                            {(itemChild?.children.length > 0) && items(itemChild)}
                        </li>
                    )
                })}
            </ul>
        )
    }

    return (
        <>
            {/* MENU CLASSIQUE */}
            <ul
                tabIndex={0}
                className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52 z-50"
            >
                {menu.map((item: any, key: number) => {
                    return (
                        <li key={key}>
                            <Link to="#">
                                {item.name}
                                {(item?.children.length > 0) && (
                                    <svg
                                        className="fill-current"
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                    >
                                        <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
                                    </svg>
                                )}
                            </Link>
                            {item?.children.length > 0 && items(item)}
                        </li>
                    )
                })}
            </ul>
            {/* END MENU CLASSIQUE */}
        </>
    )
}

export default MenuMobile