Multi-level Dropdown Menu

import React from "react";
import MultilevelDropdownMenu from 'funda-ui/MultilevelDropdownMenu';
 
// component styles
import 'funda-ui/MultilevelDropdownMenu/index.css';
 
const menuListData = [
    {
        title: "Top level 1",
        link: "#",
        children: [
            {
                title: "Sub level 1_1",
                link: "#1-1",
                children: [{
                    title: "Sub Sub Level 1_1",
                    link: "#1-1-1",
                    children: [{
                        title: "Sub Sub Sub Level 1_1",
                        link: "#1-1-1-1"
                    }]
                }]
            },
            {
                title: "Sub level 1_2",
                link: "#1-2"
            }]
    },
    {
        title: "Top level 2 (heading)",
        heading: true,
        link: "https://example.com"
    },
    {
        title: "Top level 3",
        icon: `<svg height="15px" width="15px" viewBox="0 0 32 32"><path fill="#000" d="M16,1C9.925,1,5,5.925,5,12c0,10,10,19,11,19s11-9,11-19C27,5.925,22.075,1,16,1z M16,16c-2.209,0-4-1.791-4-4c0-2.209,1.791-4,4-4s4,1.791,4,4C20,14.209,18.209,16,16,16z"/></svg>`,
        link: "#",
        children: [
            {
                title: "Sub level 3_1",
                link: "#"
            },
            {
                title: "Sub level 3_2",
                link: "#"
            },
            {
                title: "Sub level 3_3",
                link: "#"
            }]
    },
    {
        title: "Top level 4 (route)",
        link: "/s"
    },
    {
        title: "Top level 5 (route)",
        link: "/k",
        active: true,
        children: [
            {
                title: "Sub level 5_1",
                link: "/u"
            }]
    },
    {
        title: "Top level 6",
        link: "#"
    }
];
 
export default () => {
 
 
  return (
    <>
 
        <MultilevelDropdownMenu 
            data={menuListData} 
            onSelect={(e, val) => {
                console.log(val);
            }}  
            routerPath={`/s`}
            navbarClassName="navbar"
            childClassName="navbar-nav"
            alternateCollapse
        />
    </>
  );
}
 

import React, { useState } from "react";
import MultilevelDropdownMenu from 'funda-ui/MultilevelDropdownMenu';
 
// component styles
import 'funda-ui/MultilevelDropdownMenu/index.css';
 
const menuListData = [
    {
        title: "Top level 1",
        link: "#"
    },
    {
        title: "Top level 2 (route)",
        link: "/s"
    },
    {
        title: "Top level 3 (route)",
        link: "/k",
        children: [
            {
                title: "Sub level 3_1",
                link: "#3-1"
            },
            {
                title: "Sub level 3_2",
                link: "#3-2"
            },
            {
                title: "Sub level 3_3",
                link: "#3-3"
            }]
    }
];
 
 
export default () => {
 
    const [data, setData] = useState<any>(menuListData);
   
    function handleClick(e: any) {
        e.preventDefault();
        setData([
            {
                title: "(new) Top level 1",
                link: "#",
                children: [
            {
                title: "Sub level 1_1",
                link: "#"
            }]
            },
            {
                title: "(new)  Top level 2 (route)",
                link: "/u"
            }
        ]);
    }
 
 
    return (
        <>
 
            <a href="#" onClick={handleClick}>change data</a>
            
            <MultilevelDropdownMenu 
                data={data} 
                routerPath={`/s`}
                navbarClassName="navbar"
                childClassName="navbar-nav"
                alternateCollapse
            />
 
 
        </>
    )
}