From dc838460d60151d56eede2063a996291fa666d05 Mon Sep 17 00:00:00 2001
From: ehsan amiri <ehsan.amiri.prog@gmail.com>
Date: Sun, 8 Nov 2026 18:44:47 +0330
Subject: [PATCH] feat(navbar): implement GPU-accelerated hamburger menu and
 fluid navbar animation pipeline

---
 Components/Navigation/NavbarComponent.axaml   | 172 ++++++++++++++----
 .../Navigation/NavbarComponent.axaml.cs       | 157 +++++++++++++++-
 Program.cs                                    |  75 ++++++++
 ViewModels/NavbarViewModel.cs                 |  17 +-
 Views/MainWindow.axaml.cs                     |  17 +-
 5 files changed, 400 insertions(+), 38 deletions(-)

diff --git a/Components/Navigation/NavbarComponent.axaml b/Components/Navigation/NavbarComponent.axaml
index 416a298..4f0742e 100644
--- a/Components/Navigation/NavbarComponent.axaml
+++ b/Components/Navigation/NavbarComponent.axaml
@@ -55,44 +55,130 @@
             <Setter Property="Foreground" Value="White"/>
         </Style>
 
-        <!-- Hamburger Menu Button Styling in Title Bar -->
-        <Style Selector="MenuItem.hamburger-menu-btn">
+        <!-- Hamburger Menu Toggle Button Styling -->
+        <Style Selector="Button.hamburger-btn">
             <Setter Property="Background" Value="Transparent"/>
             <Setter Property="Foreground" Value="{DynamicResource AppTextSecondaryBrush}"/>
             <Setter Property="BorderBrush" Value="{DynamicResource AppBorderBrush}"/>
             <Setter Property="BorderThickness" Value="1"/>
             <Setter Property="CornerRadius" Value="4"/>
-            <Setter Property="Padding" Value="7,4"/>
+            <Setter Property="Padding" Value="6,4"/>
             <Setter Property="Height" Value="24"/>
-            <Setter Property="MinHeight" Value="24"/>
-            <Setter Property="MinWidth" Value="28"/>
+            <Setter Property="Width" Value="28"/>
             <Setter Property="Cursor" Value="Hand"/>
             <Setter Property="FocusAdorner" Value="{x:Null}"/>
         </Style>
-        <Style Selector="MenuItem.hamburger-menu-btn:pointerover">
+        <Style Selector="Button.hamburger-btn:pointerover">
             <Setter Property="Background" Value="{DynamicResource AppToolHoverBrush}"/>
             <Setter Property="Foreground" Value="{DynamicResource AppTextPrimaryBrush}"/>
             <Setter Property="BorderBrush" Value="{DynamicResource AppAccentBrush}"/>
         </Style>
-        <Style Selector="MenuItem.hamburger-menu-btn:open">
+        <Style Selector="Button.hamburger-btn.active-menu">
             <Setter Property="Background" Value="{DynamicResource AppToolHoverBrush}"/>
-            <Setter Property="Foreground" Value="{DynamicResource AppTextPrimaryBrush}"/>
+            <Setter Property="Foreground" Value="{DynamicResource AppAccentBrush}"/>
             <Setter Property="BorderBrush" Value="{DynamicResource AppAccentBrush}"/>
         </Style>
-        <Style Selector="MenuItem.hamburger-menu-btn /template/ Border#PART_LayoutRoot">
-            <Setter Property="CornerRadius" Value="4"/>
-            <Setter Property="BorderThickness" Value="0"/>
+
+        <!-- GPU-Accelerated Hamburger Icon Transform Pipeline -->
+        <Style Selector=":is(TopLevel).gpu-mode Button.hamburger-btn PathIcon.hamburger-icon">
+            <Setter Property="RenderTransformOrigin" Value="50%,50%"/>
+            <Setter Property="Transitions">
+                <Transitions>
+                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.28" Easing="CubicEaseOut"/>
+                    <BrushTransition Property="Foreground" Duration="0:0:0.20"/>
+                </Transitions>
+            </Setter>
+        </Style>
+        <Style Selector="Button.hamburger-btn.active-menu PathIcon.hamburger-icon">
+            <Setter Property="RenderTransform" Value="rotate(90deg)"/>
+            <Setter Property="Foreground" Value="{DynamicResource AppAccentBrush}"/>
+        </Style>
+
+        <!-- Animated Navbar Menu Items Container (Closed / Base State) -->
+        <Style Selector="Border.nav-menu-bar-container">
+            <Setter Property="MaxWidth" Value="0"/>
+            <Setter Property="Opacity" Value="0.0"/>
+            <Setter Property="IsHitTestVisible" Value="False"/>
+            <Setter Property="RenderTransformOrigin" Value="0%,50%"/>
+            <Setter Property="RenderTransform" Value="translateX(-18px) scale(0.95)"/>
             <Setter Property="ClipToBounds" Value="True"/>
         </Style>
