Display: Fix sidebar sub menus styles

assets/css/app.scss

@@ -570,16 +570,6 @@ form .field {
   display: none;
 }
 
-.sub-item-indent {
-  padding-left: 20px;
-}
-
-.sub-item-indent.active {
-  background-color: #e0e0e0;
-  color: #333;
-  font-weight: bold;
-}
-
 .easy-donut {
   display: flex;
   flex-direction: column;

assets/css/scss/_social.scss

@@ -1039,10 +1039,6 @@
   color: gray;
 }
 
-.icon-spacing {
-  margin-right: 8px;
-}
-
 #social-wall-container {
   .tab {
     padding: 0.5rem 1rem;

assets/css/scss/organisms/_menu.scss

@@ -2,14 +2,14 @@
   @apply bg-white px-0 py-2 border border-gray-25 rounded-sm w-52;
 
   .p-menuitem-link {
-    @apply p-3 duration-150 select-none flex cursor-pointer;
+    @apply p-3 duration-150 select-none flex cursor-pointer items-center;
 
     .p-menuitem-text {
       @apply text-body-2;
     }
 
     .p-menuitem-icon {
-      @apply mr-2;
+      @apply mr-2 leading-none;
     }
 
     .p-submenu-icon {

assets/css/scss/organisms/_sidebar.scss

@@ -120,6 +120,10 @@
           .p-menuitem-link {
             @apply pl-8 py-3 pr-6;
 
+            .p-menuitem-icon {
+              @apply mr-2 leading-none;
+            }
+
             .p-menuitem-text {
               @apply text-body-2
                 hover:text-primary;
@@ -127,7 +131,8 @@
           }
         }
 
-        &.p-highlight {
+        &.p-highlight,
+        &.p-focus {
 
           > .p-menuitem-content {
 

assets/vue/composables/sidebarMenu.js

@@ -132,9 +132,9 @@ export function useSidebarMenu() {
       const styledSocialItems = socialItems.value.map((item) => {
         const newItem = {
           ...item,
-          class: `sub-item-indent${isActive(item) ? ' active' : ''}`,
-          icon: item.icon ? `${item.icon} icon-spacing` : null
-        };
+          class: isActive(item) ? "p-focus" : "",
+          icon: item.icon ? item.icon : undefined,
+        }
 
         if (newItem.isLink && newItem.route) {
           newItem.url = newItem.route