Reclaim Your Screen: Persistent Sidebar Collapse & Icon Rail Mode
Reclaim Your Screen: Persistent Sidebar Collapse & Icon Rail Mode
Release: v0.1.110 · Category: UI/UX
If you manage a busy portfolio of tenancies on a laptop, screen real estate is precious. The dashboard sidebar is essential for navigation — but at its default width of 256px it can eat up around 20% of your viewport on a 1280px display, leaving less room for the data that matters.
Starting with v0.1.110, you can collapse the sidebar to a slim 56px icon-only rail with a single click — and the platform will remember your preference every time you come back.
How It Works
Collapsing the Sidebar
A new collapse toggle button has been added to the sidebar footer, sitting alongside the existing Changelog and Feedback links. Click it to switch between the two modes:
| Mode | Sidebar width | What's shown |
|---|---|---|
| Expanded (default) | 256px | Icons + full text labels |
| Collapsed (icon rail) | 56px | Icons only |
Tooltips Keep Navigation Discoverable
In collapsed mode, every navigation icon shows a Radix tooltip when hovered, displaying the full item label. You never have to guess what an icon means — just hover and the label appears instantly.
Re-expanding the Sidebar
You can re-expand the sidebar in two ways:
- Click the collapse toggle button in the footer again.
- Click any navigation icon while in collapsed mode — the sidebar expands automatically.
Your Preference Is Saved
The sidebar state is written to localStorage under the key sidebar-collapsed. This means:
- Refreshing the page restores your last choice.
- Opening a new tab to the dashboard respects your saved preference.
- Clearing browser storage resets the sidebar to expanded (the default).
Overflow & Scroll Visibility
This release also improves the experience on tall, narrow screens where navigation groups could previously extend below the visible area without any indication. The sidebar now correctly signals when content is scrollable, so no navigation group is accidentally hidden from view.
Affected File
src/app/dashboard/layout.tsx
Background
This pattern is well-established in tools like Linear, Notion, and GitHub — a collapsible icon rail that gets out of the way when you need space, but stays fully functional throughout. We've brought the same behaviour to the tenancy dashboard so you can keep your focus on managing tenancies rather than fighting the UI.