import{a as l}from"./menu-CIznlSrP.js";import{a}from"./iframe-B0O0VXUn.js";import"./preload-helper-PPVm8Dsz.js";const r=`Il menu dei servizi online, si differenzia da quello di portale per le caratteristiche descritte di seguito.

Nella parte inferiore, se necessario, é possibile aggiungere anche un ulteriore box di colore blu. In questa area si possono inserire link di approfondimento con specifiche tematiche, ad esempio normative a supporto. I link vegono distinti da icone ad hoc che possono essere scelte dall'elenco di Font Awesome.

Nel menù dei servizi online, a differenza di quello di portale, é possibile espandere le voci di menu senza cambiare la pagina.
Il link relativo alla pagina corrente deve essere evidenziato in grassetto. 

Il menu prevede due tipologie di voci di primo livello:

- **Link (\`<a>\`)**: rimandano direttamente a una pagina e **non possono contenere voci di secondo livello**.  
- **Bottoni (\`<button>\`)**: aprono un accordion e consentono la visualizzazione di voci di secondo livello. Non possono generare un cambio di pagina.

In sintesi: le voci-link sono terminali, mentre le voci-bottone fungono da contenitori.
`,d={title:"Componenti/Menu/Menu dell'applicativo/Menu Servizi Online/Menu Verticale",tags:["autodocs"],parameters:{docs:{description:{component:`La menu ("briciole di pane") é una tecnica di navigazione utilizzata nelle interfacce utente. Rappresenta il percorso gerarchico di<br/>link per giungere una data pagina all'interno di un sito web.<br/>É un elemento utile per tornare indietro e/o alla pagina iniziale del sito web.`},mdxPage:r}},decorators:[(e,o)=>a(e,o,1,["https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-webkit.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static/js/main.js"],!0),e=>`${e()}`]},i={name:"Menu Verticale",argTypes:{links:{control:"object",description:"Elenco dei link nella sezione media del menu."},menuItems:{control:"object",description:"Elenco delle voci del menu."},titoloInferiore:{control:"text",description:"Titolo della sezione inferiore del menu.",table:{defaultValue:{summary:"Titolo inferiore"}}},linkInferiori:{control:"object",description:"Elenco di link nella sezione inferiore del menu."}},args:{links:[{label:"Consulta le FAQ",href:"javascript:void(0)",icon:"fa-circle-question"},{label:"Manuali operativi",href:"javascript:void(0)",icon:"fa-book"},{label:"Scarica elemento",href:"javascript:void(0)",icon:"fa-download"}],menuItems:[{label:"Primo livello",active:!0,open:!0,child:[{label:"Secondo livello",href:"javascript:void(0)",child:[]},{label:"Secondo livello",href:"javascript:void(0)",child:[],active:!0},{label:"Secondo livello",href:"javascript:void(0)",child:[]}]},{label:"Primo livello",href:"javascript:void(0)",child:[]},{label:"Primo livello",href:"javascript:void(0)",child:[]},{label:"Primo livello",child:[{label:"Secondo livello",href:"javascript:void(0)",child:[]},{label:"Secondo livello",href:"javascript:void(0)",child:[]}]},{label:"Primo livello",child:[{label:"Secondo livello",href:"javascript:void(0)",child:[]},{label:"Secondo livello",href:"javascript:void(0)",child:[]},{label:"Secondo livello",href:"javascript:void(0)",child:[]},{label:"Secondo livello",href:"javascript:void(0)",child:[]},{label:"Secondo livello",href:"javascript:void(0)",child:[]},{label:"Secondo livello",href:"javascript:void(0)",child:[]}]}],titoloInferiore:"Titolo inferiore",linkInferiori:[{label:"Lorem ipsum dolor sit amet",href:"javascript:void(0)"},{label:"Lorem ipsum dolor sit amet",href:"javascript:void(0)"},{label:"Lorem ipsum dolor sit amet",href:"javascript:void(0)"}]},render:e=>l(e.titolo,e.links,e.menuItems,e.titoloInferiore,e.linkInferiori)};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  name: "Menu Verticale",
  argTypes: {
    links: {
      control: 'object',
      description: "Elenco dei link nella sezione media del menu."
    },
    menuItems: {
      control: 'object',
      description: "Elenco delle voci del menu."
    },
    titoloInferiore: {
      control: 'text',
      description: "Titolo della sezione inferiore del menu.",
      table: {
        defaultValue: {
          summary: "Titolo inferiore"
        }
      }
    },
    linkInferiori: {
      control: 'object',
      description: "Elenco di link nella sezione inferiore del menu."
    }
  },
  args: {
    links: [{
      label: "Consulta le FAQ",
      href: "javascript:void(0)",
      icon: "fa-circle-question"
    }, {
      label: "Manuali operativi",
      href: "javascript:void(0)",
      icon: "fa-book"
    }, {
      label: "Scarica elemento",
      href: "javascript:void(0)",
      icon: "fa-download"
    }],
    menuItems: [{
      label: "Primo livello",
      active: true,
      open: true,
      child: [{
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: []
      }, {
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: [],
        active: true
      }, {
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: []
      }]
    }, {
      label: "Primo livello",
      href: "javascript:void(0)",
      child: []
    }, {
      label: "Primo livello",
      href: "javascript:void(0)",
      child: []
    }, {
      label: "Primo livello",
      child: [{
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: []
      }, {
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: []
      }]
    }, {
      label: "Primo livello",
      child: [{
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: []
      }, {
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: []
      }, {
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: []
      }, {
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: []
      }, {
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: []
      }, {
        label: "Secondo livello",
        href: "javascript:void(0)",
        child: []
      }]
    }],
    titoloInferiore: 'Titolo inferiore',
    linkInferiori: [{
      label: "Lorem ipsum dolor sit amet",
      href: "javascript:void(0)"
    }, {
      label: "Lorem ipsum dolor sit amet",
      href: "javascript:void(0)"
    }, {
      label: "Lorem ipsum dolor sit amet",
      href: "javascript:void(0)"
    }]
  },
  render: args => {
    return createMenuWithLink(args.titolo, args.links, args.menuItems, args.titoloInferiore, args.linkInferiori);
  }
}`,...i.parameters?.docs?.source}}};const s=["MenuLink"];export{i as MenuLink,s as __namedExportsOrder,d as default};
