{% stories main_menu with { title: 'Components/Navigation/Main Menu' } %}

{% story default with {
    name: 'Main Menu Example',
    args: { title: "Test", url: "https://google.com", target: "__self" }
} %}

{% set nestedObject = [
    {
      title: "Home",
      url: "/",
      target: "_self"
    },
    {
      title: "Services",
      url: "/services",
      target: "_self",
      children: [
        {
          title: "Web Development",
          url: "/services/web",
          target: "_self",
          children: [  # Sub-menu of Web Development
            {
              title: "Frontend",
              url: "/services/web/frontend",
              target: "_self",
               children: [  # Sub-menu of frontend
            {
              title: "React",
              url: "/services/web/frontend/React",
              target: "_self",
                children: [  # Sub-menu of React
            {
              title: "Expert",
              url: "/services/web/frontend/react/expert",
              target: "_self"
            }
          ]
            }
          ]
            },
            {
              title: "Backend",
              url: "/services/web/backend",
              target: "_self"
            }
          ]
        },
        {
          title: "SEO",
          url: "/services/seo",
          target: "_self"
        }
      ]
    },
    {
      title: "About",
      url: "/about",
      target: "_self"
    }
] %}

{# Pass the nestedObject to the component #}
{% embed 'tailpine:main-menu' with { nested: nestedObject } %}{% endembed %}
{% endstory %}

{% endstories %}
