AI-Studio/app/MindWork AI Studio/Layout/MainLayout.razor

@using AIStudio.Settings.DataModel
@using AIStudio.Components

@using Microsoft.AspNetCore.Components.Routing
@using MudBlazor

@inherits LayoutComponentBase

<MudPaper Height="calc(100vh);" Elevation="0">
    <MudLayout>
        @if (!this.performingUpdate)
        {
            @if (this.SettingsManager.ConfigurationData.App.NavigationBehavior is NavBehavior.EXPAND_ON_HOVER or NavBehavior.ALWAYS_EXPAND)
            {
                <MudDrawerContainer Class="mud-height-full absolute">
                    <MudDrawer @bind-Open="@this.navBarOpen" MiniWidth="@NAVBAR_COLLAPSED_WIDTH" Width="@NAVBAR_EXPANDED_WIDTH" Elevation="1" Fixed="@true" Variant="@DrawerVariant.Mini" OpenMiniOnHover="@(this.SettingsManager.ConfigurationData.App.NavigationBehavior is NavBehavior.EXPAND_ON_HOVER)" Color="Color.Default">
                        <MudNavMenu>
                            @foreach (var navBarItem in this.navItems)
                            {
                                    <MudNavLink Href="@navBarItem.Path" Match="@(navBarItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navBarItem.Icon" Style="@navBarItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color">
                                    @navBarItem.Name
                                </MudNavLink>
                            }
                        </MudNavMenu>
                        
                        <MudSpacer/>
                        
                        @* The bottom area carries the gap to the window edge once, for whichever of its items are shown: *@
                        <MudStack Spacing="0" Class="pb-2">
                            @if (this.showEmbeddingStatusIcon)
                            {
                                <MudNavMenu>
                                    <MudTooltip Text="@this.EmbeddingNavigationTooltip" Placement="Placement.Right">
                                        <MudNavLink Href="@this.embeddingItem.Path" Match="@(this.embeddingItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@this.embeddingItem.Icon" Style="@this.embeddingItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color">
                                            @this.embeddingItem.Name
                                        </MudNavLink>
                                    </MudTooltip>
                                </MudNavMenu>
                            }
                            <VoiceRecorder />
                        </MudStack>
                    </MudDrawer>
                </MudDrawerContainer>
            }
            else
            {
                <MudPaper Width="4em" Class="mud-height-full absolute" Style="display: flex; flex-direction: column;">
                    <MudNavMenu>
                        @foreach (var navBarItem in this.navItems)
                        {
                            if (this.SettingsManager.ConfigurationData.App.NavigationBehavior is NavBehavior.NEVER_EXPAND_USE_TOOLTIPS)
                            {
                                <MudTooltip Text="@navBarItem.Name" Placement="Placement.Right">
                                    <MudNavLink Href="@navBarItem.Path" Match="@(navBarItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navBarItem.Icon" Style="@navBarItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color"/>
                                </MudTooltip>
                            }
                            else
                            {
                                <MudNavLink Href="@navBarItem.Path" Match="@(navBarItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navBarItem.Icon" Style="@navBarItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color"/>
                            }
                        }
                    </MudNavMenu>

                    <MudSpacer/>
                    
                    @* The bottom area carries the gap to the window edge once, for whichever of its items are shown: *@
                    <MudStack Spacing="0" Class="pb-2">
                        @if (this.showEmbeddingStatusIcon)
                        {
                            <MudNavMenu>
                                @if (this.SettingsManager.ConfigurationData.App.NavigationBehavior is NavBehavior.NEVER_EXPAND_USE_TOOLTIPS)
                                {
                                    <MudTooltip Text="@this.EmbeddingNavigationTooltip" Placement="Placement.Right">
                                        <MudNavLink Href="@this.embeddingItem.Path" Match="@(this.embeddingItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@this.embeddingItem.Icon" Style="@this.embeddingItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color"/>
                                    </MudTooltip>
                                }
                                else
                                {
                                    <MudNavLink Href="@this.embeddingItem.Path" Match="@(this.embeddingItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@this.embeddingItem.Icon" Style="@this.embeddingItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color"/>
                                }
                            </MudNavMenu>
                        }
                        <VoiceRecorder />
                    </MudStack>
                </MudPaper>
            }
        }

        <MudMainContent Class="mud-height-full pt-1" Style="@this.PaddingLeft">
            <MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="mud-height-full" Style="margin-left: 5em; width: calc(100% - 5em);">
                @if (!this.performingUpdate)
                {
                    @this.Body
                }
                
                <MudOverlay Visible="@this.performingUpdate" DarkBackground="@true" LockScroll="@true">
                    <MudText Typo="Typo.h3">@TA("Please wait for the update to complete...")</MudText>
                    <MudProgressLinear Color="Color.Primary" Indeterminate="@true" Size="Size.Large" Rounded="@true"/>
                </MudOverlay>
            </MudContainer>
        </MudMainContent>
    </MudLayout>
</MudPaper>

<MudMarkdownThemeProvider @ref="@this.themeProvider" Theme="@this.ColorTheme" IsDarkMode="@this.useDarkMode" ObserveSystemDarkModeChange="@this.FollowSystemTheme" />

@if (this.useDarkMode)
{
    @*
        Lucide draws its icons with thin strokes, and on a dark background they almost vanish in the red of errors,
        such as the trash icons. In dark mode, these icons take the lighter red of the palette, as the heart of the
        supporters does:
    *@
    <style>
        .mud-error-text .lucide, .lucide.mud-error-text { color: var(--mud-palette-error-lighten) !important; }
    </style>
}