From ecbe2f7d728e6dc65f447ab438af929e5296ac25 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Mon, 7 Apr 2025 22:52:52 +0200
Subject: [PATCH] add shortscuts

add open/close action
---
 src/components/AppSearch.vue         |  11 +-
 src/components/CloserButton.vue      |   7 +-
 src/components/OpenerButton.vue      |   5 +
 src/components/PageLoader.vue        |   5 +-
 src/lib/search.js                    |   4 +-
 src/menu.js                          |   2 +-
 src/menus/MenuContainer.vue          |  59 +++++-
 src/menus/SideMenuWithCategories.vue |  37 +++-
 src/menus/SimpleSideMenu.vue         |  57 ++++--
 src/menus/TopWideMenu.vue            |  42 +++-
 src/scss/menu.scss                   | 296 ++++++++++++++-------------
 templates/js/script.php              | 162 ---------------
 12 files changed, 331 insertions(+), 356 deletions(-)

diff --git a/src/components/AppSearch.vue b/src/components/AppSearch.vue
index 7f7a17f..f7275b4 100644
--- a/src/components/AppSearch.vue
+++ b/src/components/AppSearch.vue
@@ -18,19 +18,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <div class="side-menu-search">
     <input
       type="text"
-      :value="value"
       :placeholder="t('side_menu', 'Search')"
-      @input="emit('input', $event.target.value)"
+      v-model="model"
     />
   </div>
 </template>
 
 <script setup>
-const emit = defineEmits('input')
-const { value } = defineProps({
-  value: {
-    type: String,
-    required: true,
-  },
-})
+const model = defineModel()
 </script>
diff --git a/src/components/CloserButton.vue b/src/components/CloserButton.vue
index bcee43f..efcb225 100644
--- a/src/components/CloserButton.vue
+++ b/src/components/CloserButton.vue
@@ -17,8 +17,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
   <button
     class="side-menu-opener side-menu-closer"
-    :arial-label="label"
+    :arial-label="t('side_menu', 'Close the menu')"
+    @click="$emit('click')"
   >
     <span>{{ t('side_menu', 'Close the menu') }}</span>
   </button>
 </template>
+
+<script setup>
+defineEmits(['click'])
+</script>
diff --git a/src/components/OpenerButton.vue b/src/components/OpenerButton.vue
index 08cbcff..282b2d9 100644
--- a/src/components/OpenerButton.vue
+++ b/src/components/OpenerButton.vue
@@ -18,7 +18,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <button
     class="side-menu-opener"
     :arial-label="label"
+    @click="$emit('click')"
   >
     <span>{{ t('side_menu', 'Toggle the menu') }}</span>
   </button>
 </template>
+
+<script setup>
+defineEmits(['click'])
+</script>
diff --git a/src/components/PageLoader.vue b/src/components/PageLoader.vue
index 95ded5e..2c67902 100644
--- a/src/components/PageLoader.vue
+++ b/src/components/PageLoader.vue
@@ -1,6 +1,9 @@
 <template>
   <div id="side-menu-loader">
-    <div id="side-menu-loader-bar" :style="createStyle(width)"></div>
+    <div
+      id="side-menu-loader-bar"
+      :style="createStyle(width)"
+    ></div>
   </div>
 </template>
 
