refactoring: update severals components

src/menu.js

@@ -15,54 +15,43 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import AppMenu from './AppMenu.vue'
-import SideMenu from './SideMenu.vue'
-import SideMenuBig from './SideMenuBig.vue'
-import SideMenuWithCategories from './SideMenuWithCategories.vue'
-import PageLoader from './PageLoader'
+import './scss/menu.scss'
 
-Vue.prototype.OC = OC
-Vue.prototype.t = OC.L10N.translate
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { waitContainer } from './lib/dom.js'
 
-window.PageLoader = PageLoader
+// import AppMenu from './menus/AppMenu.vue'
+import SideMenu from './menus/SideMenu.vue'
+import SideMenuBig from './menus/SideMenuBig.vue'
+import SideMenuWithCategories from './menus/SideMenuWithCategories.vue'
 
-const mountSideMenuComponent = () => {
-  const container = document.querySelector('#side-menu')
+// import PageLoader from './components/PageLoader.vue'
 
-  if (!container) {
-    return window.setTimeout(mountSideMenuComponent, 50)
-  }
+// window.PageLoader = PageLoader
 
+const pinia = createPinia()
+
+waitContainer('#side-menu').then((selector, container) => {
   const component = (() => {
     if (container.getAttribute('data-bigmenu')) {
       return SideMenuBig
-    } else if(container.getAttribute('data-sidewithcategories')) {
+    } else if (container.getAttribute('data-sidewithcategories')) {
       return SideMenuWithCategories
     } else {
       return SideMenu
     }
   })()
 
-  const View = Vue.extend(component)
-  const App = new View({})
+  const app = createApp(component)
 
-  App.$mount('#side-menu')
+  app.use(pinia)
+  app.mount(selector)
+})
 
-  document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.ready'))
-}
+waitContainer('#header .app-menu').then((selector) => {
+  const app = createApp(AppMenu)
 
-const mountAppMenu = () => {
-  const container = document.querySelector('#header .app-menu')
-
-  if (!container) {
-    return window.setTimeout(mountAppMenu, 50)
-  }
-
-  const View = Vue.extend(AppMenu)
-  const App = new View({})
-
-  App.$mount('#header .app-menu')
-}
-
-mountSideMenuComponent()
-mountAppMenu()
+  app.use(pinia)
+  app.mount(selector)
+})