-        <Style Selector="MenuItem.hamburger-menu-btn /template/ Border#PART_Border">
+
+        <!-- Animated Navbar Menu Items Container (Open / Active State) -->
+        <Style Selector="Border.nav-menu-bar-container.menu-open">
+            <Setter Property="MaxWidth" Value="480"/>
+            <Setter Property="Opacity" Value="1.0"/>
+            <Setter Property="IsHitTestVisible" Value="True"/>
+            <Setter Property="RenderTransform" Value="translateX(0px) scale(1.0)"/>
+        </Style>
+
+        <!-- GPU-Accelerated Fluid Motion Pipeline for Navbar Menu Container (Skia DirectX 11 / ANGLE hardware pipeline) -->
+        <Style Selector=":is(TopLevel).gpu-mode Border.nav-menu-bar-container">
+            <Setter Property="Transitions">
+                <Transitions>
+                    <DoubleTransition Property="MaxWidth" Duration="0:0:0.32" Easing="CubicEaseOut"/>
+                    <DoubleTransition Property="Opacity" Duration="0:0:0.25" Easing="CubicEaseOut"/>
+                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.32" Easing="CubicEaseOut"/>
+                </Transitions>
+            </Setter>
+        </Style>
+
+        <!-- CPU Software Mode: Lightweight & Fast Transitions (0 lag on basic software rasterizer) -->
+        <Style Selector=":is(TopLevel):not(.gpu-mode) Border.nav-menu-bar-container">
+            <Setter Property="Transitions">
+                <Transitions>
+                    <DoubleTransition Property="MaxWidth" Duration="0:0:0.12" Easing="LinearEasing"/>
+                    <DoubleTransition Property="Opacity" Duration="0:0:0.10" Easing="LinearEasing"/>
+                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.12" Easing="LinearEasing"/>
+                </Transitions>
+            </Setter>
+        </Style>
+
+        <!-- Top-Level Menu Items in Navbar Strip -->
+        <Style Selector="Menu.navbar-menu-strip">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="Padding" Value="0"/>
+        </Style>
+        <Style Selector="Menu.navbar-menu-strip > MenuItem">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="Foreground" Value="{DynamicResource AppTextPrimaryBrush}"/>
+            <Setter Property="FontSize" Value="11"/>
+            <Setter Property="Padding" Value="7,3"/>
+            <Setter Property="Height" Value="24"/>
+            <Setter Property="CornerRadius" Value="4"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="FocusAdorner" Value="{x:Null}"/>
+        </Style>
+        <Style Selector="Menu.navbar-menu-strip > MenuItem:pointerover">
+            <Setter Property="Background" Value="{DynamicResource AppToolHoverBrush}"/>
+            <Setter Property="Foreground" Value="{DynamicResource AppTextPrimaryBrush}"/>
+        </Style>
+        <Style Selector="Menu.navbar-menu-strip > MenuItem:open">
             <Setter Property="Background" Value="{DynamicResource AppSurfaceBrush}"/>
-            <Setter Property="BorderBrush" Value="{DynamicResource AppBorderBrush}"/>
-            <Setter Property="BorderThickness" Value="1"/>
-            <Setter Property="CornerRadius" Value="6"/>
-            <Setter Property="BoxShadow" Value="0 8 24 0 #40000000"/>
-            <Setter Property="ClipToBounds" Value="True"/>
+            <Setter Property="Foreground" Value="{DynamicResource AppAccentBrush}"/>
+        </Style>
+
+        <!-- GPU-Accelerated Micro-Interactions on Top-Level Menu Items -->
+        <Style Selector=":is(TopLevel).gpu-mode Menu.navbar-menu-strip > MenuItem">
+            <Setter Property="RenderTransformOrigin" Value="50%,50%"/>
+            <Setter Property="Transitions">
+                <Transitions>
+                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.22" Easing="CubicEaseOut"/>
+                    <DoubleTransition Property="Opacity" Duration="0:0:0.20" Easing="CubicEaseOut"/>
+                    <BrushTransition Property="Background" Duration="0:0:0.15"/>
+                    <BrushTransition Property="Foreground" Duration="0:0:0.15"/>
+                </Transitions>
+            </Setter>
+        </Style>
+        <Style Selector=":is(TopLevel).gpu-mode Menu.navbar-menu-strip > MenuItem:pointerover">
+            <Setter Property="RenderTransform" Value="scale(1.04) translateY(-1px)"/>
+        </Style>
+        <Style Selector=":is(TopLevel).gpu-mode Menu.navbar-menu-strip > MenuItem:pressed">
+            <Setter Property="RenderTransform" Value="scale(0.96)"/>
         </Style>
