// app/shared/MultiLevelMenu/index.pug
nav(class="relative")
  button(
    @click="toggleMenu"
    class="flex items-center space-x-1 text-gray-700 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
  )
    span Каталог
    svg(:class="{'transform rotate-180': isOpen}" class="w-4 h-4 transition-transform" 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(name="menu-slide")
    div(
      v-if="isOpen"
      class="absolute top-full left-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-xl z-50 py-2"
      v-click-outside="closeMenu"
    )
      .px-4.py-2.border-b.border-gray-200.dark_border-gray-700
        h3(class="font-semibold text-gray-900 dark:text-white") Категории товаров
      
      ul(class="max-h-96 overflow-y-auto")
        li(v-for="category in categories" :key="category._id")
          .relative
            button(
              @click="toggleSubmenu(category._id)"
              class="w-full flex justify-between items-center px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
            )
              span {{ category.name }}
              svg(v-if="category.children && category.children.length" class="w-4 h-4" 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(name="submenu-slide")
              div(
                v-if="openSubmenu === category._id"
                class="absolute left-full top-0 ml-1 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-xl z-50 py-2"
              )
                ul
                  li(v-for="child in getChildCategories(category._id)" :key="child._id")
                    a(
                      :href="`/catalog?category=${child.slug}`"
                      class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                    ) {{ child.name }}