show name of user when expanded

ls1intum · Feb 17, 2025 · 4820807 · 4820807
1 parent 9ec8525
commit 4820807
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/client/src/app/components/profile-nav-section/profile-nav-section.component.html b/client/src/app/components/profile-nav-section/profile-nav-section.component.html
@@ -1,6 +1,12 @@
 <div class="flex flex-col gap-3 items-center">
   @if (isLoggedIn()) {
-    <p-avatar class="w-7 h-7" shape="circle" size="normal" [image]="getProfilePictureUrl()" [pTooltip]="fullName()" tooltipPosition="top" (click)="openProfile()"> </p-avatar>
+    <div class="flex flex-row gap-3 items-center">
+      <p-avatar class="w-7 h-7 flex-shrink-0" shape="circle" size="normal" [image]="getProfilePictureUrl()" [pTooltip]="fullName()" tooltipPosition="top" (click)="openProfile()">
+      </p-avatar>
+      @if (isExpanded()) {
+        <span class="text-xs text-gray-500 truncate overflow-hidden whitespace-nowrap max-w-[130px]">{{ fullName() }}</span>
+      }
+    </div>
 
     <button [pTooltip]="!isExpanded() ? 'Logout' : undefined" (click)="logout()" class="rounded-xl p-2 flex items-center justify-center gap-2 text-red-500 hover:text-red-700">
       <i-tabler name="logout" class="!size-7 !stroke-1"></i-tabler>

diff --git a/client/src/app/components/profile-nav-section/profile-nav-section.component.ts b/client/src/app/components/profile-nav-section/profile-nav-section.component.ts
@@ -8,13 +8,13 @@ import { ChipModule } from 'primeng/chip';
 import { DataViewModule } from 'primeng/dataview';
 import { TagModule } from 'primeng/tag';
 import { ToastModule } from 'primeng/toast';
-import { TooltipModule } from 'primeng/tooltip';
+import { Tooltip } from 'primeng/tooltip';
 import { DividerModule } from 'primeng/divider';
 import { AvatarModule } from 'primeng/avatar';
 
 @Component({
   selector: 'app-profile-nav-section',
-  imports: [ToastModule, TooltipModule, DividerModule, AvatarModule, DataViewModule, ButtonModule, TagModule, CommonModule, CardModule, ChipModule, IconsModule],
+  imports: [ToastModule, Tooltip, DividerModule, AvatarModule, DataViewModule, ButtonModule, TagModule, CommonModule, CardModule, ChipModule, IconsModule],
   templateUrl: './profile-nav-section.component.html',
 })
 export class ProfileNavSectionComponent {
@@ -30,16 +30,6 @@ export class ProfileNavSectionComponent {
     this.keycloakService.logout();
   }
 
-  initials() {
-    if (!this.isLoggedIn()) {
-      return '';
-    }
-
-    const profile = this.keycloakService.profile;
-
-    return `${profile?.firstName?.charAt(0) ?? ''}${profile?.lastName?.charAt(0) ?? ''}`;
-  }
-
   fullName() {
     if (!this.isLoggedIn()) {
       return '';