magdo
38 lines
997 B
React
38 lines
997 B
React
import { NavLink } from "react-router-dom";
|
|
import { useTheme } from "../context/ThemeContext";
|
|
|
|
const navItems = [
|
|
{ to: "/", label: "Fooldal" },
|
|
{ to: "/termekek", label: "Termekek" },
|
|
{ to: "/kapcsolat", label: "Kapcsolat" }
|
|
];
|
|
|
|
function Layout({ children }) {
|
|
const { theme, toggleTheme } = useTheme();
|
|
|
|
return (
|
|
<div className={`app-shell ${theme}`}>
|
|
<header className="topbar">
|
|
<h1>React Frontend Minta</h1>
|
|
<nav>
|
|
{navItems.map((item) => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}
|
|
>
|
|
{item.label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
<button className="theme-button" onClick={toggleTheme}>
|
|
Tema: {theme === "light" ? "Vilagos" : "Sotet"}
|
|
</button>
|
|
</header>
|
|
<main className="page-content">{children}</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Layout;
|