-        <Style Selector="MenuItem.hamburger-menu-btn MenuItem /template/ Border#PART_Border">
+
+        <!-- Dropdown Popup Border & Shadow Styling -->
+        <Style Selector="Menu.navbar-menu-strip MenuItem /template/ Border#PART_Border">
             <Setter Property="Background" Value="{DynamicResource AppSurfaceBrush}"/>
             <Setter Property="BorderBrush" Value="{DynamicResource AppBorderBrush}"/>
             <Setter Property="BorderThickness" Value="1"/>
@@ -129,7 +215,7 @@
             PointerPressed="OnTitleBarPointerPressed">
         <Grid ColumnDefinitions="Auto, Auto, *, Auto, Auto">
             
-            <!-- 1. Left: Brand Logo, App Title & Native Menu Dropdown Strip -->
+            <!-- 1. Left: Brand Logo, App Title, Hamburger Toggle Button & GPU-Animated Navbar Menu Strip -->
             <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="4" VerticalAlignment="Center" Margin="8,0,4,0">
                 <!-- App Logo -->
                 <Border CornerRadius="4" ClipToBounds="True" Width="18" Height="18" Margin="0,0,4,0">
@@ -149,17 +235,33 @@
 
                 <Border Width="1" Height="14" Background="{DynamicResource AppBorderBrush}" Margin="2,0,4,0" VerticalAlignment="Center"/>
 
-                <!-- Unified Hamburger Application Menu (File, Edit, View, Window, Help) -->
-                <Menu Background="Transparent" FocusAdorner="{x:Null}" VerticalAlignment="Center">
-                    <MenuItem Classes="hamburger-menu-btn" FocusAdorner="{x:Null}" ToolTip.Tip="Application Menu">
-                        <MenuItem.Header>
-                            <PathIcon Data="M2 3.5h12v1.5H2zm0 3.75h12v1.5H2zm0 3.75h12v1.5H2z"
-                                      Width="12" Height="11"
-                                      Foreground="{Binding $parent[MenuItem].Foreground}" />
-                        </MenuItem.Header>
+                <!-- Hamburger Menu Toggle Button (Hardware-Accelerated Icon Motion) -->
+                <Button x:Name="HamburgerButton"
+                        Classes="hamburger-btn"
+                        Click="OnHamburgerClicked"
+                        ToolTip.Tip="{Binding GpuTooltipText}">
+                    <Panel Width="14" Height="14">
+                        <PathIcon x:Name="HamburgerIcon"
+                                  Classes="hamburger-icon"
+                                  Data="M2 3.5h12v1.5H2zm0 3.75h12v1.5H2zm0 3.75h12v1.5H2z"
+                                  Width="12" Height="11"
+                                  Foreground="{DynamicResource AppTextSecondaryBrush}" />
+                    </Panel>
+                </Button>
 
+                <!-- Animated Navbar Menu Items Container (Slides & Glides fluidly into navbar) -->
+                <Border x:Name="NavMenuContainer" 
+                        Classes="nav-menu-bar-container"
+                        ClipToBounds="True"
+                        VerticalAlignment="Center">
+                    <Menu x:Name="NavMenuBar" 
+                          Classes="navbar-menu-strip" 
+                          Background="Transparent" 
+                          FocusAdorner="{x:Null}" 
+                          VerticalAlignment="Center">
+                        
                         <!-- File Menu -->
-                        <MenuItem Header="File" FontSize="11">
+                        <MenuItem x:Name="MenuFile" Classes="nav-item nav-item-1" Header="File" FontSize="11">
                             <MenuItem.Icon>
                                 <ui:FASymbolIcon Symbol="Folder" FontSize="11" />
                             </MenuItem.Icon>
