From c6e92c5eb83ddbdcc2eae1af9bef021f18195bf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A1szl=C3=B3=20Monda?= <laci@monda.hu>
Date: Wed, 8 Jul 2026 22:11:38 +0200
Subject: [PATCH] feat: add sticky Settings, Help, and About buttons to side
 menu

Replace the collapsible Agent section with a sticky footer bar so agent
pages stay accessible while scrolling the main menu.

Closes #2307

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../side-menu/side-menu.component.html        | 56 ++++++++++---------
 .../side-menu/side-menu.component.scss        | 53 ++++++++++++++----
 .../side-menu/side-menu.component.ts          |  9 ++-
 3 files changed, 74 insertions(+), 44 deletions(-)

diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
index 4fd34ac4488..d133669cb8b 100644
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
@@ -236,32 +236,34 @@
             </li>
         </ul>
     </li>
-    <li class="sidebar__level-0--item" [routerLinkActive]="['active']">
-        <div class="sidebar__level-0">
-            <i class="uhk-icon uhk-icon-pure-agent-icon"></i> Agent
-            <fa-icon [icon]="this.sideMenuState.agent.icon"
-                     class="chevron float-end"
-                     (click)="toggleMenuItem('agent')"></fa-icon>
-        </div>
-        <ul [@toggler]="this.sideMenuState.agent.animation">
-            <li class="sidebar__level-2--item">
-                <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/settings']"
-                       [class.disabled]="state.updatingFirmware">Settings</a>
-                </div>
-            </li>
-            <li class="sidebar__level-2--item">
-                <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/help']"
-                       [class.disabled]="state.updatingFirmware">Help</a>
-                </div>
-            </li>
-            <li class="sidebar__level-2--item">
-                <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/about']"
-                       [class.disabled]="state.updatingFirmware">About</a>
-                </div>
-            </li>
-        </ul>
+</ul>
+
+<ul class="menu--bottom">
+    <li class="menu--bottom__item">
+        <a [routerLink]="['/settings']"
+           [routerLinkActive]="['active']"
+           [class.disabled]="state.updatingFirmware"
+           class="menu--bottom__link">
+            <fa-icon [icon]="faCog"></fa-icon>
+            Settings
+        </a>
+    </li>
+    <li class="menu--bottom__item">
+        <a [routerLink]="['/help']"
+           [routerLinkActive]="['active']"
+           [class.disabled]="state.updatingFirmware"
+           class="menu--bottom__link">
+            <fa-icon [icon]="faQuestionCircle"></fa-icon>
+            Help
+        </a>
+    </li>
+    <li class="menu--bottom__item">
+        <a [routerLink]="['/about']"
+           [routerLinkActive]="['active']"
+           [class.disabled]="state.updatingFirmware"
+           class="menu--bottom__link">
+            <i class="uhk-icon uhk-icon-pure-agent-icon my-uhk-icon"></i>
+            About
+        </a>
     </li>
 </ul>
diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss b/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss
index 8c748f5a878..87090b8a1dc 100644
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss
@@ -9,7 +9,9 @@ $level-2-item-spacing: 0.125rem 0 0.125rem 2rem;
     background-color: var(--color-sidemenu-bg);
     border-right: 1px solid var(--color-sidemenu-border);
     position: fixed;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
     top: 0;
     bottom: 0;
     width: $side-menu-width;
@@ -39,6 +41,11 @@ ul {
     }
 }
 
+.menu--top {
+    flex: 1 1 auto;
+    overflow-y: auto;
+}
+
 .sidebar {
     &__level-0 {
         padding: $level-0-item-spacing;
@@ -163,20 +170,42 @@ ul {
 }
 
 .menu--bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
+    flex: 0 0 auto;
+    display: flex;
+    border-top: 1px solid var(--color-sidemenu-border);
     width: 100%;
 
-    .sidebar {
-        &__level-1 {
-            display: block;
-            padding: 1rem;
-            cursor: pointer;
+    &__item {
+        flex: 1 1 auto;
 
-            &:hover {
-                text-decoration: none;
-            }
+        &:not(:last-child) {
+            border-right: 1px solid var(--color-sidemenu-border);
+        }
+    }
+
+    &__link {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        gap: 0.375rem;
+        justify-content: center;
+        padding: 0.875rem 0.5rem;
+        text-decoration: none;
+        white-space: nowrap;
+        width: 100%;
+
+        fa-icon,
+        .uhk-icon {
+            flex-shrink: 0;
+        }
+
+        &.active {
+            background-color: var(--color-sidemenu-active-bg);
+            color: var(--color-sidemenu-active-text);
+        }
+
+        &.disabled {
+            pointer-events: none;
         }
     }
 }
diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts b/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts
index 73a732cd3df..62d488280e2 100644
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts
@@ -15,12 +15,14 @@ import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import {
     faChevronDown,
     faChevronUp,
+    faCog,
     faExclamationTriangle,
     faInfoCircle,
     faKeyboard,
     faPlay,
     faPlus,
     faPuzzlePiece,
+    faQuestionCircle,
     faSlidersH,
     faStar
 } from '@fortawesome/free-solid-svg-icons';
@@ -48,7 +50,6 @@ interface SideMenuState {
     keymap: SideMenuItemState;
     macro: SideMenuItemState;
     addon: SideMenuItemState;
-    agent: SideMenuItemState;
 }
 
 @Component({
@@ -95,18 +96,16 @@ export class SideMenuComponent implements OnChanges, OnInit, OnDestroy {
         addon: {
             icon: faChevronUp,
             animation: 'active'
-        },
-        agent: {
-            icon: faChevronUp,
-            animation: 'active'
         }
     };
+    faCog = faCog;
     faExclamationTriangle = faExclamationTriangle;
     faInfoCircle = faInfoCircle;
     faKeyboard = faKeyboard;
     faPlus = faPlus;
     faPlay = faPlay;
     faPuzzlePiece = faPuzzlePiece;
+    faQuestionCircle = faQuestionCircle;
     faSlidersH = faSlidersH;
     faStar = faStar;
     maxAllowedMacrosTooltip = MAX_ALLOWED_MACROS_TOOLTIP;