add shortscuts

add open/close action

src/menus/TopWideMenu.vue

@@ -18,17 +18,25 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <div
     id="side-menu"
     class="side-menu-big"
+    :class="{ open: open }"
+    ref="menu"
   >
     <div class="side-menu-header">
-      <CloserButton />
+      <CloserButton
+        v-if="!openerHover"
+        @click="$emit('close')"
+      />
       <SettingsButton
         v-if="settings"
         :href="settings.href"
         :label="settings.name"
         :avatar="settings.avatar"
       />
-      <AppSearch v-model:search="search" />
-      <OpenerButton />
+      <AppSearch v-model="search" />
+      <OpenerButton
+        v-if="!openerHover"
+        @click="$emit('close')"
+      />
     </div>
 
     <div class="side-menu-categories-wrapper">
@@ -56,7 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                 :key="appId"
               >
                 <SideMenuBigApp
-                  v-if="isAppMatchingSearch(app.name, search)"
+                  v-if="isAppMatchingSearch(app, search)"
                   :classes="{ 'side-menu-app': true, active: activeApp === appId }"
                   :icon="app.icon"
                   :label="app.name"
@@ -73,7 +81,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 } from 'vue'
 import { useNavStore } from '../store/nav.js'
 import { useConfigStore } from '../store/config.js'
 import { getActiveAppId } from '../lib/app.js'
@@ -86,19 +94,37 @@ import Loader from '../components/Loader'
 import AppSearch from '../components/AppSearch'
 import SideMenuBigApp from '../components/SideMenuBigApp'
 
+const emit = defineEmits(['close'])
+const { open } = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const configStore = useConfigStore()
+const navStore = useNavStore()
 const items = ref([])
 const activeApp = ref(null)
 const targetBlankApps = ref([])
 const settings = ref(null)
 const search = ref('')
+const openerHover = ref(false)
+const menu = useTemplateRef('menu')
+const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
 
-onMounted(() => {
-  const config = useConfigStore.getConfig()
+onMounted(async () => {
+  const config = await configStore.getConfig()
 
   targetBlankApps.value = config['target-blank-apps']
   settings.value = config['settings']
+  openerHover.value = config['opener-hover'] && !isTouchDevice
 
-  items.value = useNavStore.getCategories()
+  items.value = await navStore.getCategories()
   activeApp.value = getActiveAppId()
+
+  if (openerHover.value) {
+    menu.value.addEventListener('mouseleave', () => emit('close'))
+  }
 })
 </script>