How I learned that structure decides behavior
It started as a simple toggle, making the sidebar collapse.
Turned into a full layout lesson in communication, structure, and shared state.
The Challenge
The moment I added collapse behavior to my sidebar, everything else began to react like it had a mind of its own, the dashboard felt like it had lost its balance.
At first, I thought the issue was styling. Maybe I needed better width control or transition effects.
But the problem ran deeper. The sidebar knew when it was open or closed, but the layout didn’t.
Each component was living in its own little world.
That’s when I realized the problem wasn’t in the sidebar’s logic…
…it was where the logic lived.
Behind the Build
At first, I placed my
useState
directly inside the Sidebar component. It made sense at the time. That’s where the toggle button lived, that’s where the action happened.
A simple
useState
to manage open and close.
But soon I noticed a problem:
When the sidebar collapsed, the rest of the layout didn’t know what just happened. The header shifted, the content, and everything felt out of sync.
So I lifted the state up to the Layout , the real parent of everything.
That single change made all the difference:
const [isOpen, setIsOpen] = useState(true);
Then I passed it down as props:
To the Sidebar, to toggle it.
To the Header, to adjust spacing and visibility.
To the Main Content, to respond smoothly to layout shifts.
Once I passed isOpen to the Header, everything finally aligned.
The icons on the header when the sidebar isOpen stopped disappearing.
The layout adjusted perfectly. And the dashboard started behaving as one connected system.
Reflection
Building my dashboard is like debugging my own thinking.
It’s easy to focus on one part of the interface and forget the bigger picture it belongs to.
That’s the quiet beauty of React, how a single shared state can bring scattered pieces into sync.
And maybe, it’s not just a lesson in code but in connection too.
When one truth is shared clearly, everything starts to align.
Building my dashboard is like debugging my own thinking.
It’s easy to focus on one part of the interface and forget the bigger picture it belongs to.
Sometimes, it’s not the component that needs fixing, it’s the structure that defines how everything connects.
A single truth made the layout consistent.
And in a way, that’s what leadership and design share
In React, that shared understanding is state lifting.
When communication is clear, behavior becomes predictable.