Standalone Header (for Interactive Apps)

🎯 Shared Components Preview

This page shows how the shared Header and Footer components will look in your standalone interactive applications.

Header Features

Documentation - Links back to main docs site
Compute Engine - Direct link to CE documentation
Tools Dropdown - Links to all interactive apps:
- LaTeX Editor (editor.mathlive.io)
- Calculator (calculator.mathlive.io)
- Grapher (grapher.mathlive.io)
- Notebook (notebook.mathlive.io)
GitHub - External link to repository

Usage in Standalone Apps

import { Header, Footer } from '../shared/components';

function App() {
  return (
    <>
      <Header currentApp="editor" standalone={true} />
      <main>
        {/* Your interactive app content */}
      </main>
      <Footer />
    </>
  );
}

Benefits

✅ Consistent branding across all applications
✅ Single source of truth for navigation
✅ Responsive design (mobile-friendly)
✅ Dark mode support built-in
✅ Easy to maintain and update

Standalone Footer (for Interactive Apps)