I'm using the Blazorise component library, and I'd like to make a vertical sidebar similar to the way it's done here: https://www.matblazor.com/, where it's always collapsed unless you click the toggler. It seems simple enough but I just can't figure it out.
Of course I'm using the Layout component with the Sider and the Bar component, but I can't get the BarToggler to always show and control the sidebar properly.
To make BarToggler always visible you can set the CSS display property to inline-flex. If you are using bootstrap, you can also make the bar menu items never collapse by adding the navbar-expand css class. Example:
@*Header bar*@
<Bar Class="navbar-expand"
Background="Background.Light"
ThemeContrast="ThemeContrast.Light">
<BarToggler Display="Display.InlineFlex" Border="Border.Is0" Clicked="ToggleSidebar" />
<BarBrand>
Brandname
</BarBrand>
<BarMenu>
<BarStart>
<BarItem>
<BarLink To="#home">Home</BarLink>
</BarItem>
<BarItem>
<BarLink To="#docs">Documentation</BarLink>
</BarItem>
<BarItem>
<BarDropdown>
<BarDropdownToggle>Dropdown</BarDropdownToggle>
<BarDropdownMenu>
<BarDropdownItem>Action</BarDropdownItem>
<BarDropdownDivider />
<BarDropdownItem>Another action</BarDropdownItem>
</BarDropdownMenu>
</BarDropdown>
</BarItem>
</BarStart>
<BarEnd>
<BarItem>
<Button Color="Color.Primary">Sign up</Button>
<Button Color="Color.Secondary">Log in</Button>
</BarItem>
</BarEnd>
</BarMenu>
</Bar>
@*Sider bar*@
<Bar Mode="BarMode.VerticalInline"
Breakpoint="Breakpoint.Desktop"
Background="Background.Primary"
ThemeContrast="ThemeContrast.Dark"
@bind-Visible="_sidebarVisible">
...
</Bar>
@code {
private bool _sidebarVisible;
private void ToggleSidebar()
{
_sidebarVisible = !_sidebarVisible;
}
}
Use the following layout and place header bar inside <LayoutHeader> and sider bar inside <LayoutSiderContent> to achieve a layout similar to the matblazor page.
<Layout>
<LayoutHeader>
Header
</LayoutHeader>
<Layout Sider>
<LayoutSider>
<LayoutSiderContent>
Sider
</LayoutSiderContent>
</LayoutSider>
<Layout>
<LayoutContent>
Content
</LayoutContent>
</Layout>
</Layout>
</Layout>
