Skip to content

Commit d61ebc7

Browse files
iammukeshmiammukeshm
committed
enhance login ui
1 parent b03a921 commit d61ebc7

File tree

6 files changed

+814
-113
lines changed

6 files changed

+814
-113
lines changed

‎src/BuildingBlocks/Blazor.UI/Components/Theme/FshThemeCustomizer.razor‎

Lines changed: 13 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,6 @@
33
@inherits FshComponentBase
44

55
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="py-4">
6-
<div class="d-flex justify-space-between align-center mb-4">
7-
<div>
8-
<MudText Typo="Typo.h4">Theme Customization</MudText>
9-
<MudText Typo="Typo.body2" Color="Color.Secondary">
10-
Customize the look and feel of your application
11-
</MudText>
12-
</div>
13-
<div class="d-flex gap-2">
14-
<MudButton Variant="Variant.Outlined"
15-
Color="Color.Default"
16-
StartIcon="@Icons.Material.Outlined.Refresh"
17-
OnClick="@ResetToDefaults"
18-
Disabled="@_isSaving">
19-
Reset to Defaults
20-
</MudButton>
21-
<MudButton Variant="Variant.Filled"
22-
Color="Color.Primary"
23-
StartIcon="@Icons.Material.Outlined.Save"
24-
OnClick="@SaveChanges"
25-
Disabled="@_isSaving">
26-
@if (_isSaving)
27-
{
28-
<MudProgressCircular Size="Size.Small" Indeterminate="true" Class="mr-2" />
29-
<span>Saving...</span>
30-
}
31-
else
32-
{
33-
<span>Save Changes</span>
34-
}
35-
</MudButton>
36-
</div>
37-
</div>
38-
396
@if (_isLoading)
407
{
418
<MudProgressLinear Indeterminate="true" Color="Color.Primary" />
@@ -126,6 +93,11 @@
12693
private bool _isLoading = true;
12794
private bool _isSaving = false;
12895

96+
/// <summary>
97+
/// Indicates whether the theme is currently being saved.
98+
/// </summary>
99+
public bool IsSaving => _isSaving;
100+
129101
protected override async Task OnInitializedAsync()
130102
{
131103
await LoadTheme();
@@ -155,7 +127,10 @@
155127
}
156128
}
157129

158-
private async Task SaveChanges()
130+
/// <summary>
131+
/// Saves the current theme changes.
132+
/// </summary>
133+
public async Task SaveChangesAsync()
159134
{
160135
_isSaving = true;
161136
StateHasChanged();
@@ -185,7 +160,10 @@
185160
}
186161
}
187162

