Basically I'm developing a website/app with Blazor where I have 2 layouts - one is a topbar that I use on the homepage.
On desktop, this layout works perfectly however on mobile the toggle does not seem to have any action. I tried to inspect it and on the programming tools the onlclick event does not appear. I also tried to stop at the point where the even technically should be triggered but nothing happened, so my suspicion is that the event is not being triggered.
What make me believe this (and I don't know the awnser for this even asking chatgpt didn't help) is that is i remove the line:
@inherits LayoutComponentBase and use the layout as a component, the event triggers normally. I don't know if there's an imcompatibility with the layout inheritance, but it does not work since the start on mobile.
Also tried to test it on a simplier way and on pages without anything and the same error persists. Even test on the console did not work
@inherits LayoutComponentBase@inject NavigationManager Navigation@inject AuthenticationStateProvider AuthenticationStateProvider@inject IJSRuntime JSRuntime<div class="layout-container"> @if (!Navigation.Uri.Contains("/person/")) {<nav class="navbar"><div class="nav-container"><!-- Marca / Logo --><div class="nav-brand"><a href="/" class="brand-link"><div class="brand-logo"><img src="/pedro.jpg" alt="Everlasting Peace" /></div><div class="brand-text"><span class="brand-name">Everlasting Peace</span><span class="brand-tagline">Funerária</span></div></a></div><!-- Links principais --><div class="nav-links"><NavLink href="/" class="nav-link" match="NavLinkMatch.All"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" /><path d="M9 22V12H15V22" stroke="currentColor" stroke-width="2" /></svg> Home</NavLink><AuthorizeView Roles="Admin"><Authorized><NavLink href="/dashboard" class="nav-link"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8v-10h-8v10zm0-18v6h8V3h-8z" stroke="currentColor" stroke-width="2" /></svg> Dashboard</NavLink></Authorized></AuthorizeView><AuthorizeView Roles="Super_Admin"><Authorized><NavLink href="/dashboard" class="nav-link"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8v-10h-8v10zm0-18v6h8V3h-8z" stroke="currentColor" stroke-width="2" /></svg> Dashboard</NavLink></Authorized></AuthorizeView></div><!-- Login / Auth --><div class="nav-auth"><AuthorizeView><NotAuthorized><a href="/login" class="auth-link"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" /><path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="2" /><path d="M15 12H3" stroke="currentColor" stroke-width="2" /></svg> Login</a></NotAuthorized></AuthorizeView></div><!-- Botão Mobile --><button class="mobile-toggle" @onclick="ToggleMobileMenu" @onclick:preventDefault="false"><span></span><span></span><span></span></button></div><!-- Menu Mobile --></nav> @if (_mobileMenuOpen) {<div class="mobile-overlay" @onclick="CloseMobileMenu"></div> }<div class="mobile-menu @( _mobileMenuOpen ? "active" : "" )"><NavLink href="/" class="mobile-link" match="NavLinkMatch.All" @onclick="CloseMobileMenu"> Home</NavLink><AuthorizeView Roles="Admin"><Authorized><NavLink href="/dashboard" class="mobile-link" @onclick="CloseMobileMenu"> Dashboard</NavLink></Authorized></AuthorizeView><AuthorizeView Roles="Super_Admin"><Authorized><NavLink href="/dashboard" class="mobile-link" @onclick="CloseMobileMenu"> Dashboard</NavLink></Authorized></AuthorizeView><div class="mobile-auth"><AuthorizeView><NotAuthorized><a href="/login" class="mobile-auth-link" @onclick="CloseMobileMenu"> Login</a></NotAuthorized></AuthorizeView></div></div> }<!-- Conteúdo principal --><main class="@BackgroundClass"> @Body</main></div><style> :root { --nav-bg: #1a1a1a; --nav-border: #333; --text-light: #ffffff; --text-muted: #b8b8b8; --accent-gold: #b8a87c; --hover-bg: #2a2a2a; --shadow: 0 2px 20px rgba(0, 0, 0, 0.3); --transition: all 0.3s ease; } .layout-container { min-height: 100vh; background: #0f0f0f; } .navbar { background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); } .nav-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: 70px; position: relative; /* Add this */ } /* Marca */ .brand-link { display: flex; align-items: center; gap: 0.75rem; color: var(--text-light); text-decoration: none; } .brand-logo { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--accent-gold); } .brand-logo img { width: 100%; height: 100%; object-fit: cover; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-name { font-size: 1.1rem; font-weight: 600; } .brand-tagline { font-size: 0.75rem; color: var(--text-muted); font-style: italic; } /* Links Desktop */ .nav-links { display: flex; align-items: center; gap: 2rem; margin-left: 3rem; } .nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; color: var(--text-muted); text-decoration: none; border-radius: 6px; transition: var(--transition); } .nav-link:hover, .nav-link.active { color: var(--accent-gold); background: var(--hover-bg); } /* Login Desktop */ .auth-link { color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; transition: var(--transition); } .auth-link:hover { color: var(--text-light); background: var(--hover-bg); } /* Botão Mobile - FIXED */ .mobile-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 0.5rem; position: relative; z-index: 1000; /* High z-index */ pointer-events: auto !important; /* Force clickable */ } .mobile-toggle span { width: 22px; height: 2px; background: var(--text-light); transition: var(--transition); } /* Mobile Menu */ .mobile-menu { position: fixed; top: 70px; left: 0; right: 0; background: var(--nav-bg); border-top: 1px solid var(--nav-border); padding: 1rem 1.5rem; z-index: 99; /* Lower than toggle */ transform: translateY(-100%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; } .mobile-menu.active { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-link { display: block; padding: 1rem 0; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--nav-border); transition: var(--transition); } .mobile-link:hover { color: var(--accent-gold); } .mobile-auth { padding: 1rem 0; } .mobile-auth-link { display: block; padding: 0.75rem 0; color: var(--text-muted); text-decoration: none; transition: var(--transition); } .mobile-auth-link:hover { color: var(--text-light); } /* Overlay */ .mobile-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 98; /* Lower than menu */ } /* Responsividade */ @@media (max-width: 768px) { .nav-links, .nav-auth { display: none; } .mobile-toggle { display: flex !important; /* Force display */ position: relative; z-index: 1000; } } @@media (max-width: 480px) { .brand-text { display: none; } }</style>@code { private bool _mobileMenuOpen = true; private bool isAuthenticated; protected override async Task OnInitializedAsync() { var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync(); var user = authState.User; isAuthenticated = user.Identity?.IsAuthenticated ?? false; if (isAuthenticated) { if (!Navigation.Uri.Contains("/person")) { Navigation.NavigateTo("/dashboard"); } } else { Console.WriteLine("Nenhum utilizador autenticado."); } } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JSRuntime.InvokeVoidAsync("eval","document.addEventListener('click', function(e) { " +" if (e.target.closest('.mobile-toggle')) { " +" console.log('Mobile toggle clicked via JS'); " +" } " +"})"); } } private void ToggleMobileMenu() { Console.WriteLine($"ToggleMobileMenu called. Current state: {_mobileMenuOpen}"); _mobileMenuOpen = !_mobileMenuOpen; Console.WriteLine($"New state: {_mobileMenuOpen}"); StateHasChanged(); // Force UI update } private void CloseMobileMenu() { Console.WriteLine("CloseMobileMenu called"); _mobileMenuOpen = false; StateHasChanged(); // Force UI update } private string BackgroundClass => Navigation.Uri.Contains("/person") ? "bg-white text-black" : "bg-black text-white";}The code has some testw in the middle so it's not 100% the final version
PS: Before I added all of this the menu didn't work either, I tried to change z-index and did not work as well, and the page that this is added to has the @rendermode InteractiveServer