borbad.s5l.ru/vue/app/shared/MultiLevelMenu/index.pug

//- app/shared/MultiLevelMenu/index.pug
nav.relative
  .flex.space-x-2
    .menu-item.relative(
      v-for='item in menuItems'
      :key='item.id'
      @mouseenter='openSubmenu = item.id'
      @mouseleave='openSubmenu = null'
      @click='handleMobileClick(item)'
    )
      button.flex.items-center.px-4.py-2.text-sm.font-medium.text-white.rounded-md.transition-all.duration-200(
        :class='getMenuItemClasses(item)'
        :aria-expanded='openSubmenu === item.id'
      )
        | {{ item.title }}
        svg.w-4.h-4.ml-1(
          :class='{"transform rotate-180": openSubmenu === item.id, "hidden": !item.children}'
          fill='none' stroke='currentColor' viewBox='0 0 24 24'
        )
          path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7')
      
      //- Выпадающее меню
      transition(
        enter-active-class='transition-all duration-300 ease-out'
        enter-from-class='opacity-0 transform -translate-y-2'
        enter-to-class='opacity-100 transform translate-y-0'
        leave-active-class='transition-all duration-200 ease-in'
        leave-from-class='opacity-100 transform translate-y-0'
        leave-to-class='opacity-0 transform -translate-y-2'
      )
        .absolute.left-0.mt-2.w-56.rounded-lg.shadow-xl.bg-white.ring-1.ring-black.ring-opacity-5.z-50( class="dark:bg-gray-800"
          v-if='item.children && openSubmenu === item.id'
          @mouseenter='openSubmenu = item.id'
        )
          .py-2
            .submenu-item.relative(
              v-for='child in item.children'
              :key='child.id'
              @mouseenter='openSubsubmenu = child.id'
              @mouseleave='openSubsubmenu = null'
            )
              .flex.items-center.justify-between.px-4.py-2.text-sm.text-gray-700.cursor-pointer.transition-colors.duration-200(
                :class='"dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" + {"rounded-lg": !child.children}'
              )
                | {{ child.title }}
                svg.w-4.h-4(
                  :class='{"transform rotate-90": openSubsubmenu === child.id, "hidden": !child.children}'
                  fill='none' stroke='currentColor' viewBox='0 0 24 24'
                )
                  path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7-7')
              
              //- Второй уровень
              transition(
                enter-active-class='transition-all duration-300 ease-out'
                enter-from-class='opacity-0 transform translate-x-2'
                enter-to-class='opacity-100 transform translate-x-0'
              )
                .absolute.left-full.top-0.ml-1.w-56.rounded-lg.shadow-xl.bg-white.ring-1.ring-black.ring-opacity-5.z-50( class="dark:bg-gray-800"
                  v-if='child.children && openSubsubmenu === child.id'
                )
                  .py-2
                    .px-4.py-2.text-sm.text-gray-700.cursor-pointer.transition-colors.duration-200(class="dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                      v-for='subchild in child.children'
                      :key='subchild.id'
                    ) {{ subchild.title }}

  //- Mobile menu button (скрытый на десктопе)
  button.mobile-menu-button(class='md:hidden p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700')
    svg.w-6.h-6(fill='none' stroke='currentColor' viewBox='0 0 24 24')
      path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16')