UX and usability problems with hamburger menu

When the viewport width of the Graylog Web UI is below a certain threshold, the top menu is moved beneath a hamburger menu:

Some issues with how the menu behaves:

1. The top 3 items on the System menu are hidden behind the top bar

2. When using this menu, it is not collapsed upon navigation when it should be. This makes the UX quite cumbersome.

https://github.com/user-attachments/assets/e1320161-2083-4362-a9f4-981896f45bf2

3. The menu can ONLY be dismissed by CLICKING on its X to close it. Clicking outside of it does not close it. Pressing the ESC key does not close it.

## Expected Behavior

Graylog UI is intuitive and friendly

## Current Behavior

See above

## Possible Solution

## Steps to Reproduce (for bugs)

1.
2.
3.
4.

## Context

While working in a customers environment via a Virtual Desktop, i had 2 graylog web ui windows side by side. This menu makes navigating Graylog cumbersome.

## Your Environment

* Graylog Version: Behavior is present in 7.1.3

## Checklist
[] This issue fix need to be backported.
[] Does this issue have **security** implications?

Start by reproducing the hamburger-menu behavior in the Graylog Web UI at a narrow viewport, using version 7.1.3 as the reference. Locate the menu implementation from the UI entry point and verify that System items are not hidden, navigation collapses the menu, and outside clicks or Escape dismiss it.

Written by the indexing model from the issue text.