fix(renderer): menubar responsiveness fixed specific to Toolbox for mobile viewport

Assigning to upstream maintainers for review.

Overview

Previously in Mobile/Shorter screen, Menubar is not showing tapping on Humberger icon. Fixed the issue scoping to this Toolbox project as garuda-shell of garuda-ng as of now was not working for Mobile screen on Electron native application.

It is already fixed by me in Garuda-Ng. So when it will be released, we can resue latest garuda-shell here.

Preview Output

1. Before [In Dark Theme]:

   

   After [In Dark Theme]

   

   After [In Light Theme]

   

My Motive for update

• When User resize the window of Toolbox application, Menu icon(humberger icon) show, but on tapping on it user cant see Menus, which were showing in desktop viewport. So it will disrupt the User Experience. So fixed the menubar issue scoped to Toolbox application for better user experience and it doesnot look a bug to user.
• Aligns with Garuda’s modern, dynamic design philosophy.

Implementation Details

• Updated app.component.css file to add mobile viewport specific styles of menubar scoped to Toolbox application only, as garuda-shell of current garuda-ng was not working in electron native app for mobile screen(though it is fixed by me in garuda-ng side for upcoming release).

• Updated Mobile toggle related logic in app.component.ts file and to reflect the menu on screen updated the app.component.html file.

• stopped using current garuda-shell styles for mobile view for menubar by updating global styles.css.

• (All code updation details in Changes section)

• Fully theme-compatible (var(--p-primary-hover-color/--p-primary-color) used).

• No visual impact on this update.

Test Result

Environment	Result
macOS + pnpm run dev	Works smoothly
Linux	Works smoothly
Dark / Light themes	Colors consistent

Signed-off-by: Debkanta Mondal (debkantaroni01@gmail.com)