diff options
| author | Ariel Costas Guerrero <ariel@costas.dev> | 2025-11-19 15:04:55 +0100 |
|---|---|---|
| committer | Ariel Costas Guerrero <ariel@costas.dev> | 2025-11-19 15:05:34 +0100 |
| commit | d51169f6411b68a226d76d2d39826904de484929 (patch) | |
| tree | 4d8a403dfcc5b17671a92b8cc1e5d71d20ed9537 /src/frontend/app/components/layout/AppShell.tsx | |
| parent | d434204860fc0409ad6343e815d0057b97ce3573 (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.tsx | 42 |
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> + ); +}; |
