TL;DR
目次
検証環境
- .NET Core 6.0
- Blazor Server
- Blazor WebAssembly
内容
Blazor Server アプリまたは Blazor WebAssembly アプリで新しいプロジェクトを作成する。
MainLayout.razor.css
下記該当箇所をコメントアウトする
/*@media (max-width: 640.98px) {*/ .top-row:not(.auth) { display: none; } .top-row.auth { justify-content: space-between; } .top-row ::deep a, .top-row ::deep .btn-link { margin-left: 0; } /*}*/ /*@media (min-width: 641px) { .page { flex-direction: row; } .sidebar { width: 250px; height: 100vh; position: sticky; top: 0; } .top-row { position: sticky; top: 0; z-index: 1; } .top-row.auth ::deep a:first-child { flex: 1; text-align: right; width: 0; } .top-row, article { padding-left: 2rem !important; padding-right: 1.5rem !important; } } */
NavMenu.razor.css
下記該当箇所をコメントアウトする
/*@media (min-width: 641px) { .navbar-toggler { display: none; } .collapse {*/ /* Never collapse the sidebar for wide screens */ /*display: block; } }*/
表示
PCのブラウザでの表示は以下の通り。