[Outreachy Task Submission]: Improve the accessibility of the Mobile Navigation Functionality at the Bottom Menu Bar

[crocmons]

I want to fix this mobile navigation issue ..Here is the issue description:

Issue Overview:
Currently, in mobile mode, the menu bar at the bottom of the screen is non-functional when users click on any of the icons. This restricts users from navigating to other pages, as the only action triggered is a popup share. This limitation significantly hampers the user experience and accessibility on mobile devices.

Proposed Solution:
To address this issue, we need to enhance the functionality of the bottom menu bar by adding the bottom position of 125px CSS on the bottom of the mobile screen to facilitate seamless navigation for users on mobile screens. By implementing a solution that enables users to easily navigate between pages, we can improve overall usability and satisfaction.

Expected Outcome:
Upon implementing the proposed solution, users will be able to navigate between pages smoothly and efficiently on mobile devices. This enhancement will enhance the accessibility of the application and contribute to a more positive user experience.

Additional Information:
To better understand the issue and proposed solution, please refer to the attached screen recording showcasing the current functionality and the desired improvements.

screencast-www.youtube.com-2024.03.11-21_11_19.webm

Outreachy Task Submission Label: #4750