Fix user sidebar menu icons (#237)

* fix: layout of user sidebar menu * fix: icon position
onecx · Jul 16, 2024 · d6b01b0 · d6b01b0
1 parent c5b6d44
commit d6b01b0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/app/remotes/user-sidebar-menu/user-sidebar-menu.component.html b/src/app/remotes/user-sidebar-menu/user-sidebar-menu.component.html
@@ -1,10 +1,10 @@
-<p-accordion [activeIndex]="null">
+<p-accordion [activeIndex]="null" expandIcon="pi pi-chevron-right" collapseIcon="pi pi-chevron-down">
   <p-accordionTab>
     <ng-template pTemplate="header">
       <ocx-slot name="onecx-avatar-image"></ocx-slot>
       <span class="flex flex-column ml-3 row-gap-1">
         <span id="user-sidebar-display-name" class="font-bold">{{ displayName$ | async }}</span>
-        <span id="user-sidebar-display-name" class="text-sm">{{ organization$ | async }}</span>
+        <span *ngIf="organization$ | async as orgId" id="user-sidebar-orgid" class="text-sm">{{ orgId }}</span>
       </span>
     </ng-template>
     <ng-template pTemplate="content">

diff --git a/src/app/remotes/user-sidebar-menu/user-sidebar-menu.component.scss b/src/app/remotes/user-sidebar-menu/user-sidebar-menu.component.scss
@@ -7,13 +7,20 @@
 }
 
 ::ng-deep {
-  .p-accordion-tab {
-    box-shadow: none !important;
-  }
   .p-panelmenu-panel {
     box-shadow: none !important;
   }
-  .p-accordion-content {
-    padding: 0 !important;
+  .p-accordion {
+    .p-accordion-tab {
+      box-shadow: none !important;
+      &:not(.p-accordion-tab-active) .p-accordion-toggle-icon,
+      &.p-accordion-tab-active .p-accordion-toggle-icon {
+        transform: none;
+        margin-right: 0;
+      }
+    }
+    .p-accordion-content {
+      padding: 0 !important;
+    }
   }
 }