Improved State Management and Accessibility in dashboard

[Amansingh0807]

Current Implementation:

• The visibility of sidebars and popups is managed using direct DOM manipulation (e.g., document.querySelector).
• The interactive icons ( tags) aren't wrapped inside accessible elements, which may cause usability issues.

Proposed Solution:

1. State Management:

   • Use leftSidebarOpen, rightSidebarOpen, accountPopoverOpen, and notificationPopoverOpen to control visibility with React state.

2. Toggle Functions: -Use dedicated functions (toggleSidebar, toggleMessage, etc.) to handle sidebars, hidden messages, and popovers.

3. Conditional Class Names:

   • Dynamically set className for components based on state, avoiding direct DOM manipulation.

4. DOM Access:

   • Use useRef (e.g., innerMessageRef) to access DOM elements instead of document.querySelector.

5. Accessibility:

   • Wrap interactive icons in accessible elements (
     or buttons) to improve usability.

[vaibhavyadav-dev]

@Amansingh0807 don't you read contribution guidelines, it's clearly stated issued must be assigned, before making any PR.

[Amansingh0807]

@Amansingh0807 don't you read contribution guidelines, it's clearly stated issued must be assigned, before making any PR.

ohh sorry, i just forget to check it though, next time it won't happen thank you for guiding me 🙏