Skip to main content

Core Layout and Navigation

Aim for a 3-pane, app-like layout using MUI, Tailwind, or a dashboard kit as a base.

Layout Structure​

  • Sections:

    • "My Work" - Personal tasks and assignments
    • "Documents" - Global document library
    • "Projects/Spaces" - Project-based organization
    • "Tasks" - Approvals and review requests
    • "Admin" - Policies, roles, audit

  • Smart Features:

    • Saved searches / smart folders (e.g., "Needs my review", "Recently viewed", "Expiring soon")
    • Tenant / workspace switcher for multi-tenant SaaS

Top Bar​

  • Global search bar with quick actions (search across title, content, tags, people)
  • User menu: profile, notifications, theme toggle, organization context
  • Quick-create button: "New document", "New folder", "New request"

Main Content​

  • Swappable views: table, grid, split view for document lists
  • Right-side contextual panel: metadata, activity, and comments

Implementation Approach​

For implementation speed, starting with a React admin/dashboard kit gives a solid layout and theming foundation:

  • Material UI dashboard templates
  • TailAdmin
  • Refine.dev admin framework

Component Structure​

// AppShell.tsx - Main layout wrapper
interface AppShellProps {
  children: React.ReactNode;
}

const AppShell: React.FC<AppShellProps> = ({ children }) => {
  return (
    <div className="app-shell">
      <LeftSidebar />
      <div className="main-area">
        <TopBar />
        <main className="content">
          {children}
        </main>
      </div>
      <ContextPanel /> {/* Conditionally rendered */}
    </div>
  );
};
SectionRouteDescription
My Work/dashboardPersonal overview
Documents/documentsGlobal library
Spaces/spaces/:spaceIdProject spaces
Tasks/tasksApprovals/reviews
Admin/admin/*System administration

References​