aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app/components/layout/AppShell.tsx
diff options
context:
space:
mode:
authorAriel Costas Guerrero <ariel@costas.dev>2025-11-19 15:04:55 +0100
committerAriel Costas Guerrero <ariel@costas.dev>2025-11-19 15:05:34 +0100
commitd51169f6411b68a226d76d2d39826904de484929 (patch)
tree4d8a403dfcc5b17671a92b8cc1e5d71d20ed9537 /src/frontend/app/components/layout/AppShell.tsx
parentd434204860fc0409ad6343e815d0057b97ce3573 (diff)
feat: Add About and Favourites pages, update routing and context management
- Added new routes for About and Favourites pages. - Implemented About page with version information and credits. - Created Favourites page with a placeholder message for empty favourites. - Refactored RegionConfig import paths for consistency. - Introduced PageTitleContext to manage page titles dynamically. - Updated various components to utilize the new context for setting page titles. - Enhanced AppShell layout with a responsive Drawer for navigation. - Added CSS styles for new components and pages. - Integrated commit hash display in the About page for version tracking.
Diffstat (limited to 'src/frontend/app/components/layout/AppShell.tsx')
-rw-r--r--src/frontend/app/components/layout/AppShell.tsx42
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>
+ );
+};