Skip to content

Add Contextual Documentation Sidebar for In-App Help #64

@malla-lokesh

Description

@malla-lokesh

Summary:

Introduce a contextual documentation sidebar to provide inline, non-blocking help throughout the dFlow application. This will improve the user experience by offering just-in-time documentation access via info buttons placed near key UI components (e.g., onboarding process, deploy button, S3 backup toggle). The sidebar should be non-modal, allowing users to continue interacting with the main UI while the documentation is open.

Background & Motivation:

As dFlow grows, users (especially new ones) may encounter confusion when interacting with deployment flows, environment variables, backup settings, etc. A lightweight, always-accessible help system is needed to reduce friction and support self-serve onboarding — without redirecting users to an external documentation site or blocking their interaction.

We want to keep the experience clean, contextual, and embedded into the app.


Feature Requirements:

  • Place info buttons near relevant UI components (e.g., buttons, toggles)
  • Clicking an info button should open a right-side
  • The sidebar must:
    • Not overlay or block the main UI
    • Be fixed-position on the right side of the screen
    • Be dismissible (close button)
    • Pull content from existing content collection docs (based on a slug/key)
  • Docs should support markdown/MDX (rendered using existing content pipeline)
  • User should be able to interact with the main app even when the sidebar is open

Implementation Details:

  • Build a lightweight custom sidebar (avoid using shadcn/ui Sheet due to its modal overlay nature)
  • Suggested tech stack:
    • framer-motion for slide-in animation
    • TailwindCSS for layout/styling
    • Use MDX content from the content/docs collection
  • Info buttons should pass a unique slug or docId to open the correct help entry
  • Render content dynamically (lazy-load or preload)
  • Consider wrapping the sidebar in a shared layout component for global access

Metadata

Metadata

Assignees

Labels

documentationImprovements or additions to documentationfrontendUI

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions