Skip to main content
NookDocs
Dashboard

Editor

Dashboard navigation

How the sidebar, project switcher, header, and per-project nav are organized. Includes the theme selector and the avatar menu.

The dashboard is split into three regions: a left sidebar (project switcher + navigation), a top header (theme + account), and the main content area.

This page describes the dashboard chrome — a browser-only UI with no API. The left sidebar holds a project switcher plus nav items that swap between global (Projects, Settings, Billing) and per-project (Overview, Analytics, Feedback, Settings) depending on whether you are inside a /projects/[id] route. Switching projects keeps you on the same subroute. The top header (right-aligned, above the main content, not the sidebar) holds a three-way System/Light/Dark theme toggle and an avatar account menu; the theme controls only the dashboard UI, persists in localStorage as nookdocs-app-theme, and is separate from a tenant site's appearance.default. Below 768px the header collapses into a top bar and the sidebar becomes a hamburger overlay.

Sidebar

The sidebar is fixed to the left edge on desktop and collapsible to an icon rail via the Collapse button at the bottom. On mobile it slides in from the left via the hamburger menu.

Project switcher (top)

Right below the NookDocs logo is the project switcher. It shows:

  • The active project — when you're inside a project route (editor, settings, analytics, connect), its name and subdomain appear here.

  • A list of all your projects — click the switcher to reveal; picking another project hops you straight to the same subroute (e.g. switching from Project A's editor lands you on Project B's editor, not its overview).

  • Create project and View all projects — sticky footer actions inside the dropdown.

Outside a project route (on /projects, /settings, /billing), the switcher label reads Select project.

Nav items

The nav swaps between two states depending on where you are:

Global (outside a project)

  • Projects — the list of all docs projects in your workspace

  • Settings — workspace-level settings

  • Billing — plan + invoices

Per-project (inside /projects/[id])

  • Overview — project dashboard

  • Analytics — first-party analytics (views, visitors, searches, feedback, AI-vs-human split). See Analytics.

  • Feedback — per-page "Was this helpful?" triage backlog. See Feedback.

  • Settings — project-level settings

Below both states there's always a Documentation external link and a Log out button at the bottom.

Header

The desktop header sits above the main content area, not above the sidebar. It's right-aligned and holds two things:

Theme toggle

Three-way selector: System / Light / Dark. Controls the dashboard UI theme only — tenant docs sites have their own appearance.default setting in site-settings.

Selection persists in localStorage under nookdocs-app-theme and applies a data-app-theme attribute to the document root. System mode follows your OS preference.

Avatar menu

Click the avatar circle (the first letter of your name) to open the account menu:

  • Name + email — a compact identity header

  • Documentation — opens docs.nookdocs.com in a new tab

  • Contact support — opens a mailto link to the support inbox

  • Log out — signs you out of the dashboard

The theme selector intentionally lives outside this menu — it's a one-click target at the far right of the header, not three clicks deep.

Mobile

Below the md breakpoint (768px), the desktop header collapses into a thin top bar with only the NookDocs wordmark and a hamburger button. Opening the hamburger slides the full sidebar in as an overlay. Theme + avatar actions are reachable from inside that sidebar drawer on mobile.

Why this layout

The previous design stacked user info and theme selector into a single sidebar dropdown, which made two common actions (switching projects, changing theme) fight for the same slot. The new split promotes project navigation to the sidebar's top and account actions to the header's right — each high-frequency action gets its own dedicated target.

Was this page helpful?

Last updated August 7, 2026