# Текущая ззадача

напиши все файлы MultiLevelMenu, сделай коектное мобильную версию, с боковым открытием


# применяй правила:

## Корневой каталог и мета данные
Важно: мета данные добавляются через app/temp.coffe
базовым тегоьм для vuejs является body, app/index.pug начинается с div,
теги html, head, body ЗАПРЕЩЕНО использовать.
### пример кода app/temp.coffee
```
# обязательно подключение глобальных массивов
globalThis.renderFns = require 'pug.json'
globalThis.stylFns   = require 'styl.json'

# подключение мета информации (строго в данном фиде)
document.head.insertAdjacentHTML 'beforeend','<meta charset="UTF-8">'
document.head.insertAdjacentHTML 'beforeend','<meta name="viewport" content="width=device-width, initial-scale=1.0">'
document.head.insertAdjacentHTML('beforeend','<title> Кохи Борбад - Концертный зал Душанбе</title>')

# Настройка tailwind
tailwind.config = require 'tailwind.config.js'

# подключение основных стилей
## tailwind
document.head.insertAdjacentHTML('beforeend','<style  type="text/tailwindcss"  page="main">'+stylFns['main.css']+'</style>')
## базовой стиль приложения
document.head.insertAdjacentHTML('beforeend','<style  type="text/tailwindcss"  page="root">'+stylFns['app/temp.styl']+'</style>')

# Маршруты
routes = [
  { path: '/', component: require 'app/pages/Home' }
  { path: '/events', component: require 'app/pages/Events' }
  { path: '/about', component: require 'app/pages/About' }
  { path: '/contacts', component: require 'app/pages/Contacts' }
]

# Глобальное определение vuejs приложения
app = Vue.createApp
  name: 'app'
  data: ()->
        return  {}
  beforeMount: ()->
        debug.log "start beforeMount"
        # определение контекста vuejs приложения как глобальной переменной _
        globalThis._ = @
        # все глобальные переменные необходимые для работы определяем в data
        # и получаем доступ через _.*
  render: (new Function '_ctx', '_cache', renderFns['app/temp.pug'])()
  mounted: ->{}
  methods: {}
  components:
      'themetoggle':    require 'app/shared/ThemeToggle'
      'multilevelmenu': require 'app/shared/MultiLevelMenu'
      'imageslider':    require 'app/shared/ImageSlider'
app.use(VueRouter.createRouter({
  routes: routes
  history: VueRouter.createWebHistory()
  scrollBehavior: (to, from, savedPosition) ->
    if savedPosition
      return savedPosition
    else
      return { x: 0, y: 0 }
}))

# подключаем в body ОБЯЗАТЕЛЬНО!!!
app.mount('body')
```
## определение шаблонов для слотов
template(#body)       - не правильно
template(v-slot:body) - не правильно
template([body])      - правильно


## определение глобальной шины событий в  app/temp.coffee
```
# Создаем глобальную шину событий
class AppEventBus
    constructor: ->
        @events = {}
    
    on: (event, callback) ->
        if !@events[event]
            @events[event] = []
        @events[event].push(callback)
    
    emit: (event, data) ->
        if @events[event]
            for callback in @events[event]
                try
                    callback(data)
                catch error
                    debug.log "Event bus error: " + error
    
    off: (event, callback) ->
        if @events[event]
            @events[event] = @events[event].filter (cb) -> cb != callback

# Создаем глобально
globalThis.EventBus = new AppEventBus()
```

## Радота с кодом
всегда приводи полный листинг файлов
при форматировании кода для отделения логических блоков используй 4 пробела ("    ")
следи за строгим соблюдением синтаксиса используемых языков (coffeescript, pug, stylus)
в pug не используй многострочные вычисляемые атрибуты

## работа с консолью
используй для вывода в консоль debug.log

console.log "переменная temp = #{temp}" - не правильно
debug.log "переменная temp = "+temp     - правильно

## Цвета и управление темами
во всех *.styl файлах используй цвета в виде переменных, определённых в файле tailwind.config.js

## Стили
все глобальный настройки стилей, пиши в app/temp.styl в остальных файлах, строго стили необходимые только для данного компаонента

## стиль написания классов 
.container.mx-auto.px-4 - не правильно
div(class="container.mx-auto  px-4") - правильно

## *не используй вызовы*
Vue = require 'vue'
VueRouter = require 'vue-router'
* Подключение осуществлено глобально через файл doc.json

## git 
проверяй последние версии файлов в репозитарии, корневой каталог vue/
от него идут пути к файлам пример: в коде -> app/temp.coffee, в репозитарии -> vue/app/temp.coffee
https://gogs.osvoj.ru/s5l.ru/borbad.s5l.ru/src/master

## файл с правилами
https://gogs.osvoj.ru/s5l.ru/borbad.s5l.ru/raw/master/README.md

# общая структура проекта
app/
├── tailwind.config.js (настройка тем и Tailwind CSS)
├── temp.pug (основной layout)
├── temp.coffee (инициализация Vue и роутера)
├── temp.styl (стили которые сложно или не удобно сделать на Tailwind CSS  или стили к однотипным элементам на stylus)
├── page/
     ├── Home/  (главная страница)
          ├── index.coffee
          ├── index.pug
          ├── index.styl
     ├── [другие_страницы]/
          ├── index.coffee
          ├── index.pug
          ├── index.styl
└── shared/
     ├── ThemeToggle/
          ├── index.coffee
          ├── index.pug
          ├── index.styl
     ├── MultiLevelMenu/
          ├── index.coffee
          ├── index.pug
          ├── index.styl
     ├── ImageSlider/
          ├── index.coffee
          ├── index.pug
          ├── index.styl
     ├── ModalWindow/
          ├── index.coffee
          ├── index.pug
          ├── index.styl
     ├── FormValidator/
          ├── index.coffee
          ├── index.pug
          ├── index.styl
     ├── FilterSort/
          ├── index.coffee
          ├── index.pug
          ├── index.styl