diff --git a/layouts/member.vue b/layouts/member.vue index 206bc1f..9aa13f6 100644 --- a/layouts/member.vue +++ b/layouts/member.vue @@ -72,7 +72,7 @@ :member-id="memberData?.member_id" :first-name="memberData?.first_name || user?.firstName" :last-name="memberData?.last_name || user?.lastName" - size="large" + size="small" :show-badge="false" />
@@ -81,29 +81,30 @@
{{ fullName }}
{{ email }}
+ + + + + + + - - - - - - - @@ -497,8 +498,9 @@ watch(width, (newWidth) => { .profile-card-footer { display: flex; + flex-direction: column; align-items: center; - gap: 0.75rem; + gap: 0.5rem; padding: 1rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), @@ -508,6 +510,7 @@ watch(width, (newWidth) => { margin: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; + position: relative; &:hover { background: linear-gradient(135deg, @@ -516,6 +519,27 @@ watch(width, (newWidth) => { ); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } + + .profile-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + width: 100%; + position: relative; + + .profile-menu-btn { + position: absolute; + top: -0.5rem; + right: -0.5rem; + opacity: 0.6; + transition: opacity 0.2s ease; + + &:hover { + opacity: 1; + } + } + } } .profile-avatar-wrapper { @@ -524,10 +548,10 @@ watch(width, (newWidth) => { .online-indicator { position: absolute; - bottom: 0; - right: 0; - width: 12px; - height: 12px; + bottom: -2px; + right: -2px; + width: 10px; + height: 10px; background: #22c55e; border: 2px solid white; border-radius: 50%;