forked from deblan/side_menu
134 lines
3.8 KiB
Vue
134 lines
3.8 KiB
Vue
<!--
|
|
@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">
|
|
<div
|
|
v-if="settings || !openerHover || (!avatar && !alwaysDisplayed && logo) || avatar"
|
|
class="side-menu-header"
|
|
>
|
|
<SettingsButton
|
|
v-if="settings"
|
|
:href="settings.href"
|
|
:label="settings.name"
|
|
:avatar="settings.avatar"
|
|
/>
|
|
<AppSearch v-model:search="search" />
|
|
<OpenerButton v-if="!alwaysDisplayed" />
|
|
<Logo
|
|
v-if="!avatar && !alwaysDisplayed && logo"
|
|
:classes="{ 'side-menu-logo': true, avatardiv: false }"
|
|
:image="logo"
|
|
:link="logoLink"
|
|
/>
|
|
<Logo
|
|
v-if="avatar"
|
|
:classes="{ 'side-menu-logo': true, avatardiv: true }"
|
|
:image="avatar"
|
|
:link="logoLink"
|
|
/>
|
|
</div>
|
|
|
|
<ul
|
|
class="side-menu-apps-list"
|
|
:class="{ 'side-menu-apps-list--with-settings': !!settings }"
|
|
>
|
|
<template
|
|
v-for="(app, key) in apps"
|
|
:key="key"
|
|
>
|
|
<SideMenuApp
|
|
v-if="isAppMatchingSearch(app.name, search)"
|
|
:classes="{ 'side-menu-app': true, active: app.active }"
|
|
:icon="app.icon"
|
|
:label="app.name"
|
|
:href="app.href"
|
|
:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
|
|
/>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useConfigStore } from '../store/config.js'
|
|
import { useNavStore } from '../store/nav.js'
|
|
import { isAppMatchingSearch } from '../lib/search.js'
|
|
|
|
import OpenerButton from '../components/OpenerButton'
|
|
import SettingsButton from '../components/SettingsButton'
|
|
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)
|
|
const logo = ref(null)
|
|
const logoLink = ref(null)
|
|
const settings = ref(null)
|
|
const openerHover = ref(null)
|
|
const alwaysDisplayed = ref(null)
|
|
const search = ref('')
|
|
const apps = ref([])
|
|
|
|
function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
|
|
const data = []
|
|
|
|
items.forEach((item) => {
|
|
if (topMenuApps.includes(item.id) && !topSideMenuApps.includes(item.id)) {
|
|
return
|
|
}
|
|
|
|
item.order = items.length + 1
|
|
|
|
order.forEach((id, key) => {
|
|
if (id === item.id) {
|
|
item.order = key + 1
|
|
}
|
|
})
|
|
|
|
data.push(item)
|
|
})
|
|
|
|
return data.sort((a, b) => {
|
|
return a.order < b.order ? -1 : 1
|
|
})
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const config = await configStore.getConfig()
|
|
|
|
targetBlankApps.value = config['target-blank-apps']
|
|
forceLightIcon.value = config['force-light-icon']
|
|
avatar.value = config['avatar']
|
|
logo.value = config['logo']
|
|
logoLink.value = config['logo-link']
|
|
settings.value = config['settings']
|
|
openerHover.value = config['opener-hover']
|
|
alwaysDisplayed.value = config['always-displayed']
|
|
|
|
apps.value = getFiltredAndSortedApps(
|
|
await navStore.getApps(),
|
|
config['apps-order'],
|
|
config['top-menu-apps'],
|
|
config['top-side-menu-apps']
|
|
)
|
|
})
|
|
</script>
|