@@ -209,7 +311,7 @@
                         </MenuItem>
 
                         <!-- Edit Menu -->
-                        <MenuItem Header="Edit" FontSize="11">
+                        <MenuItem x:Name="MenuEdit" Classes="nav-item nav-item-2" Header="Edit" FontSize="11">
                             <MenuItem.Icon>
                                 <ui:FASymbolIcon Symbol="Edit" FontSize="11" />
                             </MenuItem.Icon>
@@ -222,7 +324,7 @@
                         </MenuItem>
 
                         <!-- Database Management & Tools Menu -->
-                        <MenuItem Header="Database" FontSize="11">
+                        <MenuItem x:Name="MenuDatabase" Classes="nav-item nav-item-3" Header="Database" FontSize="11">
                             <MenuItem.Icon>
                                 <ui:FASymbolIcon Symbol="Folder" FontSize="11" Foreground="{DynamicResource AppAccentBrush}"/>
                             </MenuItem.Icon>
@@ -315,7 +417,7 @@
                         </MenuItem>
 
                         <!-- View Menu -->
-                        <MenuItem Header="View" FontSize="11">
+                        <MenuItem x:Name="MenuView" Classes="nav-item nav-item-4" Header="View" FontSize="11">
                             <MenuItem.Icon>
                                 <ui:FASymbolIcon Symbol="FullScreen" FontSize="11" />
                             </MenuItem.Icon>
@@ -346,7 +448,7 @@
                         </MenuItem>
 
                         <!-- Window / Workspace Menu -->
-                        <MenuItem Header="Window" FontSize="11">
+                        <MenuItem x:Name="MenuWindow" Classes="nav-item nav-item-5" Header="Window" FontSize="11">
                             <MenuItem.Icon>
                                 <ui:FASymbolIcon Symbol="Globe" FontSize="11" />
                             </MenuItem.Icon>
@@ -384,15 +486,15 @@
                         </MenuItem>
 
                         <!-- Help Menu -->
-                        <MenuItem Header="Help" FontSize="11">
+                        <MenuItem x:Name="MenuHelp" Classes="nav-item nav-item-6" Header="Help" FontSize="11">
                             <MenuItem.Icon>
                                 <ui:FASymbolIcon Symbol="Important" FontSize="11" />
                             </MenuItem.Icon>
                             <MenuItem Header="Documentation" />
                             <MenuItem Header="About Quell" />
                         </MenuItem>
-                    </MenuItem>
-                </Menu>
+                    </Menu>
+                </Border>
             </StackPanel>
 
             <!-- 2. Center-Left: Core Action Tools Strip -->
diff --git a/Components/Navigation/NavbarComponent.axaml.cs b/Components/Navigation/NavbarComponent.axaml.cs
index 904474d..17d08c1 100644
--- a/Components/Navigation/NavbarComponent.axaml.cs
+++ b/Components/Navigation/NavbarComponent.axaml.cs
@@ -1,19 +1,173 @@
-using System;
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Avalonia.Media.Transformation;
 using Avalonia.VisualTree;
