MENU FOR ALL APPLICATIONS

This library aims to create a dropdown menu with redirection to multiple applications that the user can access. Application provisioning, authentication and all data is provided by your api Responsive is available for screen width less 800px

resposive

Installation

run the command

npm i menu-for-all-applications

Configuration

After the installation process you must import the library:

import MenuForAllApplications from 'menu-for-all-applications'

In your App.vue or in your main page you must have a main div with the id:"q-app". This id is very important because the menu will hang on it

Now in your code run the library You must pass 3 parameters in the constructor:

• auth token ( sanctum, jwt, etc..) of the api that will provide the applications that the user has access to.
• User email so that the search can be done in the destination api
• Endpoint of your api ( POST )

 const menuForAll = new MenuForAllApplications(token, userMail, apiUrl);
 menuForAll.initMenu();

Return from your API

Your api's return should be an array of objects. This object must have the following format

• title: string
• link: string

 [
    {
        title:"Name displayed in menu",
        link: "Url to destination application"
    }
 ]

STAND ALONE

If you don't see the need to build your menu on the backend, just pass the same array of objects to the standAlone method and it will provide a menu

  menuForAll.standAlone([
        {
          title: "Google",
          link: "www.google.com",
        },
        {
          title: "Facebook",
          link: "www.facebook.com",
        },
        {
          title: "Instagram",
          link: "www.instagram.com",
        },
      ]);

STYLE YOUR MENU

If you want to change the color of the menu, its position from the top and the centering of the text just call the methods

      //color, position-top, justify-content
      menuForAll.setMenuStyle('#38761d', 0, 'left')
      //color for mouse-houver
      menuForAll.setMouseOnHover('#fff')
      //color and position for menu mobile
      menuForAll.setMobileMenu('#38761d', 0)

CDN file or import script tag

If you don't want to use npm to install the package and call it directly in your html. Download the js file to your preferred directory.The file is located in

    .src/cdn/cdnmenu.js

In you HTML add

• auth token ( sanctum, jwt, etc..) of the api that will provide the applications that the user has access to.
• User email so that the search can be done in the destination api
• Endpoint of your api ( POST )

  <script src="./cdnmenu.js" type="text/javascript"></script>    
  <script>
        initMenu(token, email, endpointApplication)
  </script>

Obs: Stylemenu and standAlone not allowed in CDN file

ERROR

Once done, an icon will be created at the bottom of the page where, when clicked, the drop-down menu with the data returned from your api will be shown. If an error occurs, an offline display will be given