Taskwards.Web/Layout/MainLayout.razor - master - va1eriy/taskwards

Taskwards.Web/Layout/MainLayout.razor
111 строк4 KB
Valeriy Kokorev
feat: add bottom nav bar, stub pages and replace Home with TimerPage
28 фев 2026, 16:26
28 фев 2026, 16:26ec5ebc7
@inherits LayoutComponentBase
@using Taskwards.Web.Infrastructure.Theme
@inject IThemeService ThemeService

<MudThemeProvider @ref="_themeProvider" Theme="TaskwardsTheme.Theme" @bind-IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<div class="layout-root">
<MudLayout>
    <MudAppBar Elevation="0" Class="appbar-bordered">
        <MudIconButton Icon="@Icons.Material.Filled.Menu"
                       Color="Color.Inherit"
                       Edge="Edge.Start"
                       OnClick="ToggleDrawer"
                       Class="d-none d-md-flex mr-4" />
        <MudText Typo="Typo.h6" Class="brand-title">Taskwards</MudText>
        <MudSpacer />
        <MudIconButton Icon="@(_isDarkMode ? Icons.Material.Filled.LightMode : Icons.Material.Filled.DarkMode)"
                       Color="Color.Inherit"
                       OnClick="ToggleTheme"
                       Class="d-md-none" />
    </MudAppBar>

    <MudDrawer @bind-Open="_drawerOpen"
               Variant="DrawerVariant.Mini"
               ClipMode="DrawerClipMode.Always"
               OpenMiniOnHover="false"
               Class="d-none d-md-flex">
        <div class="d-flex flex-column drawer-content">
            <MudNavMenu>
                <MudNavLink Href="/" Match="NavLinkMatch.All"
                            Icon="@Icons.Material.Filled.Timer">Таймер</MudNavLink>
                <MudNavLink Href="/rewards" Match="NavLinkMatch.Prefix"
                            Icon="@Icons.Material.Filled.EmojiEvents">Награды</MudNavLink>
                <MudNavLink Href="/history" Match="NavLinkMatch.Prefix"
                            Icon="@Icons.Material.Filled.History">История</MudNavLink>
                <MudNavLink Href="/dashboard" Match="NavLinkMatch.Prefix"
                            Icon="@Icons.Material.Filled.Dashboard">Дашборд</MudNavLink>
            </MudNavMenu>
            <MudSpacer />
            <div class="pa-2 d-flex justify-center">
                <MudIconButton Icon="@(_isDarkMode ? Icons.Material.Filled.LightMode : Icons.Material.Filled.DarkMode)"
                               Color="Color.Inherit"
                               OnClick="ToggleTheme" />
            </div>
        </div>
    </MudDrawer>

    <MudMainContent>
        <div class="main-container pa-4">
            @Body
        </div>
    </MudMainContent>

    <Taskwards.Web.Layout.Components.BottomNavBar />
</MudLayout>
</div>

@code {
    private MudThemeProvider _themeProvider = null!;
    private bool _isDarkMode;
    private bool _drawerOpen = true;
    private bool _userHasSetTheme;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var darkMode = await ThemeService.GetDarkModeAsync();
            if (darkMode.HasValue)
            {
                _isDarkMode = darkMode.Value;
                _userHasSetTheme = true;
            }
            else
            {
                _isDarkMode = await _themeProvider.GetSystemDarkModeAsync();
            }

            _drawerOpen = await ThemeService.GetDrawerOpenAsync();

            await _themeProvider.WatchSystemDarkModeAsync(OnSystemDarkModeChanged);
            StateHasChanged();
        }
    }

    private Task OnSystemDarkModeChanged(bool isDark)
    {
        if (!_userHasSetTheme)
        {
            _isDarkMode = isDark;
            StateHasChanged();
        }
        return Task.CompletedTask;
    }

    private async Task ToggleTheme()
    {
        _isDarkMode = !_isDarkMode;
        _userHasSetTheme = true;
        await ThemeService.SetDarkModeAsync(_isDarkMode);
    }

    private async Task ToggleDrawer()
    {
        _drawerOpen = !_drawerOpen;
        await ThemeService.SetDrawerOpenAsync(_drawerOpen);
    }
}