kylefang/booster_site
1
0
Fork 0
mirror of https://github.com/tappollo/booster_site.git synced 2026-01-12 15:34:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: make navigation stick to the top

Browse Source
This commit is contained in:
Kyle Fang
2019-08-26 11:17:17 +08:00
parent 4565682ee1
commit 97e7be3f42
3 changed files with 50 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/home/HomePage.tsx
View File

@@ -4,9 +4,11 @@ import BenefitsPage from "./components/BenefitsPage";
import FeaturesPage, { ImageBackground, SectionTitle } from "./components/FeaturesPage";
import ContactPage from "./components/ContacPage";
import GithubButton from "./components/GithubButton";
import NavigationRow from "./components/NavigationRow";
export default () => (
<div>
<NavigationRow />
<WhoWeArePage />
<WithWithoutBooster />
<BenefitsPage />

76
src/pages/home/components/NavigationRow.tsx
View File

@@ -1,6 +1,7 @@
import styled from "styled-components";
import React from "react";
import { layoutBreak, shrinkBreak } from "../../../functions/styles";
import Content from "../../../components/Content";
const Container = styled.div`
flex-direction: row;
@@ -38,40 +39,51 @@ const Button = styled.div`
cursor: pointer;
`;
const MakeItFloat = styled.div`
width: 100%;
background-color:#001d47;
position: fixed;
z-index: 1000;
`;
const NavigationRow = () => {
return (
<Container>
<Logo />
<Title>BOOSTER</Title>
<div style={{ flex: 1 }} />
<Button
onClick={() =>
document.getElementById("benefits")!.scrollIntoView({
behavior: "smooth"
})
}
>
Benefits
</Button>
<Button
onClick={() =>
document.getElementById("features")!.scrollIntoView({
behavior: "smooth"
})
}
>
Features
</Button>
<Button
onClick={() =>
document.getElementById("contacts")!.scrollIntoView({
behavior: "smooth"
})
}
>
Contact us
</Button>
</Container>
<MakeItFloat>
<Content>
<Container>
<Logo />
<Title>BOOSTER</Title>
<div style={{ flex: 1 }} />
<Button
onClick={() =>
document.getElementById("benefits")!.scrollIntoView({
behavior: "smooth"
})
}
>
Benefits
</Button>
<Button
onClick={() =>
document.getElementById("features")!.scrollIntoView({
behavior: "smooth"
})
}
>
Features
</Button>
<Button
onClick={() =>
document.getElementById("contacts")!.scrollIntoView({
behavior: "smooth"
})
}
>
Contact us
</Button>
</Container>
</Content>
</MakeItFloat>
);
};

7
src/pages/home/components/WhoWeArePage.tsx
View File

@@ -3,7 +3,6 @@ import * as React from "react";
import { layoutBreak, shrinkBreak, useMobileLayout } from "../../../functions/styles";
import styled, { css } from "styled-components";
import WhoWeAreAnimation from "./WhoWeAreAnimation";
import NavigationRow from "./NavigationRow";
const Container = styled.div`
flex-direction: column-reverse;
@@ -324,9 +323,11 @@ const WhoWeArePage = () => {
const mobileLayout = useMobileLayout();
return (
<Content>
<NavigationRow />
<Container
style={{ minHeight: mobileLayout ? "none" : window.innerHeight - 40 }}
style={{
minHeight: mobileLayout ? "none" : window.innerHeight - 40,
marginTop: mobileLayout ? 0 : 40
}}
>
<Left>
{!mobileLayout && <Header />}