Dashboard sidebars are everywhere. Every SaaS product, every admin panel, every project management tool has one. So early in my web development journey, I decided to build one myself — not copy one, not install a component library, but actually understand how it works from the ground up.
The project was a sidebar navigation with collapsible submenus, built using only HTML, CSS, and JavaScript. No frameworks. Just markup and styles.
What I Was Trying to Figure Out
The core challenge was making submenus expand and collapse without touching JavaScript. This forced me to really dig into CSS — specifically the checkbox hack, the :checked pseudo-class, and sibling selectors. These are the kinds of techniques that feel like dark magic the first time you see them, and obvious in hindsight once they click.
I also wanted the active states to feel intentional. The hot pink highlight on selected items wasn't accidental — I wanted the selected state to be unmistakable, something that communicated "you are here" clearly.
What the Project Taught Me
CSS is far more capable than most beginners give it credit for. You don't always need JavaScript for interactivity. Understanding document flow, how selectors cascade, and how pseudo-classes work gave me a foundation that still shows up in how I write styles today.
It also taught me to think in components. A sidebar isn't just a list — it's a hierarchy. Getting that hierarchy right in the HTML made the CSS significantly easier to manage.
The Result
A clean, minimal sidebar with collapsible Projects and Team sections, active item highlighting, icons, and a Log Out option pinned to the bottom. Single HTML file, one stylesheet, zero dependencies.
It earned 2 stars on GitHub — small, but it meant someone else found it useful. That felt good.