fix(ui): resolved issue where nav-menu overlaps when scrolling

[decimozs]

This pull request refactors the Navigation.tsx component to improve code readability, maintain consistent formatting, and enhance the mobile navigation experience. The changes are primarily focused on code style, dropdown logic, and user interface improvements for both desktop and mobile views.

Dropdown logic improvements:

• The logic for handling dropdown menus (Procurement, Tax Collection, Budget, Projects) has been refactored for clarity, with improved handling of click events and closing dropdowns when clicking outside.
• Added effect to prevent body scrolling when the mobile menu is open, enhancing the mobile user experience.

UI consistency and enhancements:

• Desktop and mobile dropdown sections now use consistent conditional rendering and styling, with improved active state handling and icon usage. [1] [2] [3] [4] [5] [6] [7] [8]
• Mobile menu is now rendered as a fixed, scrollable overlay, preventing background scrolling and ensuring accessibility.

Minor adjustments:

• Minor formatting changes to headers and section dividers for improved appearance and clarity. [1] [2]

Samples

Issue

Mobile View

Fix

Mobile View

[KishonShrill]

@jasontorres done checking this... rebased it with the newest main. Kindly check if it works on your side too!