<template>

<MDBSideNav  

             v-model="sidenavMDB"    

             id="sidenavMDB" 

             contentSelector="#page-content"    

             :modeBreakpoint="1400"    

             :closeOnEsc="true"    

             :backdrop="false">

   <div class="logo d-flex justify-content-center py-2">    

     <img id="logo" src="~/assets/logo.svg" alt="Logo" draggable="false" height="50" />

   </div>

   <MDBSideNavMenu scroll-container filter>

     <template v-for="navL1 in navigation">

       <MDBSideNavItem v-if="navL1.hasSubpages == '0'" class="l-1">

         <MDBSideNavLink :href="navL1.link"  v-if="navL1.doktype==3">

           <img :src="navL1.icon[0].publicUrl" width="25" height="25" v-if="navL1.icon[0]"  class="fa-fw me-3"/>

           {{ navL1.title }}

         </MDBSideNavLink>

         <MDBSideNavLink :to="navL1.link"  v-else class="l-1">

           <img :src="navL1.icon[0].publicUrl" width="25" height="25" v-if="navL1.icon[0]"  class="fa-fw me-3"/>

           {{ navL1.title }}

         </MDBSideNavLink>

       </MDBSideNavItem>

       <MDBSideNavItem collapse :icon="navL1.icon[0].publicUrl" :title="navL1.title"  v-if="navL1.hasSubpages == '1'" class="l-1">

         <template v-for="navL2 in navL1.children">

           <MDBSideNavItem v-if="navL2.hasSubpages == '0'" class="l-2">

             <MDBSideNavLink :href="navL2.link" v-if="navL2.doktype==3">

               <span>{{ navL2.title }}</span>

             </MDBSideNavLink>

             <MDBSideNavLink :to="navL2.link" v-else>

               <span>{{ navL2.title }}</span>

             </MDBSideNavLink>

           </MDBSideNavItem>

           <MDBSideNavItem collapse :title="navL2.title"   class="l-2" v-if="navL2.hasSubpages == '1'">

             <template v-for="navL3 in navL2.children">

               <MDBSideNavItem v-if="navL3.hasSubpages == '0'" class="l-3">

                 <MDBSideNavLink :href="navL3.link" v-if="navL3.doktype==3">

                   <span>{{ navL3.title }}</span>

                 </MDBSideNavLink>

                 <MDBSideNavLink :to="navL3.link" v-else>

                   <span>{{ navL3.title }}</span>

                 </MDBSideNavLink>

               </MDBSideNavItem>

               <MDBSideNavItem collapse :title="navL3.title"  v-if="navL3.hasSubpages == '1'" class="l-3">

                 <template v-for="navL4 in navL3.children">

                   <MDBSideNavItem v-if="navL4.hasSubpages == '0'" class="l-4">

                     <MDBSideNavLink :href="navL4.link" v-if="navL4.doktype==3">

                       <span>{{ navL4.title }}</span>

                     </MDBSideNavLink>

                     <MDBSideNavLink :to="navL4.link" v-else>

                       <span>{{ navL4.title }}</span>

                     </MDBSideNavLink>

                   </MDBSideNavItem>

                   <MDBSideNavItem collapse :title="navL4.title"   class="l-4" v-if="navL4.hasSubpages == '1'">

                     <template v-for="{ navL5 } in navL4.children">

                       <MDBSideNavItem class="l-5">

                         <MDBSideNavLink :href="navL5.link" v-if="navL5.doktype==3">

                           <span>{{ navL5.title }}</span>

                         </MDBSideNavLink>

                         <MDBSideNavLink :to="navL5.link" v-else>

                           <span>{{ navL5.title }}</span>

                         </MDBSideNavLink>

                       </MDBSideNavItem>

                     </template>

                   </MDBSideNavItem>

                 </template>

               </MDBSideNavItem>

             </template>

           </MDBSideNavItem>

         </template>

       </MDBSideNavItem>

     </template>

   </MDBSideNavMenu>

  </MDBSideNav>

</template>