add mount of menu

fix store usage add page loader
2025-04-06 14:09:06 +02:00
parent d8a622ce0f
commit b287b671be
15 changed files with 175 additions and 81 deletions
@@ -0,0 +1,104 @@
+<!--
+@license GNU AGPL version 3 or any later version
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<template>
+  <div
+    id="side-menu"
+    class="side-menu-big"
+  >
+    <div class="side-menu-header">
+      <CloserButton />
+      <SettingsButton
+        v-if="settings"
+        :href="settings.href"
+        :label="settings.name"
+        :avatar="settings.avatar"
+      />
+      <AppSearch v-model:search="search" />
+      <OpenerButton />
+    </div>
+
+    <div class="side-menu-categories-wrapper">
+      <div class="side-menu-categories">
+        <Loader v-if="!items.length" />
+
+        <template
+          v-for="(category, key) in items"
+          :key="key"
+        >
+          <div
+            v-if="containsAppsMatchingSearch(category.apps, search)"
+            class="side-menu-category"
+          >
+            <h2
+              v-if="category.name != ''"
+              class="side-menu-category-title"
+            >
+              {{ category.name }}
+            </h2>
+
+            <ul class="side-menu-apps-list">
+              <template
+                v-for="(app, appId) in category.apps"
+                :key="appId"
+              >
+                <SideMenuBigApp
+                  v-if="isAppMatchingSearch(app.name, search)"
+                  :classes="{ 'side-menu-app': true, active: activeApp === appId }"
+                  :icon="app.icon"
+                  :label="app.name"
+                  :href="app.href"
+                  :target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
+                />
+              </template>
+            </ul>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useNavStore } from '../store/nav.js'
+import { useConfigStore } from '../store/config.js'
+import { getActiveAppId } from '../lib/app.js'
+import { containsAppsMatchingSearch, isAppMatchingSearch } from '../lib/search.js'
+
+import OpenerButton from '../components/OpenerButton'
+import CloserButton from '../components/CloserButton'
+import SettingsButton from '../components/SettingsButton'
+import Loader from '../components/Loader'
+import AppSearch from '../components/AppSearch'
+import SideMenuBigApp from '../components/SideMenuBigApp'
+
+const items = ref([])
+const activeApp = ref(null)
+const targetBlankApps = ref([])
+const settings = ref(null)
+const search = ref('')
+
+onMounted(() => {
+  const config = useConfigStore.getConfig()
+
+  targetBlankApps.value = config['target-blank-apps']
+  settings.value = config['settings']
+
+  items.value = useNavStore.getCategories()
+  activeApp.value = getActiveAppId()
+})
+</script>