Skip to content

Commit 14ab8b9

Browse files
marypas74claude
marypas74
and
claude
committed
feat(UI): Expanded role-based user menu with admin/instructor sections
## User Menu Enhancements (v2.1.0-dev) - Added Admin section (11 menu items) visible only to Admin role: - Admin Dashboard, Course Management, User Management - Instructors, Categories, Payments, Reports, Analytics - Access Logs, System Health, System Settings - Added Instructor section (4 menu items) visible to Instructor/Admin roles: - Instructor Dashboard, My Teaching Courses - Course Analytics, Earnings - Updated User section (6 menu items) for all authenticated users: - Student Dashboard, My Profile, My Courses - My Certificates, Notifications, Account Settings ## CSS Enhancements - Expanded dropdown with scroll support (max-height: 85vh) - Section titles with role-specific accent colors (indigo/purple/blue) - Hover effects with role-based color coding - Responsive design for mobile devices - Custom scrollbar styling 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent fb4dd46 commit 14ab8b9

File tree

2 files changed

+272
-13
lines changed

2 files changed

+272
-13
lines changed

‎src/InsightLearn.WebAssembly/Layout/MainLayout.razor‎

Lines changed: 115 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -101,19 +101,121 @@
101101
</button>
102102
@if (isUserMenuOpen)
103103
{
104-
<div class="user-dropdown show">
105-
<a href="/dashboard" class="dropdown-item">
106-
<i class="fas fa-tachometer-alt"></i>
107-
Dashboard
108-
</a>
109-
<a href="/profile" class="dropdown-item">
110-
<i class="fas fa-user"></i>
111-
My Profile
112-
</a>
113-
<a href="/my-courses" class="dropdown-item">
114-
<i class="fas fa-book"></i>
115-
My Courses
116-
</a>
104+
<div class="user-dropdown show user-dropdown-expanded">
105+
@* === ADMIN SECTION === *@
106+
<AuthorizeView Roles="Admin">
107+
<Authorized Context="adminContext">
108+
<div class="dropdown-section">
109+
<span class="dropdown-section-title">
110+
<i class="fas fa-shield-alt"></i> Administration
111+
</span>
112+
<a href="/admin/dashboard" class="dropdown-item">
113+
<i class="fas fa-tachometer-alt"></i>
114+
Admin Dashboard
115+
</a>
116+
<a href="/admin/courses" class="dropdown-item">
117+
<i class="fas fa-graduation-cap"></i>
118+
Course Management
119+
</a>
120+
<a href="/admin/users" class="dropdown-item">
121+
<i class="fas fa-users-cog"></i>
122+
User Management
123+
</a>
124+
<a href="/admin/instructors" class="dropdown-item">
125+
<i class="fas fa-chalkboard-teacher"></i>
126+
Instructors
127+
</a>
128+
<a href="/admin/categories" class="dropdown-item">
129+
<i class="fas fa-folder-tree"></i>
130+
Categories
131+
</a>
132+
<a href="/admin/payments" class="dropdown-item">
133+
<i class="fas fa-credit-card"></i>
134+
Payments
135+
</a>
136+
<a href="/admin/reports" class="dropdown-item">
137+
<i class="fas fa-chart-bar"></i>
138+
Reports
139+
</a>
140+
<a href="/admin/analytics" class="dropdown-item">
141+
<i class="fas fa-chart-line"></i>
142+
Analytics
143+
</a>
144+
<a href="/admin/access-logs" class="dropdown-item">
145+
<i class="fas fa-history"></i>
146+
Access Logs
147+
</a>
148+
<a href="/admin/system-health" class="dropdown-item">
149+
<i class="fas fa-heartbeat"></i>
150+
System Health
151+
</a>
152+
<a href="/admin/settings" class="dropdown-item">
153+
<i class="fas fa-cogs"></i>
154+
System Settings
155+
</a>
156+
</div>
157+
<hr class="dropdown-divider" />
158+
</Authorized>
159+
</AuthorizeView>
160+
161+
@* === INSTRUCTOR SECTION === *@
162+
<AuthorizeView Roles="Instructor,Admin">
163+
<Authorized Context="instructorContext">
164+
<div class="dropdown-section">
165+
<span class="dropdown-section-title">
166+
<i class="fas fa-chalkboard"></i> Instructor
167+
</span>
168+
<a href="/instructor/dashboard" class="dropdown-item">
169+
<i class="fas fa-home"></i>
170+
Instructor Dashboard
171+
</a>
172+
<a href="/instructor/courses" class="dropdown-item">
173+
<i class="fas fa-book-open"></i>
174+
My Teaching Courses
175+
</a>
176+
<a href="/instructor/analytics" class="dropdown-item">
177+
<i class="fas fa-chart-pie"></i>
178+
Course Analytics
179+
</a>
180+
<a href="/instructor/earnings" class="dropdown-item">
181+
<i class="fas fa-wallet"></i>
182+
Earnings
183+
</a>
184+
</div>
185+
<hr class="dropdown-divider" />
186+
</Authorized>
187+
</AuthorizeView>
188+
189+
@* === USER SECTION (All logged-in users) === *@
190+
<div class="dropdown-section">
191+
<span class="dropdown-section-title">
192+
<i class="fas fa-user-circle"></i> My Account
193+
</span>
194+
<a href="/dashboard" class="dropdown-item">
195+
<i class="fas fa-home"></i>
196+
Student Dashboard
197+
</a>
198+
<a href="/profile" class="dropdown-item">
199+
<i class="fas fa-user"></i>
200+
My Profile
201+
</a>
202+
<a href="/my-courses" class="dropdown-item">
203+
<i class="fas fa-book"></i>
204+
My Courses
205+
</a>
206+
<a href="/certificates" class="dropdown-item">
207+
<i class="fas fa-certificate"></i>
208+
My Certificates
209+
</a>
210+
<a href="/notifications" class="dropdown-item">
211+
<i class="fas fa-bell"></i>
212+
Notifications
213+
</a>
214+
<a href="/settings" class="dropdown-item">
215+
<i class="fas fa-cog"></i>
216+
Account Settings
217+
</a>
218+
</div>
117219
<hr class="dropdown-divider" />
118220
<button @onclick="Logout" class="dropdown-item logout-btn">
119221
<i class="fas fa-sign-out-alt"></i>

‎src/InsightLearn.WebAssembly/wwwroot/css/header-clean.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1009,6 +1009,163 @@ body {
10091009
color: #c82333 !important;
10101010
}
10111011

1012+
/* ===================================
1013+
EXPANDED USER DROPDOWN MENU (v2.1.0)
1014+
Role-based admin/instructor/user menu
1015+
=================================== */
1016+
1017+
.user-dropdown-expanded {
1018+
min-width: 280px;
1019+
max-height: 85vh;
1020+
overflow-y: auto;
1021+
padding: var(--space-sm) 0;
1022+
}
1023+
1024+
/* Scrollbar styling for expanded menu */
1025+
.user-dropdown-expanded::-webkit-scrollbar {
1026+
width: 6px;
1027+
}
1028+
1029+
.user-dropdown-expanded::-webkit-scrollbar-track {
1030+
background: var(--bg-secondary);
1031+
border-radius: 3px;
1032+
}
1033+
1034+
.user-dropdown-expanded::-webkit-scrollbar-thumb {
1035+
background: var(--border-light);
1036+
border-radius: 3px;
1037+
}
1038+
1039+
.user-dropdown-expanded::-webkit-scrollbar-thumb:hover {
1040+
background: var(--text-muted);
1041+
}
1042+
1043+
/* Dropdown Section */
1044+
.dropdown-section {
1045+
padding: var(--space-xs) 0;
1046+
}
1047+
1048+
.dropdown-section-title {
1049+
display: flex;
1050+
align-items: center;
1051+
gap: var(--space-sm);
1052+
padding: var(--space-sm) var(--space-md);
1053+
font-size: 11px;
1054+
font-weight: 700;
1055+
text-transform: uppercase;
1056+
letter-spacing: 0.5px;
1057+
color: var(--text-muted);
1058+
margin-bottom: var(--space-xs);
1059+
}
1060+
1061+
.dropdown-section-title i {
1062+
font-size: 12px;
1063+
opacity: 0.7;
1064+
}
1065+
1066+
/* Admin section title color */
1067+
.dropdown-section-title .fa-shield-alt {
1068+
color: #6366f1; /* Indigo for admin */
1069+
}
1070+
1071+
/* Instructor section title color */
1072+
.dropdown-section-title .fa-chalkboard {
1073+
color: #8b5cf6; /* Purple for instructor */
1074+
}
1075+
1076+
/* User section title color */
1077+
.dropdown-section-title .fa-user-circle {
1078+
color: #0ea5e9; /* Sky blue for user */
1079+
}
1080+
1081+
/* Dropdown Item Styling */
1082+
.user-dropdown-expanded .dropdown-item {
1083+
display: flex;
1084+
align-items: center;
1085+
gap: var(--space-md);
1086+
padding: var(--space-sm) var(--space-md);
1087+
color: var(--text-primary);
1088+
text-decoration: none;
1089+
font-size: var(--font-size-sm);
1090+
font-weight: 500;
1091+
background-color: transparent;
1092+
border: none;
1093+
width: 100%;
1094+
text-align: left;
1095+
cursor: pointer;
1096+
transition: all var(--transition-fast);
1097+
border-radius: 0;
1098+
margin: 0;
1099+
}
1100+
1101+
.user-dropdown-expanded .dropdown-item i {
1102+
width: 20px;
1103+
text-align: center;
1104+
font-size: 14px;
1105+
color: var(--text-secondary);
1106+
transition: color var(--transition-fast);
1107+
}
1108+
1109+
.user-dropdown-expanded .dropdown-item:hover {
1110+
background-color: var(--bg-hover);
1111+
color: var(--primary);
1112+
}
1113+
1114+
.user-dropdown-expanded .dropdown-item:hover i {
1115+
color: var(--primary);
1116+
}
1117+
1118+
/* Admin item hover - indigo accent */
1119+
.dropdown-section:has(.fa-shield-alt) .dropdown-item:hover {
1120+
background-color: rgba(99, 102, 241, 0.08);
1121+
}
1122+
1123+
.dropdown-section:has(.fa-shield-alt) .dropdown-item:hover,
1124+
.dropdown-section:has(.fa-shield-alt) .dropdown-item:hover i {
1125+
color: #6366f1;
1126+
}
1127+
1128+
/* Instructor item hover - purple accent */
1129+
.dropdown-section:has(.fa-chalkboard) .dropdown-item:hover {
1130+
background-color: rgba(139, 92, 246, 0.08);
1131+
}
1132+
1133+
.dropdown-section:has(.fa-chalkboard) .dropdown-item:hover,
1134+
.dropdown-section:has(.fa-chalkboard) .dropdown-item:hover i {
1135+
color: #8b5cf6;
1136+
}
1137+
1138+
/* Dropdown Divider */
1139+
.user-dropdown-expanded .dropdown-divider {
1140+
margin: var(--space-xs) var(--space-md);
1141+
border: none;
1142+
border-top: 1px solid var(--border-light);
1143+
}
1144+
1145+
/* Responsive adjustments for expanded menu */
1146+
@media (max-width: 768px) {
1147+
.user-dropdown-expanded {
1148+
min-width: 260px;
1149+
max-height: 70vh;
1150+
right: -10px;
1151+
}
1152+
1153+
.dropdown-section-title {
1154+
font-size: 10px;
1155+
padding: var(--space-xs) var(--space-sm);
1156+
}
1157+
1158+
.user-dropdown-expanded .dropdown-item {
1159+
padding: var(--space-sm) var(--space-sm);
1160+
font-size: 13px;
1161+
}
1162+
1163+
.user-dropdown-expanded .dropdown-item i {
1164+
width: 18px;
1165+
font-size: 13px;
1166+
}
1167+
}
1168+
10121169
/* Auth Buttons */
10131170
.auth-buttons {
10141171
display: flex;

0 commit comments

Comments
 (0)