code100x
enhanced the app bar collapse feature
PR Fixes:
- Implemented Recoil state for sidebar collapse and dynamic main layout margin.
Checklist before requesting a review
- [x] I have performed a self-review of my code
- [x] 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.
https://github.com/user-attachments/assets/666e7537-7253-4fbf-b1c9-3510b9e124cb
@hkirat @devsargam pls check and let me know if something is wrong, thanks!