Installation

npm install @credenceanalytics/mega-menu --save

import MegaMenu from '@credenceanalytics/mega-menu'

export default {
    props: {
        /** 
         * An `Array` or a `Promise` which resolves to an array or a `Function` which returns an array.
         * This array contains objects.
        */
        menuList: {
            type: [Function, Array, Promise],
            default: function () {
                return [];
            },
        },

        /** 
         * An `Object` which will be used to ovverride existing column name which are being used to display urls, icons and application name.
         * This object contains `url`, `icon` and `name`
         * `url` - A key from menuList array of object which contain referece to application url
         * `icon` - A key from menuList array of object which contain reference to application icons.
         * `name` - A key from menuList array of object which contain reference to application name.
        */
        keys: {
            type: Object,
            default() {
                return {
                    url: "APP_PAGE",
                    icon: "CLS_ICON",
                    name: "APP_NAME"
                }
            }
        }
    },
    components: {
        MegaMenu
    }
}

Example

1. mega-menu component with default array list or without keys prop.

    <template>
        <mega-menu app-list="appList" />
    </template>

    <script lang="javascript">
        import MegaMenu from '@credenceanalytics/mega-menu';

        export default {
            components: {
               MegaMenu 
            },

            data() {
                return {
                    appList: [
                        {
                            APP_PAGE: "/Framewrk/Operations.html",
                            CLS_ICON: "icon-3",
                            APP_NAME: "Operations"
                        },
                        {
                            APP_PAGE: "/Framewrk/ClientManagement.html",
                            CLS_ICON: "icon-4",
                            APP_NAME: "Client Management"
                        }
                    ]
                }
            }
        }
    </script>

2. mega-menu component with different array list or different key references to routes, appname, etc..

    <template>
        <mega-menu app-list="appList" :keys="keyReferences"/>
    </template>

    <script lang="javascript">
        import MegaMenu from '@credenceanalytics/mega-menu';

        export default {
            components: {
               MegaMenu 
            },

            data() {
                return {
                    appList: [
                        {
                            APP_URL: "/Framewrk/Operations.html",
                            APP_ICON: "icon-3",
                            NAME: "Operations"
                        },
                        {
                            APP_URL: "/Framewrk/ClientManagement.html",
                            APP_ICON: "icon-4",
                            NAME: "Client Management"
                        }
                    ],


                    keyReferences: {
                        url: "APP_URL",
                        icon: "APP_ICON",
                        name: "NAME"
                    }
                }
            }
        }
    </script>