Blazor server .NET 8 and Blazorise

309 views Asked by At

I have a problem with Blazorise. I started a Blazor Server project. I replaced layout files with the same from Blazorise WASM template.

It works but the sidebar is not visible (it is rendered on HTML). Someone can help me?

I post my code.

App.razor All js/css are in wwwroot\css folder and wwwroot\js folder

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link href="css/bootstrap.min.css?v=5.3.2" rel="stylesheet" />
    <link href="css/fontawesome.all.min.css?v=6.4.2" rel="stylesheet" />
    <link href="_content/Blazorise/blazorise.min.css?v=1.3.0.0" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.min.css?v=1.3.0.0" rel="stylesheet" />
    <link href="_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.css" rel="stylesheet" />
    <link rel="stylesheet" href="SM.styles.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="js/jquery.min.js?v=3.7.1"></script>
    <script src="js/bootstrap.bundle.min.js?v=5.1.3"></script>
    <script src="js/moment.min.js?v=2.2.4"></script>
    <script src="js/highcharts.min.js"></script>
    <script src="_framework/blazor.web.js"></script>
    <script src="js/blazor-interop.min.js"></script>
</body>
</html>

Routes.razor

<Blazorise.ThemeProvider Theme="@_theme">
    <Router AppAssembly="typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(Layout.MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
    <MessageProvider />
    <PageProgressProvider />
</Blazorise.ThemeProvider>

MainLayout.razor

@inherits LayoutComponentBase

<Layout Sider>
    <LayoutSider>
        <LayoutSiderContent>
            <SideMenu />
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Fixed>
            <TopMenu LayoutType="fixed-header" />
        </LayoutHeader>
        <LayoutContent Padding="Padding.Is4.OnX.Is4.FromTop">
            @Body
        </LayoutContent>
    </Layout>
</Layout>

SideMenu.razor

implements IDisposable

<Bar Breakpoint="Breakpoint.Desktop" NavigationBreakpoint="Breakpoint.Tablet" ThemeContrast="ThemeContrast.Light" Mode="BarMode.VerticalInline" CollapseMode="BarCollapseMode.Small">
    <BarToggler />
    <BarBrand>
        <BarItem>
            <BarLink To="/">
                <BarIcon IconName="_customIcon" />
                Project1
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarMenu>
        <BarStart>
                ...
        </BarStart>
        <BarEnd>
                ...
        </BarEnd>
    </BarMenu>
</Bar>
0

There are 0 answers