when Using menu inside AppBar
when Using menu inside AppBar in Blazor Mixed Project the menu inside AppBar its stopped Responding not opening after first navigation i have tried to Replace the appBar with SfMenu but Also the same problem
The Initial load it works no Issue Only when i start navigation inside the website
here is the component WASM
@inject NavigationManager UrlHelper;
@inject HttpClient http;
@inject IJSRuntime JSRuntime;
@inject MyStatewasm State;
@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Buttons;
@using Microsoft.AspNetCore.WebUtilities;
@rendermode InteractiveWebAssembly
<link id="theme" rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap.css" />
<link id="CustomTheme2" rel='nofollow' href="#" rel="stylesheet" />
<link id="CustomTheme" rel='nofollow' href="css/RTLStyling.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 ">
<SfAppBar ColorMode="@MyAppColor.AppBarColorMode">
@* <Theme_switcher /> *@
<AppBarSeparator></AppBarSeparator>
<CultureSwitcher />
<AppBarSpacer></AppBarSpacer>
<div style="width: 200px; margin-right:10px">
<span class="e-input-group e-control-wrapper e-inherit @MyAppColor.InputFocus">
<input type="text" class="e-searchinput e-input" @onblur="@(e => MyAppColor.InputFocus = string.Empty)" @onfocus="@(e => MyAppColor.InputFocus = "e-input-focus")" placeholder="Search">
<span class="e-icons e-search e-input-group-icon"></span>
</span>
</div>
<LoginDisplay />
<SfMenu CssClass=@("e-inherit e-appbar-icon-menu" + MyAppColor.ColorClass) TValue="MenuItem">
<MenuItems>
<MenuItem aria-label="more vertical" IconCss="e-icons e-more-vertical-1">
<MenuItems>
<MenuItem Text="Home"></MenuItem>
<MenuItem Text="Theme">
<MenuItems>
@foreach (var item in Themes)
{
<MenuItem Text="@item.Text" @onclick="@(()=> ChangeThemeEvent(item.ID))"></MenuItem>
}
</MenuItems>
</MenuItem>
<MenuItem Text="Company">
<MenuItems>
<MenuItem Text="About Us"></MenuItem>
<MenuItem Text="Customers"></MenuItem>
<MenuItem Text="Blog"></MenuItem>
<MenuItem Text="Careers"></MenuItem>
</MenuItems>
</MenuItem>
<MenuItem Text="Login"></MenuItem>
</MenuItems>
</MenuItem>
</MenuItems>
</SfMenu>
</SfAppBar>
</div>
</div>
@code {
ColorData MyAppColor = new ColorData
{
ColorMode = "Light",
ColorClass = " e-light",
AppBarColorMode = AppBarColor.Light,
IsPrimary = true,
LoginClass = "login"
};
public class ColorData
{
public string ColorMode { get; set; }
public string ColorClass { get; set; }
public AppBarColor AppBarColorMode { get; set; }
public string InputFocus { get; set; }
public bool IsPrimary { get; set; }
public string LoginClass { get; set; }
}
private string themeName = "bootstrap4";
private List<ThemeDetails> Themes = new List<ThemeDetails>() {
new ThemeDetails(){ ID = "material3", Text = "Material 3" },
new ThemeDetails(){ ID = "material", Text = "Material" },
new ThemeDetails(){ ID = "bootstrap", Text = "Bootstrap" },
new ThemeDetails(){ ID = "fabric", Text = "Fabric" },
new ThemeDetails(){ ID = "bootstrap4", Text = "Bootstrap 4" },
new ThemeDetails(){ ID = "bootstrap5", Text = "Bootstrap 5" },
new ThemeDetails(){ ID = "tailwind", Text = "TailWind"},
new ThemeDetails(){ ID = "tailwind-dark", Text = "TailWind Dark" },
new ThemeDetails(){ ID = "material3-dark", Text = "Material 3 Dark" },
new ThemeDetails(){ ID = "material-dark", Text = "Material Dark" },
new ThemeDetails(){ ID = "bootstrap-dark", Text = "Bootstrap Dark" },
new ThemeDetails(){ ID = "fabric-dark", Text = "Fabric Dark" },
new ThemeDetails(){ ID = "highcontrast", Text = "High Contrast" }
};
public async void OnThemeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ThemeDetails> args)
{
State.Theme = args.ItemData.ID;
await JSRuntime.InvokeAsync<object>("setTheme", args.ItemData.ID);
if (State.MyUser != null)
{
if (State.MyUser.SkinName != args.ItemData.ID)
{
State.MyUser.SkinName = args.ItemData.ID;
string UserId = Uri.EscapeDataString(State.MyUser.Id);
string skin = Uri.EscapeDataString(args.ItemData.ID);
var res = await http.GetAsync("api/ApplicationUser/ChangeSkin?id=" + UserId + "&Skin=" + skin);
var success = res.IsSuccessStatusCode;
}
}
}
public async void ChangeThemeEvent(string ThemeId)
{
State.Theme = ThemeId;
await JSRuntime.InvokeAsync<object>("setTheme", ThemeId);
if (State.MyUser != null)
{
if (State.MyUser.SkinName != ThemeId)
{
State.MyUser.SkinName = ThemeId;
string UserId = Uri.EscapeDataString(State.MyUser.Id);
string skin = Uri.EscapeDataString(ThemeId);
var res = await http.GetAsync("api/ApplicationUser/ChangeSkin?id=" + UserId + "&Skin=" + skin);
var success = res.IsSuccessStatusCode;
}
}
}
[CascadingParameter]
public Task<AuthenticationState>? Auth { get; set; }
bool ChangeTheme = false;
protected override async Task OnInitializedAsync()
{
if (http is null || http.BaseAddress is null)
{
return;
}
if (Auth != null)
{
var user = (await Auth).User;
var usr = user;
if (usr != null && usr.Identity != null && usr.Identity.IsAuthenticated)
{
string userName = Uri.EscapeDataString(usr.Identity.Name);
if (!string.IsNullOrEmpty(userName))
{
var myUser = await http.GetFromJsonAsync<ApplicationUser>($"api/ApplicationUser/GetByName/{userName}");
if (myUser != null)
{
if (State == null)
{
State = new MyStatewasm();
}
State.MyUser = myUser;
themeName = GetThemeName();
ChangeTheme = themeName != State.MyUser.SkinName;
StateHasChanged();
}
else
{
// Handle the case where the user is not found
}
}
}
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender || ChangeTheme)
{
if (State != null && State.MyUser != null && State.MyUser.SkinName != null)
{
string theme = "";
if (State.MyUser.SkinName != null && State.MyUser.SkinName != "" && State.MyUser.SkinName != themeName)
{
ChangeTheme = false;
themeName = State.MyUser.SkinName;
ChangeThemeEvent(themeName);
StateHasChanged();
}
else
{
themeName = theme.Contains("bootstrap4") ? "bootstrap4" : theme;
StateHasChanged();
}
ChangeTheme = false;
}
}
}
private string? GetThemeName()
{
var uri = UrlHelper.ToAbsoluteUri(UrlHelper.Uri);
QueryHelpers.ParseQuery(uri.Query).TryGetValue("theme", out var theme);
return theme.Count > 0 ? theme.First() : "bootstrap4";
}
}
Hi Mohammad,
We have attempted to replicate the issue you're experiencing based on the code snippet you provided. However, we were unable to reproduce the same issue in our environment.
To assist you more effectively, could you please provide additional details about your setup or a simplified sample that reproduces the issue? Alternatively, you could try to reproduce the issue using the sample we provided and share with us the steps you took to encounter the problem.
This additional information will greatly aid us in identifying the root cause and providing a more precise solution.
We appreciate your cooperation and look forward
to assisting you further.
Regards,
Ram
Attachment: appbarmenu_ac719f5.zip
- 1 Reply
- 2 Participants
-
MO Mohammad
- May 31, 2024 07:44 PM UTC
- Jun 5, 2024 12:46 PM UTC
