mediumMachine Coding

Build a Collapsible Sidebar Menu

Q: Build a Collapsible Sidebar Menu

## Building a Collapsible Sidebar Menu in React **Mental model:** One boolean — `collapsed` — drives the whole component. Collapsed shrinks the width and hides labels (icons remain); expanded shows both. Submenus track their own open set. CSS transitions on `width` make it feel smooth; labels are hidden, not unmounted, so the animation stays clean. ### Step 1 — Collapsed state + width ```jsx const [collapsed, setCollapsed] = useState(false); ``` ### Step 2 — Items with icon + (conditional) label ```jsx {item.icon} {!collapsed && {item.label} } ``` ### Step 3 — Expandable submenus Track open groups in a `Set`; only relevant when expanded. ```jsx const [openGroups, setOpenGroups] = useState(new Set()); ``` ### Step 4 — Toggle button ```jsx setCollapsed((c) => !c)}>{collapsed ? '»' : '«'} ``` **Edge cases** | Case | Handling | | :-- | :-- | | Sub

189 views

Understand the problem

Build a sidebar with collapsible nested menu items.

ReactNavigationLayout

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

Solve in

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

React solution

Complete solutionRun Playground

import React from 'react';
import Sidebar from './src/Sidebar';

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 0 }}>
      <Sidebar />
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Build a Quiz App

Build a Data Table with sorting and filtering