add nested menu dropdowns to crud

[pxpm]

WHY

BEFORE - What was wrong? What was happening before this PR?

reported in #5268 . we didn't take into account the support for multi-level menu items in our themes.

This adds the base nested attribute to x-backpack::menu-dropdown, so that developers can say "this is a sub-dropdown" to the theme. Then each theme can use that marker, to display sub-dropdowns differently, if needed. CoreUIv2 and CoreUIv4 do no need anything different. Tabler does.

AFTER - What is happening after this PR?

We have nested menus accross all our themes using components.

<x-backpack::menu-dropdown title="Add-ons" icon="la la-puzzle-piece">
    <x-backpack::menu-dropdown title="Nested Items" icon="la la-automobile" nested="true">
    <x-backpack::menu-dropdown-item title="nested item 1" icon="la la-newspaper-o" :link="backpack_url('article')" />
    <x-backpack::menu-dropdown-header title="nested title" />
    <x-backpack::menu-dropdown-item title="nested item 2" icon="la la-blind" :link="backpack_url('article')" />
    <x-backpack::menu-dropdown title="Super Nested" icon="la la-bell" nested="true">
    <x-backpack::menu-dropdown-header title="super nested title" />
        <x-backpack::menu-dropdown-item title="s.n. item 1" icon="la la-dog" :link="backpack_url('article')" />
        <x-backpack::menu-dropdown-item title="s.n. item 2" icon="la la-crow" :link="backpack_url('article')" />
    </x-backpack::nested-menu-dropdown>
        <x-backpack::menu-dropdown-item title="nested item 3" icon="la la-podcast" :link="backpack_url('article')" />
    </x-backpack::nested-menu-dropdown>
    <x-backpack::menu-dropdown-header title="News" />
    <x-backpack::menu-dropdown-item title="Articles" icon="la la-newspaper-o" :link="backpack_url('article')" />
    <x-backpack::menu-dropdown-item title="Categories" icon="la la-list" :link="backpack_url('category')" />
    <x-backpack::menu-dropdown-item title="Tags" icon="la la-tag" :link="backpack_url('tag')" />
</x-backpack::menu-dropdown>

COREUI - v4

COREUI - v2

TABLER

Is it a breaking change?

I don't think so, no.

How can we test the before & after?

This requires the following PRs:

• add nested dropdown component theme-coreuiv4#46
• add the nested menu dropdown to tabler theme-tabler#139
• add nested dropdown component theme-coreuiv2#30

[tabacitu]

This looks nice!

--

One question @pxpm - any reason we can't do this as a feature of the menu-dropdown component? If we absolutely need to specify that it's nested, we could do <x-backpack::menu-dropdown nested="true" title="Nested Items" icon="la la-automobile"> right?

I'm thinking from a DX/docs perspective. Seems odd to have to write menu-dropdown and nested-menu-dropdown, right? Then again, so does nested="true" but somehow... less so maybe?! I don't know...

What do you think, wouldn't this be an improvement in terms of DX?

[tabacitu]

Also. On that note. Would a nested or has-parent parameter... make this a breaking change, by any chance? 👀🤷‍♂️

[pxpm]

I've changed the code so that from the developer perspective there is only one component: x-dropdown-menu that accepts the $nested parameter.

If we do it this way we can close the PR to other themes except tabler.

I've tried to add it to the parent with hasNestedDropdowns but there is some kind of overlap when rendering the blade components and it does not display as expected:

[tabacitu]

Awesome! Sounds good to me!

[tabacitu]

Excellent write-up on this PR, btw 👏👏👏

[tabacitu]

I've triple-checked this. Well done here @pxpm :

• it's working great in CoreUIv2 - no PR needed there;
• it's working great in CoreUIv4 - no PR needed there;
• it's working great in Tabler with add the nested menu dropdown to tabler theme-tabler#139 but it's got a small UI bug;
• we have docs for it here - mention nested dropdowns docs#505

I see no reason to merge the ones that are ready. We're launching this today anyway.

Woohooo 🎉