[Feature] Menu Button for Mobile Screen. Toggle Feature

## Problem
When a user clicks on the menu button for he mobile screen, it just displays the list of menus with no indication in the button section showing that the Menu button is open or active.

## Description
I would like to propose a new feature to enhance the user experience of the application. The feature involves adding a toggle button for the menu, which will allow users to easily know when the menu is open and closed via a switch in button content .

**Proposed Behavior**
Implement a button with the text "Menu" that, when clicked, changes to an "X" icon to indicate that the menu can be closed.
When the button is clicked again, it should revert back to "Menu," and the menu should close.
Expected UI Changes:

The button should be styled appropriately to match the existing design.
The menu should smoothly expand and collapse when the button is clicked.

## Additional context

- [x] I would be interested in implementing this feature.

Start by locating the existing mobile menu button and menu markup in the frontend, then inspect how the current open and close behavior is implemented. Update the button and menu interaction so the label changes between “Menu” and “X”, the menu expands and collapses smoothly, and the styling matches the existing design; verify both states manually on a mobile viewport.

Written by the indexing model from the issue text.