Fixes #XXXXX

This PR removes the inline JavaScript event handler from the NavMenu component in the Blazor Web App project template and replaces it with a proper ES6 module approach to improve Content Security Policy (CSP) compliance.

Problem

The current NavMenu component contains an inline onclick attribute:

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">

This inline event handler requires CSP configurations to include 'unsafe-hashes' with a specific SHA-256 hash, which goes against web security best practices. The HTML specification discourages this approach as it can lead to security vulnerabilities.

Solution

• Created NavMenu.razor.js: Added an ES6 module that properly attaches a click event listener to the navigation scrollable area
• Updated NavMenu.razor:
  • Added script module reference: <script type="module" src="@Assets["Components/Layout/NavMenu.razor.js"]"></script>
  • Added ID to target element: <div id="nav-scrollable" class="nav-scrollable">
  • Removed problematic inline onclick attribute

The JavaScript module code:

// Handle navigation menu toggle
const navScrollable = document.getElementById("nav-scrollable");
const navToggler = document.querySelector(".navbar-toggler");
if (navScrollable && navToggler) {
 navScrollable.addEventListener("click", function() {
 navToggler.click();
 });
}

Benefits

• Enhanced Security: Eliminates the need for 'unsafe-hashes' in CSP configurations
• Best Practices: Follows modern web development standards by separating JavaScript from HTML
• Consistency: Matches the pattern already used by other components like ReconnectModal.razor.js and PasskeySubmit.razor.js
• Maintainability: JavaScript logic is now in a dedicated module file

Testing

Verified that the navigation toggle functionality works correctly in both desktop and mobile responsive views. The hamburger menu opens and closes the navigation as expected, maintaining full backward compatibility.

Mobile view with hamburger menu:
Mobile Closed

Mobile view with navigation expanded:
Mobile Open

Impact

This change will help developers implement proper Content Security Policies without needing to accommodate inline event handlers, improving the overall security posture of Blazor Web applications created from the template.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.