1 files changed, 42 insertions, 0 deletions
diff --git a/src/frontend/app/components/layout/AppShell.tsx b/src/frontend/app/components/layout/AppShell.tsx
new file mode 100644
index 0000000..d0c0121
--- /dev/null
+++ b/src/frontend/app/components/layout/AppShell.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { Outlet } from "react-router";
+import { PageTitleProvider, usePageTitleContext } from "~/contexts/PageTitleContext";
+import NavBar from "../NavBar";
+import "./AppShell.css";
+import { Drawer } from "./Drawer";
+import { Header } from "./Header";
+
+const AppShellContent: React.FC = () => {
+  const { title } = usePageTitleContext();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  return (
+    <div className="app-shell">
+      <Header
+        className="app-shell__header"
+        title={title}
+        onMenuClick={() => setIsDrawerOpen(true)}
+      />
+      <Drawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} />
+      <div className="app-shell__body">
+        <aside className="app-shell__sidebar">
+          <NavBar />
+        </aside>
+        <main className="app-shell__main">
+          <Outlet />
+        </main>
+      </div>
+      <footer className="app-shell__bottom-nav">
+        <NavBar />
+      </footer>
+    </div>
+  );
+};
+
+export const AppShell: React.FC = () => {
+  return (
+    <PageTitleProvider>
+      <AppShellContent />
+    </PageTitleProvider>
+  );
+};