+using Quell.Services;
+using Quell.ViewModels;
 
 namespace Quell.Components;
 
 public partial class NavbarComponent : UserControl
 {
     private Window? _hostWindow;
+    private NavbarViewModel? _viewModel;
+    private CancellationTokenSource? _cascadeCts;
 
     public NavbarComponent()
     {
         InitializeComponent();
+        DataContextChanged += OnDataContextChanged;
+        UpdateGpuModeClass();
+        HardwareGraphicsService.Instance.RenderingModeChanged += (s, e) => 
+            Avalonia.Threading.Dispatcher.UIThread.Post(UpdateGpuModeClass);
+    }
+
+    public void UpdateGpuModeClass()
+    {
+        bool isGpu = HardwareGraphicsService.Instance.IsGpuMotionActive;
+        if (isGpu)
+        {
+            if (!Classes.Contains("gpu-mode"))
+            {
+                Classes.Add("gpu-mode");
+            }
+        }
+        else
+        {
+            Classes.Remove("gpu-mode");
+        }
+    }
+
+    private void OnDataContextChanged(object? sender, EventArgs e)
+    {
+        if (_viewModel != null)
+        {
+            _viewModel.PropertyChanged -= OnViewModelPropertyChanged;
+        }
+        _viewModel = DataContext as NavbarViewModel;
+        if (_viewModel != null)
+        {
+            _viewModel.PropertyChanged += OnViewModelPropertyChanged;
+            ApplyNavMenuVisualState(_viewModel.IsNavMenuOpen);
+        }
+    }
+
+    private void OnViewModelPropertyChanged(object? sender, PropertyChangedEventArgs e)
+    {
+        if (e.PropertyName == nameof(NavbarViewModel.IsNavMenuOpen) && _viewModel != null)
+        {
+            ApplyNavMenuVisualState(_viewModel.IsNavMenuOpen);
+        }
+    }
+
+    public void OnHamburgerClicked(object? sender, RoutedEventArgs e)
+    {
+        if (_viewModel != null)
+        {
+            _viewModel.IsNavMenuOpen = !_viewModel.IsNavMenuOpen;
+        }
+        else
+        {
+            var container = this.FindControl<Border>("NavMenuContainer");
+            bool isOpen = container != null && container.Classes.Contains("menu-open");
+            ApplyNavMenuVisualState(!isOpen);
+        }
+    }
+
+    public async void ApplyNavMenuVisualState(bool isOpen)
+    {
+        _cascadeCts?.Cancel();
+        _cascadeCts = new CancellationTokenSource();
+        var token = _cascadeCts.Token;
+
+        var container = this.FindControl<Border>("NavMenuContainer");
+        var hamburger = this.FindControl<Button>("HamburgerButton");
+        var menuBar = this.FindControl<Menu>("NavMenuBar");
+
+        if (container == null || hamburger == null) return;
+
+        bool isGpu = HardwareGraphicsService.Instance.IsGpuMotionActive;
+
+        if (isOpen)
+        {
+            hamburger.Classes.Add("active-menu");
+            container.Classes.Add("menu-open");
+
+            if (isGpu && menuBar != null)
+            {
+                // GPU-Accelerated Staggered Cascade Motion Pipeline:
+                // Smoothly cascades each top-level MenuItem into the navbar
+                var items = GetTopLevelMenuItems(menuBar);
+                for (int i = 0; i < items.Count; i++)
+                {
+                    var item = items[i];
+                    item.Opacity = 0.0;
+                    item.RenderTransform = TransformOperations.Parse("translateX(-14px) scale(0.92)");
+                }
+
+                for (int i = 0; i < items.Count; i++)
+                {
+                    if (token.IsCancellationRequested) break;
+                    var item = items[i];
+                    item.Opacity = 1.0;
+                    item.RenderTransform = TransformOperations.Parse("translateX(0px) scale(1.0)");
+                    try
+                    {
+                        await Task.Delay(24, token);
+                    }
+                    catch (TaskCanceledException)
+                    {
+                        break;
+                    }
+                }
+            }
+            else if (menuBar != null)
+            {
+                // CPU Mode: Lightweight immediate display without multi-step delay loops
+                var items = GetTopLevelMenuItems(menuBar);
+                foreach (var item in items)
+                {
+                    item.Opacity = 1.0;
+                    item.RenderTransform = null;
+                }
+            }
+        }
+        else
+        {
+            hamburger.Classes.Remove("active-menu");
+            container.Classes.Remove("menu-open");
+
+            if (menuBar != null)
+            {
+                var items = GetTopLevelMenuItems(menuBar);
+                foreach (var item in items)
+                {
+                    item.Opacity = 1.0;
+                    item.RenderTransform = null;
+                }
+            }
+        }
+    }
+
+    private List<MenuItem> GetTopLevelMenuItems(Menu menuBar)
+    {
+        var list = new List<MenuItem>();
+        foreach (var item in menuBar.Items)
+        {
+            if (item is MenuItem mi)
+            {
+                list.Add(mi);
+            }
+        }
+        return list;
     }
 
     private Window? GetHostWindow() => _hostWindow ?? VisualRoot as Window ?? TopLevel.GetTopLevel(this) as Window;
@@ -21,6 +175,7 @@ public NavbarComponent()
     protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
     {
         base.OnAttachedToVisualTree(e);
+        UpdateGpuModeClass();
         if (TopLevel.GetTopLevel(this) is Window win)
         {
             _hostWindow = win;
diff --git a/Program.cs b/Program.cs
index a3c39e3..8c7919b 100644
--- a/Program.cs
+++ b/Program.cs
@@ -173,6 +173,81 @@ public static async Task Main(string[] args)
             vm.ConnectModal.CloseCommand.Execute(null);
             Console.WriteLine($"ConnectModal: IsOpen = {vm.ConnectModal.IsOpen} (Closed)");
 
+            // 5b. Test Hamburger Menu Toggle, Animated Navbar Strip and Hardware GPU Motion
+            Console.WriteLine("\n[Action] Verifying Hamburger Menu Toggle, Animated Navbar Strip and GPU Pipeline...");
+            var hamburgerBtn = navbarComp?.FindControl<Avalonia.Controls.Button>("HamburgerButton");
+            var navContainer = navbarComp?.FindControl<Avalonia.Controls.Border>("NavMenuContainer");
+            var navMenuBar = navbarComp?.FindControl<Avalonia.Controls.Menu>("NavMenuBar");
+            if (navbarComp == null || hamburgerBtn == null || navContainer == null || navMenuBar == null)
+            {
+                throw new Exception("Navbar HamburgerButton, NavMenuContainer or NavMenuBar control is missing!");
+            }
+            bool initHasOpen = navContainer.Classes.Contains("menu-open");
+            Console.WriteLine($"Initial State: IsNavMenuOpen={vm.Navbar.IsNavMenuOpen}, ContainerHasOpenClass={initHasOpen}");
+            if (vm.Navbar.IsNavMenuOpen || initHasOpen)
+            {
+                throw new Exception("Navbar menu should be collapsed initially!");
+            }
+
+            // Click Hamburger to Open
+            navbarComp.OnHamburgerClicked(hamburgerBtn, new Avalonia.Interactivity.RoutedEventArgs());
+            bool openHasOpen = navContainer.Classes.Contains("menu-open");
+            bool hamburgerActive = hamburgerBtn.Classes.Contains("active-menu");
+            Console.WriteLine($"After Click 1: IsNavMenuOpen={vm.Navbar.IsNavMenuOpen}, ContainerHasOpenClass={openHasOpen}, HamburgerActive={hamburgerActive}");
+            if (!vm.Navbar.IsNavMenuOpen || !openHasOpen || !hamburgerActive)
+            {
+                throw new Exception("Hamburger click failed to open navbar menu strip!");
+            }
+            var menuItems = navMenuBar.Items.OfType<Avalonia.Controls.MenuItem>().ToList();
+            var menuNames = string.Join(", ", menuItems.Select(m => m.Header?.ToString() ?? ""));
+            Console.WriteLine($"Navbar Menu Items Count: {menuItems.Count} ({menuNames})");
+            if (menuItems.Count < 6)
+            {
+                throw new Exception($"Expected at least 6 top-level menu items in navbar, but found {menuItems.Count}!");
+            }
+
+            // Verify GPU Mode Integration
+            bool isGpu = Quell.Services.HardwareGraphicsService.Instance.IsGpuMotionActive;
+            bool navbarHasGpu = navbarComp.Classes.Contains("gpu-mode");
+            string gpuAdapter = Quell.Services.HardwareGraphicsService.Instance.GpuAdapterName;
+            Console.WriteLine($"GPU Motion Integration: ServiceIsGpu={isGpu}, NavbarHasGpuClass={navbarHasGpu}, GpuAdapter='{gpuAdapter}'");
+            if (isGpu != navbarHasGpu)
+            {
+                throw new Exception("NavbarComponent failed to reflect HardwareGraphicsService GPU motion mode!");
+            }
+
+            // Click Hamburger to Close
+            navbarComp.OnHamburgerClicked(hamburgerBtn, new Avalonia.Interactivity.RoutedEventArgs());
+            bool closedHasOpen = navContainer.Classes.Contains("menu-open");
+            bool closedActive = hamburgerBtn.Classes.Contains("active-menu");
+            Console.WriteLine($"After Click 2: IsNavMenuOpen={vm.Navbar.IsNavMenuOpen}, ContainerHasOpenClass={closedHasOpen}, HamburgerActive={closedActive}");
+            if (vm.Navbar.IsNavMenuOpen || closedHasOpen || closedActive)
+            {
+                throw new Exception("Hamburger click failed to close navbar menu strip!");
+            }
+
+            // Test Keyboard Shortcut Alt+M to Toggle Open and Escape to Close
+            window.RaiseEvent(new Avalonia.Input.KeyEventArgs
+            {
+                RoutedEvent = Avalonia.Input.InputElement.KeyDownEvent,
+                Key = Avalonia.Input.Key.M,
+                KeyModifiers = Avalonia.Input.KeyModifiers.Alt
+            });
+            if (!vm.Navbar.IsNavMenuOpen || !navContainer.Classes.Contains("menu-open"))
+            {
+                throw new Exception("Alt+M shortcut failed to toggle open navbar menu strip!");
+            }
+            window.RaiseEvent(new Avalonia.Input.KeyEventArgs
+            {
+                RoutedEvent = Avalonia.Input.InputElement.KeyDownEvent,
+                Key = Avalonia.Input.Key.Escape
+            });
+            if (vm.Navbar.IsNavMenuOpen || navContainer.Classes.Contains("menu-open"))
+            {
+                throw new Exception("Escape key failed to close open navbar menu strip!");
+            }
+            Console.WriteLine("[Success] Hamburger menu animation, navbar item expansion, GPU pipeline and shortcuts verified!");
+
             // Test Disconnect Command triggering ConfirmModal
             vm.DisconnectCommand.Execute(null);
             Console.WriteLine($"ConfirmModal opened by Disconnect: {vm.ConfirmModal.IsOpen}, Target = {vm.ConfirmModal.TargetName}");
diff --git a/ViewModels/NavbarViewModel.cs b/ViewModels/NavbarViewModel.cs
index ba9cef4..0e96551 100644
--- a/ViewModels/NavbarViewModel.cs
+++ b/ViewModels/NavbarViewModel.cs
@@ -1,5 +1,7 @@
-using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 using System.Collections.ObjectModel;
+using Quell.Services;
 using Quell.Services.DatabaseProviders;
 
 namespace Quell.ViewModels;
@@ -15,8 +17,15 @@ public partial class NavbarViewModel : ViewModelBase
     [ObservableProperty]
     private bool _isConnected = true;
 
+    [ObservableProperty]
+    private bool _isNavMenuOpen;
+
     public string ConnectionDotColor => IsConnected ? "#10B981" : "#94A3B8";
 
+    public string GpuTooltipText => HardwareGraphicsService.Instance.IsGpuMotionActive
+        ? $"Toggle Application Menu (Alt+M) • GPU Hardware Acceleration Active ({HardwareGraphicsService.Instance.GpuAdapterName})"
+        : "Toggle Application Menu (Alt+M) • CPU Lightweight Motion";
+
     public ObservableCollection<string> MenuItems { get; } = new()
     {
         "File",
@@ -27,6 +36,12 @@ public partial class NavbarViewModel : ViewModelBase
         "windows"
     };
 
+    [RelayCommand]
+    public void ToggleNavMenu()
+    {
+        IsNavMenuOpen = !IsNavMenuOpen;
+    }
+
     public void UpdateConnectionStatus()
     {
         var session = DatabaseSessionService.Instance;
diff --git a/Views/MainWindow.axaml.cs b/Views/MainWindow.axaml.cs
index 986d62e..ef1fb3d 100644
--- a/Views/MainWindow.axaml.cs
+++ b/Views/MainWindow.axaml.cs
@@ -251,6 +251,14 @@ private void HandleApplicationShortcut(KeyEventArgs e)
             return;
         }
 
+        // Toggle Application Menu Strip in Navbar (Alt+M or F10)
+        if ((e.Key == Key.M && (e.KeyModifiers == KeyModifiers.Alt || e.KeyModifiers == (KeyModifiers.Control | KeyModifiers.Alt))) || e.Key == Key.F10)
+        {
+            _viewModel.Navbar.ToggleNavMenu();
+            e.Handled = true;
+            return;
+        }
+
         // Toggle or Close Explorer Sidebar (Ctrl+B)
         if (ShortcutService.Instance.IsMatch(ShortcutActions.ToggleSidebar, e) || 
             (e.Key == Key.B && e.KeyModifiers == KeyModifiers.Control))
@@ -378,9 +386,16 @@ private void HandleApplicationShortcut(KeyEventArgs e)
             return;
         }
 
-        // Escape: restore footer if maximized
+        // Escape: close navbar menu if open, or restore footer if maximized
         if (e.Key == Key.Escape)
         {
+            if (_viewModel.Navbar.IsNavMenuOpen)
+            {
+                _viewModel.Navbar.IsNavMenuOpen = false;
+                e.Handled = true;
+                return;
+            }
+
             if (_viewModel.Footer.IsMaximized)
             {
                 _viewModel.Footer.IsMaximized = false;