Part of PAR-357. PAR-375 covers what goes in the sidebar; this task covers how the sidebar and top bar look and feel.
Problem
- Nav type is louder than content: 15px/500 nav items against 14px issue titles. Linear and Notion use 13px for nav.
- Too much space per item: about 54px vertical pitch with big icon-label gaps, so five items fill the top third of the sidebar.
- Heavy active state: a solid dark-teal block with teal text and icon (light mode: grey block). There's no subtle hover state.
- Workspace header: a letter "P" on a teal tile, then "Paradaux" at 15px/600 with an up/down chevron. There's no logo or icon upload, and the taskl.ie mark appears nowhere in the app.
- Footer: "Guest / Guest" in two type sizes plus a bordered "Sign in" button. Signed-in users get avatar, name and role plus a sign-out icon, but no account menu.
- The top bar is ~56px of mostly empty space: a collapse icon on the left; "Search ⌘K" and a moon icon on the right. No breadcrumb, page title, actions or notifications. The 8px avatar initials and
⌘ K kbd are illegible.
- Mixed nav icon metaphors (see the iconography task).
- The collapsed 68px rail doesn't show tooltips with shortcuts.
Reference
- Linear sidebar (Mobbin): 13px items at a ~28px pitch, small 16px icons, group labels ("Workspace", "Your teams") as 11px tertiary text with a collapse caret, a subtle fill for the active item, and search and compose icons beside the workspace switcher.
- Linear's breadcrumb top bar: "AS Mobbin › User Insight… ☆ ⋯".
Do
- Nav items: 13px/500, 28–32px tall, 16px icons, 8px icon gap. Section labels: 11–12px tertiary with collapse.
- States: hover = subtle fill. Active = slightly stronger fill, primary text, accent icon. Focus ring visible.
- Header: workspace icon (uploaded, or a generated colour with initials at a legible size) plus name, then compose and search icon buttons inline.
- Footer: an avatar menu (profile, preferences, theme, keyboard shortcuts, sign out). Guests get a compact "Viewing as guest · Sign in" card.
- Top bar: a breadcrumb on the left (Workspace › Team › Page); contextual actions, inbox bell and avatar on the right. Merge it with the page header to save vertical space (Linear-style), and move the theme toggle into preferences.
- Collapsed rail: tooltips with the label and shortcut ("Issues · G I").
- Sidebar background a step off the page in the warm palette, with a hairline divider and no heavy border.