add mount of menu

fix store usage

add page loader

src/menus/MenuContainer.vue

@@ -0,0 +1,87 @@
+<template>
+  <template v-if="display">
+    <PageLoader v-if="hasPageLoader" />
+    <TopWideMenu v-if="display === 'big-menu'" />
+    <SideMenuWithCategories v-else-if="display === 'side-with-categories'" />
+    <SimpleSideMenu
+      v-else-if="display === 'simple-side-menu'"
+      :alawayDisplayed="display === 'always-displayed'"
+    />
+  </template>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useConfigStore } from '../store/config.js'
+import { createElement } from '../lib/dom.js'
+import { translate as t } from '@nextcloud/l10n'
+
+import SimpleSideMenu from './SimpleSideMenu'
+import TopWideMenu from './TopWideMenu'
+import SideMenuWithCategories from './SideMenuWithCategories'
+import PageLoader from '../components/PageLoader'
+
+const config = ref(null)
+const configStore = useConfigStore()
+const display = ref(null)
+const alawayDisplayed = ref(false)
+const hasPageLoader = ref(false)
+const createOpener = () => {
+  const nextcloud = document.querySelector('#nextcloud')
+  const logo = document.querySelector('.header-left .logo, .header-start .logo')
+
+  if (!nextcloud || !logo) {
+    return
+  }
+
+  if (logo.parentNode !== nextcloud) {
+    nextcloud.appendChild(logo)
+  }
+
+  const opener = createElement('button', {
+    'class': 'side-menu-opener',
+    'arial-label': t('side_menu', 'Toggle the menu'),
+    'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
+  })
+
+  if (config.value['opener-position'] === 'before') {
+    nextcloud.parentNode.insertBefore(opener, nextcloud)
+  } else {
+    nextcloud.parentNode.insertBefore(opener, nextcloud.nextSibling)
+  }
+}
+
+const createLoader = () => {
+  const loader = createElement('div', { id: 'side-menu-loader' })
+  const bar = createElement('div', { id: 'side-menu-loader-bar' })
+
+  loader.appendChild(bar)
+  document.querySelector('body').appendChild(loader)
+
+  let pageLoaderValue = 0
+
+  window.addEventListener('beforeunload', () => {
+    setInterval(() => {
+      pageLoaderBar.style.width = pageLoaderValue.toString() + '%'
+      pageLoaderValue = Math.min(pageLoaderValue + 0.2, 100)
+    }, 25)
+  })
+}
+
+onMounted(async () => {
+  config.value = await configStore.getConfig()
+
+  if (config.value['big-menu']) {
+    display.value = 'big-menu'
+  } else if (config.value['side-with-categories']) {
+    display.value = 'side-with-categories'
+  } else {
+    display.value = 'simple-side-menu'
+    alawayDisplayed.value = config.value['always-displayed']
+  }
+
+  hasPageLoader.value = config.value['loader-enabled']
+
+  createOpener()
+})
+</script>

src/menus/SimpleSideMenu.vue

@@ -17,8 +17,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div id="side-menu">
     <div
-      class="side-menu-header"
       v-if="settings || !openerHover || (!avatar && !alwaysDisplayed && logo) || avatar"
+      class="side-menu-header"
     >
       <SettingsButton
         v-if="settings"
@@ -75,6 +75,8 @@ import SideMenuApp from '../components/SideMenuApp'
 import AppSearch from '../components/AppSearch'
 import Logo from '../components/Logo'
 
+const navStore = useNavStore()
+const configStore = useConfigStore()
 const targetBlankApps = ref(null)
 const forceLightIcon = ref(null)
 const avatar = ref(null)
@@ -86,12 +88,7 @@ const alwaysDisplayed = ref(null)
 const search = ref('')
 const apps = ref([])
 
-function getFiltredAndSortedApps(
-  items,
-  order,
-  topMenuApps,
-  topSideMenuApps
-) {
+function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
   const data = []
 
   items.forEach((item) => {
@@ -115,8 +112,8 @@ function getFiltredAndSortedApps(
   })
 }
 
-onMounted(() => {
-  const config = useConfigStore.getConfig()
+onMounted(async () => {
+  const config = await configStore.getConfig()
 
   targetBlankApps.value = config['target-blank-apps']
   forceLightIcon.value = config['force-light-icon']
@@ -128,10 +125,10 @@ onMounted(() => {
   alwaysDisplayed.value = config['always-displayed']
 
   apps.value = getFiltredAndSortedApps(
-    useNavStore.getApps(),
+    await navStore.getApps(),
     config['apps-order'],
     config['top-menu-apps'],
-    config['top-side-menu-apps'],
+    config['top-side-menu-apps']
   )
 })
 </script>