import React from 'react';
import { AppProvider, useApp } from './context/AppContext';
import Sidebar from './components/Sidebar';
import MarkdownRenderer from './components/MarkdownRenderer';
import './App.css';

function AppContent() {
  const { sidebarOpen, toggleSidebar } = useApp();

  return (
    <div className="app">
      {!sidebarOpen && (
        <button
          className="floating-open-button"
          onClick={toggleSidebar}
          aria-label="展开目录"
          title="展开目录"
        >
          ☰
        </button>
      )}
      <Sidebar />
      <MarkdownRenderer />
    </div>
  );
}

function App() {
  return (
    <AppProvider>
      <AppContent />
    </AppProvider>
  );
}

export default App;
