sticky header
This commit is contained in:
parent
6dc438b54c
commit
7c228c3f4b
|
@ -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`,
|
||||
],
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in New Issue