@inherits LayoutComponentBase
@inject IJSRuntime JS
@using Syncfusion.Blazor.Navigations
<SfSidebar ID="Sidebar" Type="SidebarType.Push" Width="300px" DockSize="65px" EnableDock="true" @ref="Sidebar" @bind-IsOpen="SidebarToggle">
    <div class="sidebar" style="position:fixed;z-index:1200">
        <div class="topnav navbar navbar-dark">
            <button class="navbar-toggler" @onclick="ToggleNavMenu" />
            <a class="navbar-brand" href=""><span class="displayText" style="margin-right:30px">SyncfusionBlazorApp1</span></a>
        </div>
        <div @onmouseover="MouseIn" @onmouseout="MouseOut">
            <NavMenu />
        </div>
    </div>
</SfSidebar>

<div class="main">
   <div class="top-row px-4" style="z-index:1111;padding-top:0px">
        <a href="https://www.syncfusion.com/blazor-components/" target="_blank">Blazor Components</a>
        <a href="https://blazor.syncfusion.com/documentation/" target="_blank">User Guide</a>
        <a href="http://blazor.syncfusion.com/" target="_blank">View Demos</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>
<style>
    .sidebar {
        width: 300px;
        min-width: 300px;
    }

    .navbar-toggler {
        display: inline-block;
        border: none;
        width: 24px;
        height: 24px;
        margin-left: 30px;
        background-image: url('images/ToggleButton.png');
        background-color: #05163C;
        transform: scale(0.75);
        transform-origin: left;
        color: #ffffff;
    }


    /* Content area styles */
    .title {
        font-size: 20px;
    }

    /* Sidebar styles */
    .e-sidebar .e-icons::before {
        font-size: 25px;
    }
    .e-sidebar:hover .e-open{
         display:inline-block;
    }
    .e-sidebar:hover .e-close {
        display: none;
    }
    /* dockbar icon Style */
    .e-sidebar .home::before {
        content: '\e102';
    }

    .e-sidebar .profile::before {
        content: '\e10c';
    }
    .e-sidebar .info::before {
        content: '\e11b';
    }

    .e-sidebar .settings::before {
        content: '\e10b';
    }

    .e-sidebar .expand::before,
    .e-sidebar.e-right.e-open .expand::before {
        content: '\e10f';
    }

    .e-sidebar.e-open .expand::before,
    .e-sidebar.e-right .expand::before {
        content: '\e10e';
    }

    /* end of dockbar icon Style */

    .e-sidebar.e-dock.e-close span.e-text {
        display: none;
    }

    .e-sidebar.e-dock.e-close .navbar-toggler {
        margin-left: 21px;
    }

    .e-sidebar.e-dock.e-close .nav.flex-column {
        margin-left: -8px;
    }

    .e-sidebar.e-dock.e-close .displayText {
        display: none;
    }

    .e-sidebar.e-dock.e-close .nav-item.px-3 {
        width: 80px;
    }

    .e-sidebar.e-dock.e-close .separator {
        border: 1px solid #FFFFFF;
        opacity: 0.14;
        width: 45px;
        margin: 1rem;
        margin-top: 0px;
        margin-left: 0.5rem;
    }

    .e-sidebar.e-dock.e-close .oi.oi-home {
        margin-left: -1px;
    }

    .e-sidebar.e-dock.e-close .syncfusion-blazor-icons {
        margin-left: -1px;
    }

    .e-sidebar.e-dock.e-open span.e-text {
        display: inline-block;
    }

    .e-sidebar li {
        list-style-type: none;
        cursor: pointer;
    }

    .e-sidebar ul {
        padding: 0px;
    }


    .e-sidebar span.e-icons {
        color: #c0c2c5;
        line-height: 2
    }

    .e-open .e-icons {
        margin-right: 16px;
    }

    .e-open .e-text {
        overflow: hidden;
        font-size: 15px;
    }

    .sidebar-item {
        text-align: center;
        border-bottom: 1px #e5e5e58a solid;
    }

    .e-sidebar.e-open .sidebar-item {
        text-align: left;
        padding-left: 15px;
        color: #c0c2c5;
    }

    .e-sidebar {
        background: #2d323e;
        overflow: hidden;
    }

    @@font-face {
        font-family: 'e-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64, ) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    /* end of sidebar styles */
</style>

@code
{
    SfSidebar Sidebar; 
	public bool SidebarToggle = false; 
	public bool SidebarToggleFixed = false; 
	public void ToggleNavMenu() 
    { 
		SidebarToggle = !SidebarToggle; 
		SidebarToggleFixed = !SidebarToggleFixed; 
	} 
	public async Task MouseIn(MouseEventArgs args) 
	{ 
		var isSidebar = await JS.InvokeAsync<bool>("isSidebar", args.ClientX, args.ClientY); 
		if (!SidebarToggle && isSidebar) 
		{ 
			SidebarToggle = true; 
		} 
	} 
	public async Task MouseOut(MouseEventArgs args) 
	{ 
		var isSidebar = await JS.InvokeAsync<bool>("isSidebar", args.ClientX, args.ClientY); 
		if (SidebarToggle && !isSidebar) 
		{ 
			if(!SidebarToggleFixed) 
			{ 
				SidebarToggle = false; 
			} 
		} 
	}
}
