Parameters for menu css & user button

src/assets/styles/_common-variables.scss

@@ -51,6 +51,12 @@ body {
     --iqser-app-name-font-size: 18px;
     --iqser-app-name-color: black;
     --iqser-top-bar-height: 61px;
+    --iqser-menu-margin-top: 10px;
+    --iqser-menu-border-radius: 8px;
+    --iqser-menu-padding-top: 8px;
+    --iqser-menu-padding-bottom: 24px;
+    --iqser-menu-min-height: 24px;
+    --iqser-menu-item-margin: 0 8px 2px 8px;
 }
 
 $required-variables: 'iqser-font-family' 'iqser-primary';

src/assets/styles/common-menu.scss

@@ -1,17 +1,18 @@
 @use 'common-mixins';
 
 .mat-menu-panel {
-    border-radius: 8px !important;
+    border-radius: var(--iqser-menu-border-radius) !important;
     max-width: none !important;
     min-width: 180px !important;
-    margin-top: 10px;
+    margin-top: var(--iqser-menu-margin-top);
     background-color: var(--iqser-popup-background);
+    min-height: unset !important;
     @include common-mixins.scroll-bar;
     @include common-mixins.drop-shadow;
 
     .mat-menu-content:not(:empty) {
-        padding-top: 8px;
-        padding-bottom: 24px;
+        padding-top: var(--iqser-menu-padding-top);
+        padding-bottom: var(--iqser-menu-padding-bottom);
     }
 
     &.padding-bottom-0 .mat-menu-content:not(:empty) {
@@ -26,7 +27,7 @@
         font-size: var(--iqser-font-size);
         color: var(--iqser-text);
         padding: 0 26px 0 8px;
-        margin: 0 8px 2px 8px;
+        margin: var(--iqser-menu-item-margin);
         border-radius: 4px;
         width: -webkit-fill-available;
 

src/lib/users/components/user-button/user-button.component.html

@@ -1,7 +1,14 @@
 <button [class.overlay]="showDot" mat-button>
-    <iqser-initials-avatar [user]="userService.currentUser$ | async" [withName]="true"></iqser-initials-avatar>
+    <ng-container *ngIf="icon; else initialsAvatar">
+        <mat-icon [svgIcon]="icon" class="mr-8"></mat-icon>
+        {{ userService.currentUser$ | async | name }}
+    </ng-container>
 
-    <mat-icon svgIcon="iqser:arrow-down"></mat-icon>
+    <mat-icon *ngIf="showDropdownArrow" svgIcon="iqser:arrow-down"></mat-icon>
 </button>
 
 <div *ngIf="showDot" class="dot"></div>
+
+<ng-template #initialsAvatar>
+    <iqser-initials-avatar [user]="userService.currentUser$ | async" [withName]="true"></iqser-initials-avatar>
+</ng-template>

src/lib/users/components/user-button/user-button.component.ts

@@ -9,6 +9,8 @@ import { IqserUserService } from '../../services/iqser-user.service';
 })
 export class UserButtonComponent {
     @Input() showDot = false;
+    @Input() icon?: string;
+    @Input() showDropdownArrow = true;
 
     constructor(readonly userService: IqserUserService) {}
 }