Forum Discussion
Convert the standard Blazor navigation menu to a collapsible icon menu
H3ALY, this looks great and I got a copy from your github and copied over the relevant content to my Blazor CORE 9 project. Sad to say, the navbar does not render other than the 'Blazor Server' title at the top.
When I run your solution out of the box, it's fine - exactly as yours should show with all the icons and links on the left side. I was hoping this would work on Blazor 9 but so far I can't figure out why it won't.
Ah, it looks it was my App.razor setup. I had placed your script in the wrong place. This works perfectly:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="SFIWebPortal.styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link rel="icon" type="image/png" href="favicon.png" />
<script src="js/timezone.js"></script>
<HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
<Routes @rendermode="InteractiveServer" />
<script src="_framework/blazor.web.js"></script>
<script>
window.setResizeCallback = (dotNetHelper) => {
const resizeCallback = () => {
const isBelowThreshold = window.innerWidth < 642;
dotNetHelper.invokeMethodAsync('OnResize', isBelowThreshold);
};window.addEventListener('resize', resizeCallback);
resizeCallback();
};
</script>
<script src="_framework/blazor.web.js"></script>
</body>
</html>