refactore of menus: classes and scss

src/menus/MenuContainer.vue

@@ -19,17 +19,23 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <PageLoader v-if="hasPageLoader" />
     <TopWideMenu
       v-if="display === 'big-menu'"
+      id="side-menu"
       :open="isOpen"
+      class="cm"
       @close="closeMenu"
     />
     <SideMenuWithCategories
       v-else-if="display === 'side-with-categories'"
+      id="side-menu"
       :open="isOpen"
+      class="cm"
       @close="closeMenu"
     />
     <SimpleSideMenu
       v-else-if="display === 'simple-side-menu'"
+      id="side-menu"
       :open="isOpen"
+      class="cm"
       @close="closeMenu"
       @open="openMenu"
       @toggle="toggleMenu(!isOpen)"
@@ -83,7 +89,7 @@ const createOpener = () => {
   }
 
   const opener = createElement('button', {
-    class: 'side-menu-opener',
+    class: 'cm-opener',
     'arial-label': t('side_menu', 'Toggle the menu'),
     html: `<span>${t('side_menu', 'Toggle the menu')}</span>`,
   })

src/menus/SideMenuWithCategories.vue

@@ -16,12 +16,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    id="side-menu"
     ref="menu"
-    class="side-menu-with-categories"
+    class="cm--sidemenuwithcategories"
     :class="{ open: open }"
   >
-    <div class="side-menu-header">
+    <div class="cm-header">
       <SettingsButton
         v-if="settings"
         :href="settings.href"
@@ -35,31 +34,32 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       />
     </div>
 
-    <div class="side-menu-categories-wrapper">
-      <div class="side-menu-categories">
+    <div class="cm-categories-wrapper">
+      <div class="cm-categories">
         <template
           v-for="(category, key) in items"
           :key="key"
         >
           <div
             v-if="containsAppsMatchingSearch(category.apps, search)"
-            class="side-menu-category"
+            class="cm-category"
           >
             <h2
               v-if="category.name != ''"
-              class="side-menu-category-title"
+              class="cm-category-title"
             >
               {{ category.name }}
             </h2>
 
-            <ul class="side-menu-apps-list">
+            <ul class="cm-apps">
               <template
                 v-for="(app, appId) in category.apps"
                 :key="appId"
               >
                 <SideMenuBigApp
                   v-if="isAppMatchingSearch(app, search)"
-                  :classes="{ 'side-menu-app': true, active: activeApp === appId }"
+                  class="cm-app"
+                  :classes="{ active: activeApp === appId }"
                   :icon="app.icon"
                   :label="app.name"
                   :href="app.href"

src/menus/SimpleSideMenu.vue

@@ -16,13 +16,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    id="side-menu"
     ref="menu"
     :class="{ open: open }"
   >
     <div
       v-if="settings || displayLogo || open || !openerHover"
-      class="side-menu-header"
+      class="cm-header"
     >
       <SettingsButton
         v-if="settings && open"
@@ -40,14 +39,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       />
       <MenuLogo
         v-if="displayLogo"
-        :classes="{ 'side-menu-logo': true, avatardiv: false }"
+        class="cm-logo"
+        :classes="{ avatardiv: false }"
         :image="useAvatarAsLogo ? avatar : logo"
         :link="logoLink"
       />
     </div>
 
     <ul
-      class="side-menu-apps-list"
+      class="cm-apps"
       :class="{ 'side-menu-apps-list--with-logo': displayLogo }"
     >
       <template
@@ -56,7 +56,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       >
         <SideMenuApp
           v-if="isAppMatchingSearch(app, search)"
-          :classes="{ 'side-menu-app': true, active: app.id === activeApp }"
+          class="cm-app"
+          :classes="{ active: app.id === activeApp }"
           :icon="app.icon"
           :label="app.name"
           :href="app.href"
@@ -108,7 +109,7 @@ 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)
+  document.querySelector('html').classList.toggle('cm-always-displayed', alwaysDisplayed.value && val.length)
 })
 
 watch(

src/menus/StandardMenu.vue

@@ -16,7 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <nav
-    class="app-menu show"
+    class="cm--standardmenu app-menu show"
     :aria-label="t('core', 'Applications menu')"
   >
     <ul

src/menus/TopWideMenu.vue

@@ -16,12 +16,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    id="side-menu"
     ref="menu"
-    class="side-menu-big"
+    class="cm--topwidemenu"
     :class="{ open: open }"
   >
-    <div class="side-menu-header">
+    <div class="cm-header">
       <CloserButton
         v-if="!openerHover"
         @click="$emit('close')"
@@ -39,31 +38,32 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       />
     </div>
 
-    <div class="side-menu-categories-wrapper">
-      <div class="side-menu-categories">
+    <div class="cm-categories-wrapper">
+      <div class="cm-categories">
         <template
           v-for="(category, key) in items"
           :key="key"
         >
           <div
             v-if="containsAppsMatchingSearch(category.apps, search)"
-            class="side-menu-category"
+            class="cm-category"
           >
             <h2
               v-if="category.name != ''"
-              class="side-menu-category-title"
+              class="cm-category-title"
             >
               {{ category.name }}
             </h2>
 
-            <ul class="side-menu-apps-list">
+            <ul class="cm-apps">
               <template
                 v-for="(app, appId) in category.apps"
                 :key="appId"
               >
                 <SideMenuBigApp
                   v-if="isAppMatchingSearch(app, search)"
-                  :classes="{ 'side-menu-app': true, active: activeApp === appId }"
+                  class="cm-app"
+                  :classes="{ active: activeApp === appId }"
                   :icon="app.icon"
                   :label="app.name"
                   :href="app.href"