diff --git a/src/lib/search.js b/src/lib/search.js
index 4fee589..2e4f409 100644
--- a/src/lib/search.js
+++ b/src/lib/search.js
@@ -1,10 +1,10 @@
 const containsAppsMatchingSearch = (values, search) => {
-  if (search.value.trim() === '') {
+  if (search.trim() === '') {
     return true
   }
 
   for (let key in values) {
-    if (isAppMatchingSearch(values[key].name)) {
+    if (isAppMatchingSearch(values[key], search)) {
       return true
     }
   }
diff --git a/src/menu.js b/src/menu.js
index b9842c0..99ab101 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -36,7 +36,7 @@ body.appendChild(container)
 
 const app = createApp(MenuContainer)
 app.use(pinia)
-app.mixin({ methods: { t, n }})
+app.mixin({ methods: { t, n } })
 app.mount(container)
 
 // waitContainer('#header .app-menu').then((selector) => {
diff --git a/src/menus/MenuContainer.vue b/src/menus/MenuContainer.vue
index 1a3137c..69d7acf 100644
--- a/src/menus/MenuContainer.vue
+++ b/src/menus/MenuContainer.vue
@@ -1,11 +1,22 @@
 <template>
-  <template v-if="display">
+  <template v-if="display && hasApps">
     <PageLoader v-if="hasPageLoader" />
-    <TopWideMenu v-if="display === 'big-menu'" />
-    <SideMenuWithCategories v-else-if="display === 'side-with-categories'" />
+    <TopWideMenu
+      v-if="display === 'big-menu'"
+      :open="isOpen"
+      @close="closeMenu"
+    />
+    <SideMenuWithCategories
+      v-else-if="display === 'side-with-categories'"
+      :open="isOpen"
+      @close="closeMenu"
+    />
     <SimpleSideMenu
       v-else-if="display === 'simple-side-menu'"
-      :alawayDisplayed="display === 'always-displayed'"
+      :open="isOpen"
+      @close="closeMenu"
+      @open="openMenu"
+      @toggle="toggleMenu(!isOpen)"
     />
   </template>
 </template>
@@ -13,6 +24,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useConfigStore } from '../store/config.js'
+import { useNavStore } from '../store/nav.js'
 import { createElement } from '../lib/dom.js'
 import { translate as t } from '@nextcloud/l10n'
 
@@ -23,9 +35,24 @@ import PageLoader from '../components/PageLoader'
 
 const config = ref(null)
 const configStore = useConfigStore()
+const navStore = useNavStore()
 const display = ref(null)
-const alawayDisplayed = ref(false)
 const hasPageLoader = ref(false)
+const isOpen = ref(false)
+const hasApps = ref(false)
+
+const toggleMenu = (value) => {
+  isOpen.value = value
+}
+
+const openMenu = () => {
+  toggleMenu(true)
+}
+
+const closeMenu = () => {
+  toggleMenu(false)
+}
+
 const createOpener = () => {
   const nextcloud = document.querySelector('#nextcloud')
   const logo = document.querySelector('.header-left .logo, .header-start .logo')
@@ -39,9 +66,9 @@ const createOpener = () => {
   }
 
   const opener = createElement('button', {
-    'class': 'side-menu-opener',
+    class: 'side-menu-opener',
     'arial-label': t('side_menu', 'Toggle the menu'),
-    'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
+    html: `<span>${t('side_menu', 'Toggle the menu')}</span>`,
   })
 
   if (config.value['opener-position'] === 'before') {
@@ -49,6 +76,8 @@ const createOpener = () => {
   } else {
     nextcloud.parentNode.insertBefore(opener, nextcloud.nextSibling)
   }
+
+  opener.addEventListener('click', () => toggleMenu(true), true)
 }
 
 const createLoader = () => {
@@ -69,6 +98,8 @@ const createLoader = () => {
 }
 
 onMounted(async () => {
+  hasApps.value = (await navStore.getApps()).length > 0
+
   config.value = await configStore.getConfig()
 
   if (config.value['big-menu']) {
@@ -77,11 +108,21 @@ onMounted(async () => {
     display.value = 'side-with-categories'
   } else {
     display.value = 'simple-side-menu'
-    alawayDisplayed.value = config.value['always-displayed']
   }
 
   hasPageLoader.value = config.value['loader-enabled']
 
-  createOpener()
+  if (hasApps.value) {
+    createOpener()
+  }
+
+  window.document.addEventListener('keydown', (e) => {
+    const key = e.key || e.keyCode
+
+    if ((key === 'o' || key === 79) && e.ctrlKey === true) {
+      e.preventDefault()
+      toggleMenu(!isOpen.value)
+    }
+  })
 })
 </script>
diff --git a/src/menus/SideMenuWithCategories.vue b/src/menus/SideMenuWithCategories.vue
index 8b760a8..36000dc 100644
--- a/src/menus/SideMenuWithCategories.vue
+++ b/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>
diff --git a/src/menus/SimpleSideMenu.vue b/src/menus/SimpleSideMenu.vue
index cfe0ee1..2b36b0b 100644
--- a/src/menus/SimpleSideMenu.vue
+++ b/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>
diff --git a/src/menus/TopWideMenu.vue b/src/menus/TopWideMenu.vue
index 41044a3..46a3682 100644
--- a/src/menus/TopWideMenu.vue
+++ b/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>
diff --git a/src/scss/menu.scss b/src/scss/menu.scss
index c1be903..9e8c749 100644
--- a/src/scss/menu.scss
+++ b/src/scss/menu.scss
@@ -29,19 +29,25 @@
     rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px,
     rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
   display: none;
+
+  a {
+    transition: 0.2s;
+  }
+
+  &.open {
+    display: block;
+
+    .side-menu-settings {
+      display: block;
+    }
+  }
 }
 
-#side-menu a {
-  transition: 0.2s;
-}
-
-#side-menu.open {
-  display: block;
-}
-
-#header .side-menu-opener {
-  margin-left: 0px;
-  margin-top: -1px;
+#header {
+  .side-menu-opener {
+    margin-left: 0px;
+    margin-top: -1px;
+  }
 }
 
 .side-menu-settings {
@@ -51,29 +57,25 @@
   line-height: 34px;
   height: 42px;
   display: none;
-}
 
-.side-menu-settings a {
-  color: var(--side-menu-text-color, #fff);
-  display: block;
-  padding: 4px 7px;
-}
+  a {
+    color: var(--side-menu-text-color, #fff);
+    display: block;
+    padding: 4px 7px;
+  }
 
-.side-menu-settings:hover a,
-.side-menu-settings a:active,
-.side-menu-settings a:focus {
-  background: var(--side-menu-current-app-background-color, #444);
-}
+  &:hover a,
+  a:active,
+  a:focus {
+    background: var(--side-menu-current-app-background-color, #444);
+  }
 
-.side-menu-settings img {
-  vertical-align: bottom;
-  margin-left: 3px;
-  width: 32px;
-  height: 32px;
-}
-
-#side-menu.open .side-menu-settings {
-  display: block;
+  img {
+    vertical-align: bottom;
+    margin-left: 3px;
+    width: 32px;
+    height: 32px;
+  }
 }
 
 .side-menu-opener {
@@ -88,20 +90,20 @@
   margin-left: 5px !important;
   margin-left: 3px !important;
   overflow: hidden;
-}
 
-.side-menu-opener span {
-  position: relative;
-  left: 50px;
-  display: block;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
+  span {
+    position: relative;
+    left: 50px;
+    display: block;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
 
-.side-menu-opener:active,
-.side-menu-opener:focus {
-  background-color: var(--side-menu-current-app-background-color, #444) !important;
+  &:active,
+  &:focus {
+    background-color: var(--side-menu-current-app-background-color, #444) !important;
+  }
 }
 
 .side-menu-closer {
@@ -134,39 +136,47 @@
   opacity: var(--side-menu-icon-opacity, 1);
 }
 
-.side-menu-app a {
-  line-height: 30px;
-  color: var(--side-menu-text-color, #fff);
-  display: block;
-  padding: 7px 0 5px 15px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+.side-menu-app {
+  a {
+    line-height: 30px;
+    color: var(--side-menu-text-color, #fff);
+    display: block;
+    padding: 7px 0 5px 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.side-menu-app a:hover,
-.side-menu-app.active,
-.side-menu-app a:focus {
-  background: var(--side-menu-current-app-background-color, #444);
+  a:hover,
+  a:focus,
+  &:active {
+    background: var(--side-menu-current-app-background-color, #444);
+  }
 }
 
 .side-menu-logo {
   text-align: center;
+  clear: both;
+
+  img {
+    max-width: 60%;
+    max-height: 100px;
+  }
 }
 
-.side-menu-logo img {
-  max-width: 60%;
-  max-height: 100px;
-}
-
-.enu-header {
+.side-menu-header {
   height: 150px;
   width: 100%;
   z-index: 2300;
   max-width: 290px;
-  position: fixed;
   padding-top: 2px;
   top: 0;
+
+  &::after {
+    content: ' ';
+    display: block;
+    clear: both;
+  }
 }
 
 #side-menu.side-menu-with-categories .side-menu-header {
@@ -183,13 +193,13 @@
   left: 0;
   width: 100%;
   z-index: 3001;
-}
 
-#side-menu-loader-bar {
-  height: 4px;
-  background: var(--side-menu-loader-color, #0e75ac);
-  width: 0;
-  transition-property: width;
+  #side-menu-loader-bar {
+    height: 4px;
+    background: var(--side-menu-loader-color, #0e75ac);
+    width: 0;
+    transition-property: width;
+  }
 }
 
 #side-menu.side-menu-big,
@@ -261,64 +271,75 @@
   margin-top: -2px;
 }
 
-.side-menu-always-displayed body {
-  width: calc(100% - 50px) !important;
-  position: absolute;
-  left: 50px;
-}
+.side-menu-always-displayed {
+  body {
+    width: calc(100% - 50px) !important;
+    position: absolute;
+    left: 50px;
+  }
 
-.side-menu-always-displayed #header {
-  position: absolute !important;
-}
+  #header {
+    position: absolute !important;
+  }
 
-.side-menu-always-displayed #side-menu {
-  display: block;
-}
+  #side-menu {
+    display: block;
+  }
 
-.side-menu-always-displayed .side-menu-apps-list {
-  height: 100vh;
-  top: 0;
-  overflow: hidden;
-}
+  .side-menu-apps-list {
+    height: 100vh;
+    top: 0;
+    overflow: hidden;
+  }
 
-.side-menu-always-displayed .side-menu-apps-list--with-settings {
-  height: calc(100vh - 49px);
-  top: 49px;
-}
+  .side-menu-apps-list--with-settings {
+    height: calc(100vh - 49px);
+    top: 49px;
+  }
 
-.side-menu-always-displayed .side-menu-apps-list:hover {
-  overflow: auto;
-}
+  .side-menu-apps-list:hover {
+    overflow: auto;
+  }
 
-.side-menu-always-displayed #side-menu,
-.side-menu-always-displayed .side-menu-header,
-.side-menu-always-displayed .side-menu-apps-list {
-  width: 50px;
-}
+  #side-menu,
+  .side-menu-header,
+  .side-menu-apps-list {
+    width: 50px;
+  }
 
-.side-menu-always-displayed #side-menu .side-menu-app-text,
-.side-menu-always-displayed #header .side-menu-opener,
-.side-menu-always-displayed .side-menu-logo {
-  display: none;
-}
+  #side-menu .side-menu-app-text,
+  #header .side-menu-opener,
+  .side-menu-logo {
+    display: none;
+  }
 
-.side-menu-always-displayed #side-menu .side-menu-header {
-  height: 49px;
-}
+  #side-menu .side-menu-header {
+    height: 49px;
+  }
 
-.side-menu-always-displayed #side-menu.open,
-.side-menu-always-displayed #side-menu.open .side-menu-apps-list,
-.side-menu-always-displayed #side-menu.open .side-menu-header {
-  width: 100%;
-}
+  #side-menu.open,
+  #side-menu.open .side-menu-apps-list,
+  #side-menu.open .side-menu-header {
+    width: 100%;
+  }
 
-.side-menu-always-displayed #side-menu.open .side-menu-app-text {
-  display: inline;
-}
+  #side-menu.open .side-menu-app-text {
+    display: inline;
+  }
 
-.side-menu-always-displayed .app-navigation-toggle-wrapper {
-  right: 0 !important;
-  margin-left: 0 !important;
+  .app-navigation-toggle-wrapper {
+    right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .side-menu-search {
+    display: none;
+  }
+
+  #body-settings,
+  #body-settings.body-settings-side-menu {
+    overflow-x: visible;
+  }
 }
 
 #side-menu.side-menu-with-categories {
@@ -326,19 +347,16 @@
   height: 100vh;
 }
 
-.side-menu-with-categories .side-menu-categories {
-  display: block;
-  padding: 0;
-  width: 100%;
-}
+.side-menu-with-categories {
+  .side-menu-categories {
+    display: block;
+    padding: 0;
+    width: 100%;
+  }
 
-.side-menu-with-categories .side-menu-category {
-  padding: 10px 0;
-}
-
-.side-menu-always-displayed #body-settings,
-#body-settings.body-settings-side-menu {
-  overflow-x: visible;
+  .side-menu-category {
+    padding: 10px 0;
+  }
 }
 
 .app-menu {
@@ -353,19 +371,17 @@
   float: right;
 }
 
-.side-menu-search input {
-  background: none;
-  border: 0;
-  border-radius: 0;
-  color: var(--side-menu-text-color);
-}
+.side-menu-search {
+  input {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    color: var(--side-menu-text-color);
 
-.side-menu-search input::placeholder {
-  color: var(--side-menu-text-color);
-}
-
-.side-menu-always-displayed .side-menu-search {
-  display: none;
+    &::placeholder {
+      color: var(--side-menu-text-color);
+    }
+  }
 }
 
 @media screen and (max-width: 1024px) {
diff --git a/templates/js/script.php b/templates/js/script.php
index 406c672..6550507 100644
--- a/templates/js/script.php
+++ b/templates/js/script.php
@@ -1,65 +1,12 @@
 <?php
 
-header('Content-type: text/javascript');
-
-$display = 'default';
-
-if ($_['always-displayed']) {
-    $display = 'always-displayed';
-} elseif ($_['big-menu']) {
-    $display = 'big-menu';
-} elseif ($_['side-with-categories']) {
-    $display = 'side-with-categories';
-}
-
-?>
-
-const SMcreateElement = (tagName, attributes) => {
-  const element = document.createElement(tagName)
-
-  if (typeof attributes === 'object') {
-    for (let i in attributes) {
-      if (i === 'text') {
-        element.textContent = attributes[i]
-      } else if (i === 'html') {
-        element.innerHTML = attributes[i]
-      } else {
-        element.setAttribute(i, attributes[i])
-      }
-    }
-  }
-
-  return element
-}
-
 (function() {
-  const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
-  const sideMenuOpener = SMcreateElement('button', {
-    'class': 'side-menu-opener',
-    'arial-label': t('side_menu', 'Toggle the menu'),
-    'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
-  })
-  const sideMenu = SMcreateElement('div', {id: 'side-menu'})
-
   const body = document.querySelector('body')
   const html = document.querySelector('html')
   const nextcloud = document.querySelector('#nextcloud')
   const logo = document.querySelector('.header-left .logo')
-
   const isTouchDevice = window.matchMedia("(pointer: coarse)").matches
 
-  window.targetBlankApps = <?php echo json_encode($_['target-blank-apps']), "\n" ?>
-  window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
-  window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']), "\n"; ?>
-  window.menuAppsOrder = <?php echo json_encode($_['apps-order']), "\n"; ?>
-  window.topMenuAppsMouseOverHiddenLabel = <?php echo json_encode($_['top-menu-mouse-over-hidden-label']), "\n"; ?>
-
-  <?php if ($display === 'big-menu'): ?>
-    sideMenu.setAttribute('data-bigmenu', '1')
-  <?php elseif ($display === 'side-with-categories'): ?>
-    sideMenu.setAttribute('data-sidewithcategories', '1')
-  <?php endif; ?>
-
   const sideMenuFocus = () => {
     let a = document.querySelector('#side-menu .side-menu-app.active a')
       || document.querySelector('#side-menu .side-menu-app a')
@@ -71,101 +18,11 @@ const SMcreateElement = (tagName, attributes) => {
 
   document.querySelector('body').addEventListener('side-menu.apps', (e) => {
     const apps = e.detail.apps;
-
-    <?php if ($_['hide-when-no-apps']): ?>
-      const sideMenu = document.querySelector('#side-menu')
-
-      if (apps.length === 0) {
-        sideMenu.classList.remove('open')
-        sideMenu.classList.add('hide')
-        sideMenuOpener.classList.add('hide')
-      } else {
-        sideMenu.classList.remove('hide')
-        sideMenuOpener.classList.remove('hide')
-      }
-
-      <?php if ($display === 'always-displayed'): ?>
-        if (apps.length === 0) {
-          html.classList.remove('side-menu-always-displayed')
-        } else {
-          html.classList.add('side-menu-always-displayed')
-        }
-      <?php endif; ?>
-    <?php else: ?>
-      <?php if ($display === 'always-displayed'): ?>
-        if (apps.length === 0) {
-          html.classList.remove('side-menu-always-displayed')
-        } else {
-          html.classList.add('side-menu-always-displayed')
-        }
-      <?php endif; ?>
-    <?php endif; ?>
   })
 
   body.addEventListener('side-menu.ready', () => {
     const sideMenu = document.querySelector('#side-menu')
-    const headerMenuOpener = document.querySelector('#header .side-menu-opener')
-    const sideMenuOpener = document.querySelectorAll('#side-menu .side-menu-opener')
 
-    if (!headerMenuOpener) {
-      return
-    }
-
-    <?php if ($_['opener-hover']): ?>
-      const sideMenuMouseLeave = () => {
-        sideMenu.classList.remove('open')
-        sideMenu.removeEventListener('mouseleave', sideMenuMouseLeave)
-      }
-
-      const sideMenuMouseEnter = () => {
-        sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
-      }
-
-      const sideMenuOpenerMouseEnter = () => {
-        sideMenu.classList.add('open')
-        sideMenu.addEventListener('mouseenter', sideMenuMouseEnter)
-
-        sideMenuFocus()
-      }
-
-      if (!isTouchDevice) {
-        <?php if ($_['opener-hover']): ?>
-          headerMenuOpener.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
-
-          sideMenu.classList.add('hide-opener')
-        <?php endif ?>
-
-        sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
-        sideMenu.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
-      }
-    <?php endif; ?>
-
-    headerMenuOpener.addEventListener('click', () => {
-      sideMenu.classList.add('open')
-      headerMenuOpener.blur()
-      sideMenuFocus()
-    })
-
-    for (let opener of sideMenuOpener) {
-      opener.addEventListener('click', () => {
-        <?php if ($display === 'always-displayed'): ?>
-          sideMenu.classList.toggle('open')
-        <?php else: ?>
-          sideMenu.classList.remove('open')
-        <?php endif; ?>
-      })
-    }
-
-    document.addEventListener('keydown', (e) => {
-      var key = e.key || e.keyCode
-
-      if ((key === 'o' || key === 79) && e.ctrlKey === true) {
-        e.preventDefault()
-
-        sideMenu.classList.toggle('open')
-        sideMenuFocus()
-      }
-    })
 
     const sideMenuObserver = new MutationObserver((e) => {
       if (body.getAttribute('id') !== 'body-settings') {
@@ -182,23 +39,4 @@ const SMcreateElement = (tagName, attributes) => {
       characterData: false
     })
   })
-
-  body.appendChild(sideMenuContainer)
-  sideMenuContainer.appendChild(sideMenu)
-
-  <?php if ($_['loader-enabled'] === true): ?>
-    // PageLoader()
-  <?php endif; ?>
-
-  if (nextcloud) {
-    if (logo && logo.parentNode !== nextcloud) {
-      nextcloud.appendChild(logo)
-    }
-
-    <?php if ($_['opener-position'] === 'before'): ?>
-      nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
-    <?php else: ?>
-      nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
-    <?php endif; ?>
-  }
 })();