import{a as c}from"./Utilities-CQhZFhp5.js";const d=e=>e.map(i=>`<li><span aria-hidden="true" tabindex="-1" class="fa fa-solid ${i.icon}"></span><a href="${i.href}" class="inail-text-link-1 m-0">${i.label}</a></li>`).join(`
`),v=e=>e.map(i=>`<li class="p-0"><span class="sidebarLinks"><a href="${i.href}">${i.label}</a></span></li>`).join(`
`),p=(e,i)=>i.map((l,a)=>l.child&&l.child.length>0?`<li ${l.active?'class="selected"':""}>
        <button class="inail-menu-container" data-toggle="collapse" data-target="#${e}-item-${a}" aria-expanded="${l.open?"true":"false"}"">
            <span class="inail-menu-level-1">${l.label}</span>
            <span class="btn btn-link sub-tree-toggle"></span>
        </button>
        <ul class="livello_2 inail-menu-level-2 collapse ${l.open?"in":""}" id="${e}-item-${a}" role="list">

        ${l.child.map(o=>`<li ${o.active?'class="selected"':""}>
                <div class="inail-menu-container">
                    <a href="${o.href}">${o.label}</a>
                </div>
            </li>`).join(`
`)}

        </ul>
      </li>`:`<li>
        <div class="inail-menu-container">
            <a class="livello_1 inail-menu-level-1" href="${l.href}">${l.label}</a>
        </div>
      </li>`).join(`
`);function u(e,i,l,a,o){return`<nav aria-label="Menù dell'applicativo" id="menu-applicativo">
    <div class="col-xs-12 m-0 p-0">
    <button id="trigger-slider-menu" class="pull-left" aria-expanded="false"
        aria-controls="navigazionesecondaria">
        <span class="inail-responsive-menu-icon fa fa-2x fa-bars active"></span>
        <span class="inail-responsive-menu-icon fa fa-2x fa-times"></span>
    </button>
</div>
<div class="row">
    <div id="navigazionesecondaria" class="col-xs-12 col-sm-5 col-lg-5 slider-menu filtro">
        <div class="box-menu-contestuale servizi-online-primo-livello">
            <div role="group" id="sidebar-superiore" aria-label="Voci del menu">
                <ul role="list" class="inail-menu-divider">
                    ${p("first-menu",l)}
                </ul>
            </div>
            <div role="group"  aria-label="Utilizzo dell'applicativo" class="inail-sezione-media">
            <ul class="fa-ul miniMenuIcon pl-0" role="list">
                    ${d(i)}
                </ul>
                </div>
            <div role="group" id="sidebar-inferiore" aria-labelledby="sezione-inferiore">
                <div id="sezione-inferiore" class="pb-4 inail-mat-sezione-inferiore-title">${a}</div>
                <ul role="list">
                    ${v(o)}
                </ul>
            </div>
    </div>
</div>
</nav>

<main id="contenutoPrincipale"></main>`}const m=`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.  

In sintesi: le voci-link sono terminali, mentre le voci-bottone fungono da contenitori.
`,h={title:"Componenti/Menu/Menu Servizi Online",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:m}},decorators:[(e,i)=>c(e,i,3,["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()}`]},n={name:"Menu Servizi Online",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=>u(e.titolo,e.links,e.menuItems,e.titoloInferiore,e.linkInferiori)};var r,t,s;n.parameters={...n.parameters,docs:{...(r=n.parameters)==null?void 0:r.docs,source:{originalSource:`{
  name: "Menu Servizi Online",
  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);
  }
}`,...(s=(t=n.parameters)==null?void 0:t.docs)==null?void 0:s.source}}};const b=["MenuLink"];export{n as MenuLink,b as __namedExportsOrder,h as default};
