<UserControl
    xmlns="https://github.com/avaloniaui"
    xmlns:shared="clr-namespace:Tel.Egram.Views.Shared">
    
    <Grid
        ColumnDefinitions="*"
        RowDefinitions="48,*,48"
        Classes="NavigationContainer"
        Background="#1b2333"
        >
        
        <Button
            Classes="Profile"
            Grid.Row="0"
            >
            
            <shared:AvatarControl
                DataContext="{Binding Avatar}"
                Source="{Binding Bitmap}"
                Color="{Binding Color}"
                TextColor="{Binding TextColor}"
                Text="{Binding Label}"
                Size="32" />
            
        </Button>
        
        <TabStrip
            Grid.Row="1"
            SelectedIndex="{Binding SelectedTabIndex, Mode=TwoWay}"
            >
            <TabStrip.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </TabStrip.ItemsPanel>
                
            <TabStripItem
                Classes="NavigationTab"
                >
                <Border>
                    <Panel>
                        <Ellipse />
                        <Image Source="resm:Tel.Egram.Application.Icons.Light.Home32.png?assembly=Tel.Egram.Application" />
                    </Panel>
                </Border>
            </TabStripItem>
                
            <TabStripItem
                Classes="NavigationTab"
                >
                <Border>
                    <Panel>
                        <Ellipse />
                        <Image Source="resm:Tel.Egram.Application.Icons.Light.Person32.png?assembly=Tel.Egram.Application" />
                    </Panel>
                </Border>
            </TabStripItem>
                
            <TabStripItem
                Classes="NavigationTab"
                >
                <Border>
                    <Panel>
                        <Ellipse />
                        <Image Source="resm:Tel.Egram.Application.Icons.Light.Group32.png?assembly=Tel.Egram.Application" />
                    </Panel>
                </Border>
            </TabStripItem>
                
            <TabStripItem
                Classes="NavigationTab"
                >
                <Border>
                    <Panel>
                        <Ellipse />
                        <Image Source="resm:Tel.Egram.Application.Icons.Light.Channel32.png?assembly=Tel.Egram.Application" />
                    </Panel>
                </Border>
            </TabStripItem>
                
            <TabStripItem
                Classes="NavigationTab"
                >
                <Border>
                    <Panel>
                        <Ellipse />
                        <Image Source="resm:Tel.Egram.Application.Icons.Light.Bot32.png?assembly=Tel.Egram.Application" />
                    </Panel>
                </Border>
            </TabStripItem>
                
        </TabStrip>
        
        <Button
            Classes="Settings"
            Grid.Row="2"
            >
            <Panel>
                <Ellipse />
                <Image Source="resm:Tel.Egram.Application.Icons.Light.Settings32.png?assembly=Tel.Egram.Application" />
            </Panel>
        </Button>
        
    </Grid>
    
    <UserControl.Styles>
        
        <Style Selector="TabStrip">
            <Setter Property="Margin" Value="0" />
        </Style>
        
        <Style Selector="TabStripItem.NavigationTab">
            <Setter Property="Margin" Value="0" />
        </Style>
        
        <Style Selector="TabStripItem.NavigationTab > Border">
            <Setter Property="Width" Value="64" />
            <Setter Property="Height" Value="48" />
            <Setter Property="BorderThickness" Value="2,0,0,0" />
            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>
        
        <Style Selector="TabStripItem.NavigationTab:selected > Border">
            <Setter Property="BorderBrush" Value="#17a1e6" />
        </Style>
        
        <Style Selector="TabStripItem.NavigationTab Image">
            <Setter Property="Width" Value="14" />
            <Setter Property="Height" Value="14" />
            <Setter Property="Opacity" Value="0.5" />
        </Style>
        
        <Style Selector="TabStripItem.NavigationTab Ellipse">
            <Setter Property="Width" Value="24" />
            <Setter Property="Height" Value="24" />
            <Setter Property="Fill" Value="#435270" />
            <Setter Property="Opacity" Value="0.33" />
        </Style>
        
        <Style Selector="TabStripItem.NavigationTab:selected Image">
            <Setter Property="Opacity" Value="0.8" />
        </Style>
        
        <Style Selector="TabStripItem.NavigationTab:selected Ellipse">
            <Setter Property="Opacity" Value="1.0" />
        </Style>
        
        <Style Selector="Button.Profile">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="2,0,0,0" />
            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>
        
        <Style Selector="Button.Profile Image">
            <Setter Property="Width" Value="40" />
            <Setter Property="Height" Value="40" />
        </Style>
        
        <Style Selector="Button.Profile:pressed">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
        </Style>
        
        <Style Selector="Button.Settings">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="2,0,0,0" />
            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>
        
        <Style Selector="Button.Settings:pressed">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
        </Style>
        
        <Style Selector="Button.Settings Image">
            <Setter Property="Width" Value="14" />
            <Setter Property="Height" Value="14" />
            <Setter Property="Opacity" Value="0.5" />
        </Style>
        
        <Style Selector="Button.Settings Ellipse">
            <Setter Property="Width" Value="24" />
            <Setter Property="Height" Value="24" />
            <Setter Property="Fill" Value="#435270" />
            <Setter Property="Opacity" Value="0.33" />
        </Style>
        
    </UserControl.Styles>
    
</UserControl>