<Bar Breakpoint="Breakpoint.Desktop" NavigationBreakpoint="Breakpoint.Tablet" ThemeContrast="ThemeContrast.Dark"
     Mode="BarMode.VerticalInline" CollapseMode="BarCollapseMode.Small">
    <BarToggler TextColor="TextColor.Primary" />
    <BarBrand>
        <BarItem>
            <BarLink To="">
                <BarIcon IconName="customIcon" />
                Elektrifikatsiya
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="/" TextColor="TextColor.White">
                    <BarIcon Style="color:white" IconName="IconName.Dashboard" />
                    Dashboard
                </BarLink>
			</BarItem>
            <BarItem>
                <BarLink To="/admin" TextColor="TextColor.White">
                    <BarIcon Style="color:white" IconName="IconName.ShieldAlt" />
                    Admin
                </BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="/settings" TextColor="TextColor.White">
                    <BarIcon Style="color:white" IconName="IconName.Wrench" />
                    Settings
                </BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="/addplug" TextColor="TextColor.White">
                    <BarIcon Style="color:white" IconName="IconName.Plug" />
                    Add Plug
                </BarLink>
            </BarItem>
        </BarStart>
        <BarEnd>
            <BarItem>
                <BarLink To="/login" TextColor="TextColor.White">
                    <BarIcon Style="color:white" IconName="IconName.Running" />
                    Logout
                </BarLink>
            </BarItem>
        </BarEnd>
    </BarMenu>
</Bar>
@code {
    private bool pagesBarVisible = true;
    RenderFragment customIcon =@<img src="/logo.png" style="width:32px; height: 32px" />;
}