Menu in your Laravel app - Conditional Items Based on Permissions

[Fzoltan87]

Hello.

How can I create this menu structure in Laravel? It would be important for the menu item to disappear or appear based on permission.

Example: All menu items: Chat, Mailbox, Invoice (List, Preview, Add, Edit), Calendar He has two roles: administrator and moderator Admin can see all permissions (Chat, Mailbox, Invoice (List, Preview, Add, Edit), Calendar) The moderator only has a Chat, Invoice (List, Preview), Calendar

<li class="nav-item">
    <ul>
        <li class="nav-item">
            <a href="/chat" class="group">
                <div class="flex items-center">
                    <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">Chat</span>
                </div>
            </a>
        </li>

        <li class="nav-item">
            <a href="/apps/mailbox" class="group">
                <div class="flex items-center">
                    <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">Mailbox</span>
                </div>
            </a>
        </li>

        <li class="menu nav-item">
            <button type="button" class="nav-link group" :class="{ 'active': activeDropdown === 'invoice' }" @click="activeDropdown === 'invoice' ? activeDropdown = null : activeDropdown = 'invoice'">
                <div class="flex items-center">
                    <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">Invoice</span>
                </div>
                <div class="rtl:rotate-180" :class="{ '!rotate-90': activeDropdown === 'invoice' }">
                    <svg></svg>
                </div>
            </button>
            <ul x-show="activeDropdown === 'invoice'" x-collapse="" class="sub-menu text-gray-500" style="height: 0px; overflow: hidden; display: none;" hidden="">
                <li>
                    <a href="/apps/invoice/list">List</a>
                </li>
                <li>
                    <a href="/apps/invoice/preview">Preview</a>
                </li>
                <li>
                    <a href="/apps/invoice/add">Add</a>
                </li>
                <li>
                    <a href="/apps/invoice/edit">Edit</a>
                </li>
            </ul>
        </li>

        <li class="nav-item">
            <a href="/apps/calendar" class="group">
                <div class="flex items-center">
                    <span class="ltr:pl-3 rtl:pr-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark">Calendar</span>
                </div>
            </a>
        </li>

    </ul>
</li>