add shortscuts

add open/close action

src/menus/SimpleSideMenu.vue

@@ -15,19 +15,26 @@ 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
+    id="side-menu"
+    :class="{ open: open }"
+    ref="menu"
+  >
     <div
       v-if="settings || !openerHover || (!avatar && !alwaysDisplayed && logo) || avatar"
       class="side-menu-header"
     >
       <SettingsButton
-        v-if="settings"
+        v-if="settings && open"
         :href="settings.href"
         :label="settings.name"
         :avatar="settings.avatar"
       />
-      <AppSearch v-model:search="search" />
-      <OpenerButton v-if="!alwaysDisplayed" />
+      <AppSearch v-model="search" v-if="open" />
+      <OpenerButton
+        v-if="(!alwaysDisplayed && !openerHover) || isTouchDevice"
+        @click="$emit('toggle')"
+      />
       <Logo
         v-if="!avatar && !alwaysDisplayed && logo"
         :classes="{ 'side-menu-logo': true, avatardiv: false }"
@@ -35,7 +42,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         :link="logoLink"
       />
       <Logo
-        v-if="avatar"
+        v-if="avatar && !alwaysDisplayed"
         :classes="{ 'side-menu-logo': true, avatardiv: true }"
         :image="avatar"
         :link="logoLink"
@@ -51,7 +58,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         :key="key"
       >
         <SideMenuApp
-          v-if="isAppMatchingSearch(app.name, search)"
+          v-if="isAppMatchingSearch(app, search)"
           :classes="{ 'side-menu-app': true, active: app.active }"
           :icon="app.icon"
           :label="app.name"
@@ -64,7 +71,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, useTemplateRef, onMounted, watch } from 'vue'
 import { useConfigStore } from '../store/config.js'
 import { useNavStore } from '../store/nav.js'
 import { isAppMatchingSearch } from '../lib/search.js'
@@ -75,6 +82,14 @@ import SideMenuApp from '../components/SideMenuApp'
 import AppSearch from '../components/AppSearch'
 import Logo from '../components/Logo'
 
+const { open } = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+})
+const emit = defineEmits(['close', 'open', 'toggle'])
+
 const navStore = useNavStore()
 const configStore = useConfigStore()
 const targetBlankApps = ref(null)
@@ -83,10 +98,16 @@ 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 openerHover = ref(false)
+const alwaysDisplayed = ref(false)
 const search = ref('')
 const apps = ref([])
+const menu = useTemplateRef('menu')
+const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
+
+watch(apps, (val) => {
+  document.querySelector('html').classList.toggle('side-menu-always-displayed', alwaysDisplayed.value && val.length)
+})
 
 function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
   const data = []
@@ -121,14 +142,18 @@ onMounted(async () => {
   logo.value = config['logo']
   logoLink.value = config['logo-link']
   settings.value = config['settings']
-  openerHover.value = config['opener-hover']
+  openerHover.value = config['opener-hover'] && !isTouchDevice
   alwaysDisplayed.value = config['always-displayed']
 
-  apps.value = getFiltredAndSortedApps(
-    await navStore.getApps(),
-    config['apps-order'],
-    config['top-menu-apps'],
-    config['top-side-menu-apps']
-  )
+  apps.value = getFiltredAndSortedApps(await navStore.getApps(), config['apps-order'], config['top-menu-apps'], config['top-side-menu-apps'])
+
+  if (openerHover.value) {
+    menu.value.addEventListener('mouseleave', () => emit('close'))
+  }
+
+  if (alwaysDisplayed.value) {
+    menu.value.addEventListener('mouseenter', () => emit('open'))
+    menu.value.addEventListener('mouseleave', () => emit('close'))
+  }
 })
 </script>