diff options
| author | Ariel Costas Guerrero <ariel@costas.dev> | 2026-01-30 19:29:55 +0100 |
|---|---|---|
| committer | Ariel Costas Guerrero <ariel@costas.dev> | 2026-01-30 19:30:14 +0100 |
| commit | 7348781b89178589036620b33f3554b2e7271c5f (patch) | |
| tree | b465b8b1b1e10baeefbde840b4d7fd64a1aeb4a2 /src/frontend/app/components/layout/Header.tsx | |
| parent | 16217f0530716892abe65062e6db4092caf4a8e9 (diff) | |
feat: Enhance header and app shell with back navigation and dynamic title support
Diffstat (limited to 'src/frontend/app/components/layout/Header.tsx')
| -rw-r--r-- | src/frontend/app/components/layout/Header.tsx | 28 |
1 files changed, 26 insertions, 2 deletions
diff --git a/src/frontend/app/components/layout/Header.tsx b/src/frontend/app/components/layout/Header.tsx index 8235636..4378e59 100644 --- a/src/frontend/app/components/layout/Header.tsx +++ b/src/frontend/app/components/layout/Header.tsx @@ -1,4 +1,6 @@ -import { Menu } from "lucide-react"; +import { ArrowLeft, Menu } from "lucide-react"; +import { Link } from "react-router"; +import { usePageTitleContext } from "~/contexts/PageTitleContext"; import "./Header.css"; interface HeaderProps { @@ -12,10 +14,32 @@ export const Header: React.FC<HeaderProps> = ({ onMenuClick, className = "", }) => { + const { onBack, backTo, titleNode } = usePageTitleContext(); + return ( <header className={`app-header ${className}`}> <div className="app-header__left"> - <h1 className="app-header__title">{title}</h1> + {backTo && ( + <Link + className="app-header__menu-btn" + to={backTo} + aria-label="Atrás" + style={{ marginRight: "8px" }} + > + <ArrowLeft size={24} /> + </Link> + )} + {!backTo && onBack && ( + <button + className="app-header__menu-btn" + onClick={onBack} + aria-label="Atrás" + style={{ marginRight: "8px" }} + > + <ArrowLeft size={24} /> + </button> + )} + {titleNode ? titleNode : <h1 className="app-header__title">{title}</h1>} </div> <div className="app-header__right"> <button |