# Sidebar

Ivy Tendril, 2026. The navigation of Ivy Tendril in two states: an expanded panel and a collapsed rail.

Role: Founding Design Engineer at Ivy Interactive. Stack: C# / .NET 10, Ivy Framework, React 19, TypeScript, Tailwind CSS.

Tendril holds plans, reviews, chats, jobs, recommendations, and a dashboard. I designed and built the sidebar that holds all of it in two states: an expanded panel with sections and counts, and a collapsed rail that keeps every destination one hover away.

![Expanded sidebar with primary actions, sections with counts, and keyboard shortcuts next to the dashboard](https://www.joelbystedt.com/work/sidebar/full-view.png)

*Expanded: primary actions with shortcuts, sections with counts, and the dashboard in the remaining width.*

## Collapse

**Discovery.** Reviewers on 13-inch laptops reported that the diff view was too narrow with the sidebar open.

**Problem.** The sidebar used a fixed width, and hiding it completely removed navigation and counts.

**Solution.** Command B collapses the sidebar to an icon rail. Labels fade as the panel narrows, count badges move to the icon corner, and the content column grows in the same motion.

[Video: Screen recording of the sidebar collapsing into an icon rail and expanding again while the dashboard reflows](https://www.joelbystedt.com/work/sidebar/collapse.mp4)

*Command B toggles the rail. Labels fade, badges re-anchor to their icons, and the content reflows.*

## Chat flyout

**Discovery.** With the rail collapsed, switching between chats took three clicks: expand, pick, collapse.

**Problem.** The collapsed state hid the chat list entirely.

**Solution.** Hovering the chat icon opens a flyout with recent chats, previous and next navigation, and a new chat button. Clicking the icon pins the flyout open, and the icon turns into a pin.

![Collapsed rail with the chat icon showing a badge with the number five](https://www.joelbystedt.com/work/sidebar/chat-icon-idle.png)

*Idle. The chat icon shows five unread conversations.*

![Hovering the chat icon opens a flyout listing five recent chats](https://www.joelbystedt.com/work/sidebar/chat-icon-hover.png)

*Hover. The flyout lists recent chats.*

![After clicking, the chat icon has become a pin icon and the flyout stays open](https://www.joelbystedt.com/work/sidebar/chat-icon-pinned.png)

*Click. The icon becomes a pin and the flyout stays.*

## Expand control

**Discovery.** In usability tests, two of five participants could not find how to reopen the sidebar.

**Problem.** The rail had no room for an open sidebar button.

**Solution.** Hovering the top of the rail swaps the logo for the expand icon, with a tooltip that names the shortcut.

![Top of the collapsed rail showing the green Tendril mark above the New Plan button](https://www.joelbystedt.com/work/sidebar/expand-idle.png)

*Idle. The Tendril mark sits at the top of the rail.*

![Hovering the mark replaces it with an expand icon and a tooltip reading Open sidebar, Command B](https://www.joelbystedt.com/work/sidebar/expand-hover.png)

*Hover. The mark becomes the expand control and the tooltip names the shortcut.*

## Resizable list

**Discovery.** One user with forty open plans wanted to see more of the list. Another with three plans wanted more room for navigation.

**Problem.** A fixed split between the navigation and the list suited nobody.

**Solution.** A drag handle between the navigation and the list sets the split. Plan rows show the number, the repository, and the type.

![A resize cursor on the divider between the navigation and a Plans list with repository and type tags](https://www.joelbystedt.com/work/sidebar/drag-list.png)

*Dragging the divider between the navigation and the Plans list.*

## Row menu

**Discovery.** Support tickets asked how to rename or remove a chat.

**Problem.** Rows had no actions, so cleanup happened in the config folder.

**Solution.** Each row has a menu with pin, rename, and delete. Delete is red and last. The same menu component is used everywhere in the app.

![Row menu for a chat with Pin chat, Edit name and a red Delete action](https://www.joelbystedt.com/work/sidebar/chat-options.png)

*Row options for a chat: Pin chat, Edit name, Delete.*

## Result

The sidebar is also where Tendril's shared components for tooltips, badges, key hints, and icon buttons were consolidated into single implementations.

Links:
- [Ivy Tendril on GitHub](https://github.com/Ivy-Interactive/Ivy-Tendril)