The top bar — both states
The horizontal tool bar, defined for the two states it has: connected and not connected. Search is dropped, Studio stays right-aligned, the notifications bell is kept. Every bar is responsive — resize the window to watch it flip between desktop and mobile.
The spec at a glance
- Two states. Connected and not connected — both fully defined here.
- Connected: brand · Launchpad / Marketplace · Studio · divider · notifications bell · theme · cyan wallet pill.
- Not connected: the same skeleton, but no bell, and the wallet becomes a white Connect button.
- Below 768px the nav, the Studio link and the theme toggle fold into the hamburger drawer; the bell and the wallet stay in the bar.
The bar as it ships today, connected — shown for comparison.
A wallet is connected. The right cluster reads: Studio, a hairline divider, then the account controls — notifications, theme, and the wallet.
- Notifications bell with an unread count, between the divider and the theme toggle. It stays in the bar on mobile too, so the count is always glanceable.
- Studio stays right-aligned, set off from the account controls by the divider.
- Wallet control keeps the connected principal and gains a wallet glyph.
- Mobile: hamburger, brand, bell, wallet. Theme toggle moves to the drawer; touch targets are 44px.
No wallet connected — what a first-time or signed-out visitor sees. Same skeleton as the connected bar, with three deliberate differences.
- No notifications bell. There's nothing to notify before a wallet is connected, so the bell is absent — not greyed out.
- Wallet control becomes a white Connect button. White, not cyan, so the primary call-to-action stands out against the dark bar.
- Studio still shows. Tapping it starts the connect flow — signed-out visitors see as much as possible before connecting.
- Unchanged: brand, Launchpad / Marketplace nav, theme toggle, the 768px breakpoint and 44px mobile targets.
Below 768px the hamburger opens this drawer. It carries everything that left the bar — and the light / dark toggle sits right at the top, under the header, in both states.
Light / dark lives here
Light / dark lives here
Decisions
- Button label: the not-connected control reads Connect.
- Breakpoint: 768px — the Bootstrap / Tailwind md value, the de-facto web standard. Both the style guide and the app shell now use it.
- Studio when signed out: stays visible, so logged-out visitors see as much as possible before connecting.
- Theme toggle on mobile: lives in the menu drawer, not the bar.
- Light + dark: the bar is identical in both — it never recolours.
Toko · top bar · connected + not connected · resize to see each state flip between desktop and mobile.