add shortscuts

add open/close action

src/menus/SideMenuWithCategories.vue

@@ -18,6 +18,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <div
     id="side-menu"
     class="side-menu-with-categories"
+    :class="{ open: open }"
+    ref="menu"
   >
     <div class="side-menu-header">
       <SettingsButton
@@ -26,8 +28,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         :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">
@@ -55,7 +60,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"
@@ -72,7 +77,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'
@@ -84,19 +89,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>