sticky header

This commit is contained in:
Karol Wypchlo 2021-03-25 11:44:52 +01:00
parent 6dc438b54c
commit 7c228c3f4b
4 changed files with 26 additions and 4 deletions

View File

@ -14,7 +14,15 @@ module.exports = {
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
`gatsby-transformer-sharp`,
`gatsby-transformer-json`,
`gatsby-plugin-sharp`,
`gatsby-plugin-react-svg`,
{
@ -35,4 +43,4 @@ module.exports = {
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
};

View File

@ -23,6 +23,7 @@
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-sharp": "^3.0.0",
"gatsby-source-filesystem": "^3.0.0",
"gatsby-transformer-json": "^3.1.0",
"gatsby-transformer-sharp": "^3.0.0",
"gbimage-bridge": "^0.1.1",
"normalize.css": "^8.0.1",
@ -34,6 +35,7 @@
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-svg-loader": "^3.0.3",
"react-use": "^17.2.1",
"tailwindcss": "^2.0.3"
},
"devDependencies": {

View File

@ -15,6 +15,19 @@ import Navigation from "../Navigation/Navigation";
import NewsHeader from "../NewsHeader/NewsHeader";
import Footer from "../Footer/Footer";
import FooterNavigation from "../FooterNavigation/FooterNavigation";
// import { useWindowScroll } from "react-use";
import classnames from "classnames";
const StickyHeader = () => {
// const { y } = useWindowScroll();
return (
<div className={classnames("sticky top-0", { "bg-white border-b border-palette-200": false })}>
<NewsHeader />
<Navigation mode={false ? "light" : "dark"} />
</div>
);
};
const Layout = ({ children }) => {
// const data = useStaticQuery(graphql`
@ -40,13 +53,12 @@ const Layout = ({ children }) => {
return (
<>
<NewsHeader />
<BackgroundImage
{...background}
className="bg-palette-600"
style={{ backgroundPosition: "center top", backgroundSize: "contain" }}
>
<Navigation mode="dark" />
<StickyHeader />
<main>{children}</main>
</BackgroundImage>
<FooterNavigation />

View File

@ -98,7 +98,7 @@ const Navigation = ({ mode }) => {
>
<ul className="pt-4 pb-10 space-y-2">
{routes.map(({ title, route }) => (
<li>
<li key={title}>
<Link key={route} to={route} className="text-xl leading-7 font-semibold text-white">
{title}
</Link>