Blazorise: Sidebar under header

[imtrobin]

Hi the current sidebar is on the left side. Is it able to make the header on top always like

https://www.matblazor.com/

[stsrki]

It can be done with just a different structure of Layout and it's sub-components. See https://blazorise.com/docs/components/layout/

You can copy the sample from demo app and then move LayoutSider to where you need it.

[MitchellNZ]

I was trying to explore the setup for this.

The way the Layout components are designed, the following structure should allow you to achieve this:

<Layout>
    <LayoutHeader Fixed="true">
        <Bar>...</Bar>
    </LayoutHeader>
    <Layout Sider="true">
        <LayoutSider>
            <LayoutSiderContent>
                <Bar Mode="BarMode.VerticalInline">...</Bar>
            </LayoutSiderContent>
        </LayoutSider>
        <Layout>
            <LayoutContent>
                @Body
            </LayoutContent>
        </Layout>
    </Layout>
</Layout>

However, it has its own problems due to the height: 100vh for the Sider components.

@stsrki I think this is a bug and I'm happy to look into it further.

[stsrki]

@MitchellNZ yeah, probably wont work out of the box. If you want just open new ticket and assign it for 0.9.2.

[njannink]

Probably need to do something like calc(100vh - var(HEADER_HEIGHT_VAR)) to determine the height and top of the sidebar

[MitchellNZ]

@stsrki should we use this issue to track it, or do you want me to open a new one?

@njannink Yes you're right, I think that will work best.

As a workaround, the following code should get the job done:

<Layout>
    <LayoutHeader Fixed="true">
        <Bar Style="height: 64px;">...</Bar>
    </LayoutHeader>
    <Layout Sider="true" Style="height: calc(100vh - 64px);">
        <LayoutSider>
            <LayoutSiderContent Style="height: calc(100vh - 64px);">
                <Bar Mode="BarMode.VerticalInline" Style="height: calc(100vh - 64px);">...</Bar>
            </LayoutSiderContent>
        </LayoutSider>
        <Layout Style="height: calc(100vh - 64px);">
            <LayoutContent>
                @Body
            </LayoutContent>
        </Layout>
    </Layout>
</Layout>

However, I will be working on a fix when I get time (including adding a var(...) for header height).

[imtrobin]

great, thanks!

[imtrobin]

@MitchellNZ Just update, the workaround displays correct, but when I try to theme it, there is a black bar at bottom which is caused by the 64px offset.

[MitchellNZ]

@imtrobin thanks for the info.
Could you please show a screenshot so I can investigate when I get round to adding support for this?
Thanks!

[imtrobin]

I was using dark them with Background Transport, I changed it to white so you can see it better

[njannink]

Looks like you also need to set the top of the sidebar . Now it's only the height that has been adjusted.

[imtrobin]

I'm using this as suggested above,

<Layout>
    <LayoutHeader Fixed="true">
        <Bar Style="height: 64px;">...</Bar>
    </LayoutHeader>
    <Layout Sider="true" Style="height: calc(100vh - 64px);">
        <LayoutSider>
            <LayoutSiderContent Style="height: calc(100vh - 64px);">
                <Bar Mode="BarMode.VerticalInline" Style="height: calc(100vh - 64px);">...</Bar>
            </LayoutSiderContent>
        </LayoutSider>
        <Layout Style="height: calc(100vh - 64px);">
            <LayoutContent>
                @Body
            </LayoutContent>
        </Layout>
    </Layout>
</Layout>

[stsrki]

Have you tried setting inner layout to <Layout Style="height: 100vh;">?

[imtrobin]

Sorry, at which layout tag, the root?

[stsrki]

Inner layout

<Layout>
    <LayoutHeader Fixed="true">
        <Bar Style="height: 64px;">...</Bar>
    </LayoutHeader>
    <Layout Sider="true" Style="height: calc(100vh - 64px);">
        <LayoutSider>
            <LayoutSiderContent Style="height: calc(100vh - 64px);">
                <Bar Mode="BarMode.VerticalInline" Style="height: calc(100vh - 64px);">...</Bar>
            </LayoutSiderContent>
        </LayoutSider>
+        <Layout Style="height: 100vh;">
            <LayoutContent>
                @Body
            </LayoutContent>
        </Layout>
    </Layout>
</Layout>

[imtrobin]

[MitchellNZ]

Fixed as part of #1090.
Updated the layout documentation (wont be reflected until 0.9.2 release) to show an example.

Basically, it will work with the original structure I mentioned, no need to do any custom height calcs!

[stsrki]

I will release 0.9.2 preview soon, so it will be part of it.

[MitchellNZ]

FYI - found an issue when creating vertical Bar without BarBrand
Patched here https://github.com/stsrki/Blazorise/pull/1098

I _think_ you will only notice it if you are using the BarEnd