DodoSSH/src/DodoSSH.Client.App/Views/SettingsNav.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:DodoSSH.Client.Shell.ViewModels"
             x:Class="DodoSSH.Client.App.Views.SettingsNav"
             x:DataType="vm:MainWindowViewModel">

  <!--
    v5c: settings mode's own 340px rail — SettingsNav.dc.html. Two sections rather than the design's three:
    the design's ORGANISATION section and its one row (Organisation settings) are refused outright — no
    organisation entity exists anywhere in this product; a Team is the membership list behind a shared vault,
    and there is exactly one tenant per deployment. See design-notes/v5c-fidelity-notes.md.

    v5c-2: Groups and Tags joined CUSTOMIZE, after Preferences — the design's own order (Security,
    Preferences, Groups, Tags). Each opens a real management page over the existing group and tag commands;
    see SettingsGroupsPage.axaml and SettingsTagsPage.axaml.

    Button.nav and its two TextBlock helpers are the exact rows NavRail.axaml already draws at 255px — height
    35, radius 8, a 19px glyph and a 10.5 semibold label, accent fill with white text when active. Reused
    rather than restyled: this design states the same three numbers for this rail's own rows, and a second
    copy of one style is how the two rails drift apart the day only one of them is touched again.
  -->

  <Border Width="340" Background="{StaticResource DeepChrome}"
          BorderBrush="{StaticResource Border}" BorderThickness="0,0,1,0">
    <DockPanel LastChildFill="False" Margin="18,24">

      <StackPanel DockPanel.Dock="Top" Spacing="8">

        <TextBlock Text="SETTINGS" Margin="11,0,0,6" FontSize="10" FontWeight="SemiBold"
                   LetterSpacing="1.5" Foreground="{StaticResource TextGhost}" />

        <Button Classes="flat nav" Classes.active="{Binding IsSettingsGeneralPage}"
                Command="{Binding EnterSettingsCommand}"
                CommandParameter="{x:Static vm:SettingsPage.General}">
          <StackPanel Orientation="Horizontal" Spacing="10">
            <TextBlock Classes="navicon" Text="&#xE8B8;" />
            <TextBlock Classes="navlabel" Text="General" />
          </StackPanel>
        </Button>

        <Button Classes="flat nav" Classes.active="{Binding IsSettingsVaultsPage}"
                Command="{Binding EnterSettingsCommand}"
                CommandParameter="{x:Static vm:SettingsPage.Vaults}">
          <StackPanel Orientation="Horizontal" Spacing="10">
            <TextBlock Classes="navicon" Text="&#xE84F;" />
            <TextBlock Classes="navlabel" Text="Vaults" />
          </StackPanel>
        </Button>

        <Button Classes="flat nav" Classes.active="{Binding IsSettingsAccountPage}"
                Command="{Binding EnterSettingsCommand}"
                CommandParameter="{x:Static vm:SettingsPage.Account}">
          <StackPanel Orientation="Horizontal" Spacing="10">
            <TextBlock Classes="navicon" Text="&#xE7FD;" />
            <TextBlock Classes="navlabel" Text="Account" />
          </StackPanel>
        </Button>

        <TextBlock Text="CUSTOMIZE" Margin="11,14,0,6" FontSize="10" FontWeight="SemiBold"
                   LetterSpacing="1.5" Foreground="{StaticResource TextGhost}" />

        <Button Classes="flat nav" Classes.active="{Binding IsSettingsSecurityPage}"
                Command="{Binding EnterSettingsCommand}"
                CommandParameter="{x:Static vm:SettingsPage.Security}">
          <StackPanel Orientation="Horizontal" Spacing="10">
            <TextBlock Classes="navicon" Text="&#xE9E0;" />
            <TextBlock Classes="navlabel" Text="Security" />
          </StackPanel>
        </Button>

        <Button Classes="flat nav" Classes.active="{Binding IsSettingsPreferencesPage}"
                Command="{Binding EnterSettingsCommand}"
                CommandParameter="{x:Static vm:SettingsPage.Preferences}">
          <StackPanel Orientation="Horizontal" Spacing="10">
            <TextBlock Classes="navicon" Text="&#xE429;" />
            <TextBlock Classes="navlabel" Text="Preferences" />
          </StackPanel>
        </Button>

        <Button Classes="flat nav" Classes.active="{Binding IsSettingsGroupsPage}"
                Command="{Binding EnterSettingsCommand}"
                CommandParameter="{x:Static vm:SettingsPage.Groups}">
          <StackPanel Orientation="Horizontal" Spacing="10">
            <TextBlock Classes="navicon" Text="&#xE7EF;" />
            <TextBlock Classes="navlabel" Text="Groups" />
          </StackPanel>
        </Button>

        <Button Classes="flat nav" Classes.active="{Binding IsSettingsTagsPage}"
                Command="{Binding EnterSettingsCommand}"
                CommandParameter="{x:Static vm:SettingsPage.Tags}">
          <StackPanel Orientation="Horizontal" Spacing="10">
            <TextBlock Classes="navicon" Text="&#xE54E;" />
            <TextBlock Classes="navlabel" Text="Tags" />
          </StackPanel>
        </Button>

      </StackPanel>

      <!--
        Wired to the same command the rail's own user popover Logout row calls — see
        MainWindowViewModel.SignOutFromPopover, which now lands on the Account page rather than on the old
        bare Preferences screen, so there is exactly one place the confirmation card is drawn.
      -->
      <Button DockPanel.Dock="Bottom" Classes="flat nav"
              Command="{Binding SignOutFromPopoverCommand}">
        <StackPanel Orientation="Horizontal" Spacing="10">
          <TextBlock Classes="navicon" FontSize="17" Text="&#xE9BA;" />
          <TextBlock Classes="navlabel" Text="Logout" />
        </StackPanel>
      </Button>

    </DockPanel>
  </Border>

</UserControl>