188-
private async Task ResetToDefaults()
163+
/// <summary>
164+
/// Resets the theme to default settings.
165+
/// </summary>
166+
public async Task ResetToDefaultsAsync()
189167
{
190168
var confirmed = await DialogService.ShowMessageBox(
191169
"Reset Theme",

‎src/Playground/Playground.Blazor/Components/Layout/NavMenu.razor‎

Lines changed: 66 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,78 @@
11
@inject NavigationManager Navigation
22

33
<nav class="fsh-nav">
4-
<!-- Main Navigation -->
5-
<div class="fsh-nav-section">
6-
<span class="fsh-nav-section-title">Main</span>
7-
<MudNavMenu Class="fsh-nav-menu" Rounded="true" Margin="Margin.Dense" Color="Color.Primary">
8-
<MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Outlined.Dashboard" Class="fsh-nav-item">
9-
Dashboard
10-
</MudNavLink>
11-
<MudNavLink Href="/users" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Group" Class="fsh-nav-item">
4+
<MudNavMenu Class="fsh-nav-menu" Rounded="true" Margin="Margin.Dense" Color="Color.Primary">
5+
<!-- Home - Root Item -->
6+
<MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Outlined.Home" Class="fsh-nav-item">
7+
Home
8+
</MudNavLink>
9+
10+
<!-- Administration Section -->
11+
<div class="fsh-nav-section-title">Administration</div>
12+
13+
<MudNavGroup Title="User Management" Icon="@Icons.Material.Outlined.People" Class="fsh-nav-group" Expanded="false">
14+
<MudNavLink Href="/users" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Person" Class="fsh-nav-subitem">
1215
Users
1316
</MudNavLink>
14-
<MudNavLink Href="/audits" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.History" Class="fsh-nav-item">
15-
Audit Logs
17+
<MudNavLink Href="/roles" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.AdminPanelSettings" Class="fsh-nav-subitem">
18+
Roles
19+
</MudNavLink>
20+
</MudNavGroup>
21+
22+
<MudNavGroup Title="Tenant Management" Icon="@Icons.Material.Outlined.Business" Class="fsh-nav-group" Expanded="false">
23+
<MudNavLink Href="/tenants" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.CorporateFare" Class="fsh-nav-subitem">
24+
Tenants
1625
</MudNavLink>
17-
</MudNavMenu>
18-
</div>
19-
20-
<!-- Settings Section -->
21-
<div class="fsh-nav-section">
22-
<span class="fsh-nav-section-title">Settings</span>
23-
<MudNavMenu Class="fsh-nav-menu" Rounded="true" Margin="Margin.Dense" Color="Color.Primary">
24-
<MudNavLink Href="/settings/profile" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.ManageAccounts" Class="fsh-nav-item">
26+
<MudNavLink Href="/tenants/settings" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Tune" Class="fsh-nav-subitem">
27+
Tenant Settings
28+
</MudNavLink>
29+
</MudNavGroup>
30+
31+
<MudNavLink Href="/audits" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.History" Class="fsh-nav-item">
32+
Audit Logs
33+
</MudNavLink>
34+
35+
<!-- Communication Section -->
36+
<div class="fsh-nav-section-title">Communication</div>
37+
38+
<MudNavLink Href="/chat" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Chat" Class="fsh-nav-item">
39+
Chat
40+
</MudNavLink>
41+
42+
<MudNavLink Href="/notifications" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Notifications" Class="fsh-nav-item">
43+
Notifications
44+
</MudNavLink>
45+
46+
<!-- System Section -->
47+
<div class="fsh-nav-section-title">System</div>
48+
49+
<MudNavLink Href="/health" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.MonitorHeart" Class="fsh-nav-item">
50+
Health
51+
</MudNavLink>
52+
53+
<MudNavLink Href="/logs" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Terminal" Class="fsh-nav-item">
54+
Logs
55+
</MudNavLink>
56+
57+
<!-- Settings Section -->
58+
<div class="fsh-nav-section-title">Settings</div>
59+
60+
<MudNavGroup Title="Settings" Icon="@Icons.Material.Outlined.Settings" Class="fsh-nav-group" Expanded="false">
61+
<MudNavLink Href="/settings/profile" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.ManageAccounts" Class="fsh-nav-subitem">
2562
Account
2663
</MudNavLink>
27-
<MudNavLink Href="/settings/theme" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Palette" Class="fsh-nav-item">
28-
Appearance
64+
<MudNavLink Href="/settings/theme" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Palette" Class="fsh-nav-subitem">
65+
Theme
2966
</MudNavLink>
30-
</MudNavMenu>
31-
</div>
67+
<MudNavLink Href="/settings/security" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Security" Class="fsh-nav-subitem">
68+
Security
69+
</MudNavLink>
70+
</MudNavGroup>
71+
72+
<MudNavLink Href="/about" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Outlined.Info" Class="fsh-nav-item">
73+
About
74+
</MudNavLink>
75+
</MudNavMenu>
3276
</nav>
3377

3478
@code {

‎src/Playground/Playground.Blazor/Components/Layout/NavMenu.razor.css‎

Lines changed: 92 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,31 @@
11
.fsh-nav {
22
display: flex;
33
flex-direction: column;
4-
gap: 8px;
5-
padding: 0 12px;
6-
}
7-
8-
.fsh-nav-section {
9-
display: flex;
10-
flex-direction: column;
11-
gap: 4px;
4+
padding: 0 8px;
125
}
136

147
.fsh-nav-section-title {
15-
font-size: 11px;
8+
font-size: 10px;
169
font-weight: 600;
1710
text-transform: uppercase;
1811
letter-spacing: 0.5px;
1912
color: var(--mud-palette-text-secondary);
20-
padding: 12px 12px 6px 12px;
21-
opacity: 0.7;
13+
padding: 16px 12px 6px 12px;
14+
opacity: 0.6;
2215
}
2316

2417
::deep .fsh-nav-menu {
2518
padding: 0;
2619
}
2720

21+
/* Main nav items */
2822
::deep .fsh-nav-item {
29-
border-radius: 10px !important;
23+
border-radius: 8px !important;
3024
margin: 2px 0 !important;
31-
padding: 10px 14px !important;
25+
padding: 8px 12px !important;
3226
font-weight: 500 !important;
33-
font-size: 14px !important;
27+
font-size: 13px !important;
28+
min-height: 38px !important;
3429
transition: all 0.15s ease !important;
3530
}
3631

@@ -44,12 +39,93 @@
4439
}
4540

4641
::deep .fsh-nav-item .mud-nav-link-icon {
47-
margin-right: 12px;
48-
opacity: 0.8;
42+
margin-right: 12px !important;
43+
font-size: 20px !important;
44+
opacity: 0.75;
4945
}
5046

5147
::deep .fsh-nav-item:hover .mud-nav-link-icon,
5248
::deep .fsh-nav-item.active .mud-nav-link-icon {
5349
opacity: 1;
5450
color: var(--mud-palette-primary);
5551
}
52+
53+
/* Nav groups (expandable) */
54+
::deep .fsh-nav-group {
55+
margin: 2px 0 !important;
56+
}
57+
58+
::deep .fsh-nav-group > .mud-nav-link {
59+
border-radius: 8px !important;
60+
padding: 8px 12px !important;
61+
font-weight: 500 !important;
62+
font-size: 13px !important;
63+
min-height: 38px !important;
64+
transition: all 0.15s ease !important;
65+
}
66+
67+
::deep .fsh-nav-group > .mud-nav-link:hover {
68+
background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
69+
}
70+
71+
::deep .fsh-nav-group > .mud-nav-link .mud-nav-link-icon {
72+
margin-right: 12px !important;
73+
font-size: 20px !important;
74+
opacity: 0.75;
75+
}
76+
77+
::deep .fsh-nav-group.mud-expanded > .mud-nav-link {
78+
background-color: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
79+
}
80+
81+
::deep .fsh-nav-group.mud-expanded > .mud-nav-link .mud-nav-link-icon {
82+
color: var(--mud-palette-primary);
83+
opacity: 1;
84+
}
85+
86+
/* Sub-items inside nav groups */
87+
::deep .fsh-nav-subitem {
88+
border-radius: 8px !important;
89+
margin: 2px 0 2px 20px !important;
90+
padding: 8px 12px !important;
91+
font-weight: 400 !important;
92+
font-size: 13px !important;
93+
min-height: 38px !important;
94+
transition: all 0.15s ease !important;
95+
}
96+
97+
::deep .fsh-nav-subitem .mud-nav-link-icon {
98+
margin-right: 12px !important;
99+
font-size: 18px !important;
100+
opacity: 0.7;
101+
}
102+
103+
::deep .fsh-nav-subitem:hover {
104+
background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
105+
}
106+
107+
::deep .fsh-nav-subitem:hover .mud-nav-link-icon {
108+
opacity: 1;
109+
color: var(--mud-palette-primary);
110+
}
111+
112+
::deep .fsh-nav-subitem.active {
113+
background-color: rgba(var(--mud-palette-primary-rgb), 0.12) !important;
114+
color: var(--mud-palette-primary) !important;
115+
font-weight: 500 !important;
116+
}
117+
118+
::deep .fsh-nav-subitem.active .mud-nav-link-icon {
119+
opacity: 1;
120+
color: var(--mud-palette-primary);
121+
}
122+
123+
/* Collapse panel styling */
124+
::deep .mud-navgroup-collapse {
125+
padding: 2px 0 !important;
126+
}
127+
128+
/* Expand arrow */
129+
::deep .fsh-nav-group .mud-expand-panel-header .mud-collapse-icon {
130+
font-size: 18px !important;
131+
}

0 commit comments

Comments
 (0)