refactore of menus: classes and scss

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(