text: ﻿@inherits LayoutComponentBase
  @implements IDisposable
  
  <DemoScriptLoader @ref="@scrollHelperFuncLoader"
                    Code="function scrollToElementTop(element) {
                          if (element.scroll)
                              element.scroll(0, 0);
                          else {
                              element.scrollTop = 0;
                              element.scrollLeft = 0;
                          }
                    }">
  </DemoScriptLoader>
  
  <nav class="logo-container p-0 navbar navbar-dark">
      <LayoutToggleButton @bind-StateCssClass="@LayoutStateCssClass" />
      <NavLink class="logo-image text-body" href="" Match="NavLinkMatch.All"/>
      <div class="demo-btn-container d-flex">
          <a class="download-btn navbar-toggler d-inline-block bg-primary text-white border-0" href="https://nuget.devexpress.com/" target="_blank" title="Obtain your NuGet feed URL">
              <span class="demo-download-icon"></span>
          </a>
          <div class="@($"bg-light text-dark d-inline-block theme-settings {ThemeSwitcherShown}")">
              <a class="nav-item nav-link" @onclick="@ToggleThemeSwitcherPanel" @onclick:preventDefault href="#">
                  <span class="demo-theme-icon"></span>
              </a>
          </div>
      </div>
  </nav>
  <div class="demo-content @LayoutStateCssClass">
      <div class="sidebar">
          <DxScrollView>
              <NavMenu />
          </DxScrollView>
      </div>
      <div @ref="@mainRef" class="main">
          <div class="content px-4">
              <CascadingValue Value="@ThemeName" Name="ThemeName">
                  @Body
              </CascadingValue>
          </div>
          <DemoFooter />
      </div>
      <ThemeSwitcher @bind-Shown="@ThemeSwitcherShown" @bind-ThemeName="@ThemeName"/>
  </div>
  <DemoFooter />
  @code {
      DemoScriptLoader scrollHelperFuncLoader;
      ElementReference mainRef;
  
      [Inject] NavigationManager NavigationManager { get; set; }
      [Inject] IJSRuntime JsRuntime { get; set; }
  
      string ThemeName { get; set; }
  
      protected override void OnInitialized()
      {
          NavigationManager.LocationChanged += OnLocationChanged;
      }
  
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          if (firstRender)
              await ScrollToMainTopIfNeeded(NavigationManager.Uri);
      }
  
      async void OnLocationChanged(object sender, LocationChangedEventArgs args)
      {
          ThemeSwitcherShown = false;
          await ScrollToMainTopIfNeeded(args.Location);
          await InvokeAsync(StateHasChanged);
      }
  
      string _layoutStateCssClass;
  
      string LayoutStateCssClass
      {
          get => _layoutStateCssClass;
          set
          {
              if (_layoutStateCssClass != value)
              {
                  _layoutStateCssClass = value;
                  ThemeSwitcherShown = false;
              }
          }
      }
  
      bool ThemeSwitcherShown { get; set; }
  
      void ToggleThemeSwitcherPanel()
      {
          ThemeSwitcherShown = !ThemeSwitcherShown;
      }
  
      async Task ScrollToMainTopIfNeeded(string uri)
      {
          if (string.IsNullOrEmpty(NavigationManager.ToAbsoluteUri(uri).Fragment.Replace("#", "")))
              await scrollHelperFuncLoader.InvokeVoidAsync("scrollToElementTop", mainRef);
      }
  
      public void Dispose() {
          NavigationManager.LocationChanged -= OnLocationChanged;
      }
  }
  