enhanced the app bar collapse feature

[Ashwin-Khowala]

PR Fixes:

• Implemented Recoil state for sidebar collapse and dynamic main layout margin.

Checklist before requesting a review

• I have performed a self-review of my code
• I assure there is no similar/duplicate pull request regarding same issue

Pull Request: Sidebar Collapse State with Recoil and Dynamic Layout

Summary of Changes

• Introduced a Recoil atom (isSideBarCollapsed) to manage the sidebar’s collapsed state globally.

• Updated Appbar to use useRecoilState for toggling the sidebar collapse state on button click.

• Updated Layout to use useRecoilValue to listen to the sidebar’s collapse state and dynamically adjust the main layout’s margin.

• Wrapped the entire app with RecoilRoot in RootLayout to provide Recoil state management.

• Ensured smooth transitions for layout adjustments using Tailwind’s transition-all and duration-300.

Impact

• Allows consistent sidebar collapse state across the app.

• Enables dynamic layout adjustment (main content shifting) based on the sidebar state.

• Sets up the groundwork for future state sharing across components using Recoil.

Testing Steps

Run the app.

-Click the sidebar toggle button to collapse/expand the sidebar.

-Observe the main content area shifting dynamically (e.g., from ml-[21vw] to ml-[5vw] and back).

-Confirm that state management persists as expected across components.

2025-05-24.12-58-44.mp4

[Ashwin-Khowala]

@hkirat @devsargam pls check and let me know if something is wrong, thanks!