newfreeplanet_OLD/src/layouts/menuone/menuOne.vue

<template>
  <div v-if="finishLoading" class="no-border">
    <q-list class="rounded-borders text-primary">
      <div v-for="ind1 in getmenu" :key="ind1">
        <!--<div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>-->
        <div v-for="(myitemmenu, ind2) in myroutes" :key="ind2">
          <div v-if="myitemmenu.active">
            <div v-if="myitemmenu.routes2 && myitemmenu.inmenu && tools.visumenu(myitemmenu)">

              <span v-if="myitemmenu.isseparator">
                <q-separator></q-separator>
              </span>
              <span v-else>

                <q-expansion-item
                  :content-inset-level="myitemmenu.level_parent"
                  :header-class="getmymenuclass(myitemmenu)"
                  :header-inset-level="myitemmenu.level_parent"
                  :icon="myitemmenu.materialIcon"
                  :label="tools.getLabelByItem(myitemmenu)"
                  active-class="my-menu-active"
                  expand-icon-class="my-menu-separat">

                    <div v-for="(child2, index) in myitemmenu.routes2" :key="index">
                      <div v-if="child2.active && tools.visumenu(child2)">
                        <span v-if="child2.isseparator">
                          <q-separator></q-separator>
                        </span>
                        <span v-else>

                          <q-expansion-item
                            v-if="!child2.routes2"
                            :class="`item item-link drawer-closer cursor-pointer ` + clBase"
                            :duration="300"
                            :header-inset-level="child2.level_child"
                            :icon="child2.materialIcon"
                            :label="tools.getLabelByItem(child2)"
                            :to="getroute(child2)"
                            active-class="my-menu-active"
                            expand-icon="none"
                            expand-icon-class="my-menu-icon-none">

                             <q-item-section avatar>
                               <q-avatar v-if="child2.img">
                                 <div :class="getimgiconclass(child2)" :icon="`img:`+child2.img" style="font-size:2rem;"></div>
                               </q-avatar>
                               <div v-else>
                                <q-avatar
                                  :icon="child2.materialIcon" :size="child2.iconsize" class="clicon"
                                  color="primary"
                                  text-color="white">
                                </q-avatar>
                               </div>
                              </q-item-section>

                              <q-item-section>
                                {{ tools.getLabelByItem(child2) }}
                              </q-item-section>

                          </q-expansion-item>
                          <q-expansion-item
                            v-else
                            :content-inset-level="child2.level_parent"
                            :header-class="getmymenuclass(child2)"
                            :header-inset-level="child2.level_parent"
                            :icon="child2.materialIcon"
                            :label="tools.getLabelByItem(child2)"
                            active-class="my-menu-active"
                            expand-icon-class="my-menu-separat">

                              <div v-for="(child3, index) in child2.routes2" :key="index">
                                <div v-if="child3.active">

                                  <q-expansion-item
                                    :class="`item item-link drawer-closer cursor-pointer ` + clBase"
                                    :duration="300"
                                    :header-inset-level="child3.level_child"
                                    :icon="child3.materialIcon"
                                    :label="tools.getLabelByItem(child3)"
                                    :to="getroute(child3)"
                                    active-class="my-menu-active"
                                    expand-icon-class="my-menu-icon-none">
                                    <div v-for="(child4, index) in child3.routes2" :key="index">

                                      <q-expansion-item
                                        v-if="!!child3.routes2 && child3.active"
                                        :key="index"
                                        :class="`item item-link drawer-closer cursor-pointer ` + clBase"
                                        :duration="300"
                                        :expand-icon="child4.icon"
                                        :header-inset-level="child4.level_child"
                                        :icon="child4.materialIcon"
                                        :label="tools.getLabelByItem(child4)"
                                        :to="getroute(child4)"
                                        active-class="my-menu-active"
                                        expand-icon-class="my-menu-separat">
                                      </q-expansion-item>
                                    </div>
                                  </q-expansion-item>
                                </div>
                              </div>
                          </q-expansion-item>
                        </span>
                      </div>
                    </div>
                </q-expansion-item>
              </span>
            </div>
            <div v-else>
              <div v-if="myitemmenu.inmenu && !myitemmenu.submenu && tools.visumenu(myitemmenu)">
                <q-slide-transition :duration=200>
                  <div v-show="true">
                  <span v-if="myitemmenu.isseparator">
                    <q-separator inset></q-separator>
                  </span>
                    <span v-else>
                    <q-list>
                      <q-item clickable
                              :content-inset-level="myitemmenu.level_parent"
                              :header-inset-level="myitemmenu.level_parent"
                              :to="getroute(myitemmenu)"
                              active-class="my-menu-active"
                              expand-icon="none">

                          <q-item-section thumbnail>
                            <q-avatar
                              :icon="myitemmenu.materialIcon" :size="!!myitemmenu.iconsize ? myitemmenu.iconsize: '2.5rem'" :font-size="!!myitemmenu.iconsize ? myitemmenu.iconsize: '2.5rem'"
                              text-color="primary"
                              style="margin-left: 4px"
                              square
                              rounded>
                            </q-avatar>
                          </q-item-section>

                          <q-item-section>
                            <span :class="myitemmenu.extraclass">{{ tools.getLabelByItem(myitemmenu) }}</span>
                            <span v-if="myitemmenu.subtitle" class="subtitle">{{ myitemmenu.subtitle }}</span>
                          </q-item-section>

                        </q-item>
                      </q-list>
                  </span>
                  </div>
                </q-slide-transition>

              </div>
            </div>
          </div>
        </div>
      </div>
    </q-list>
  </div>
</template>

<script lang="ts" src="./menuOne.ts">
</script>

<style lang="scss">
@import './menuOne.scss';
</style>