Skip to content

L
landingPage-Nexpie
Commit f2ff3aa7 by HaOuiha
Options

add bullet navigation page

parent c3efa56c
Showing with 222 additions and 15 deletions
src/components/Header.js
...@@ -46,6 +46,7 @@ class HeaderComponent extends Component { ...@@ -46,6 +46,7 @@ class HeaderComponent extends Component {
const renderToggleLanguage = () => ( const renderToggleLanguage = () => (
<Navbar.Item <Navbar.Item
key={`Button${6}`}
style={{ style={{
display: 'flex', display: 'flex',
flex: 1, flex: 1,
...@@ -73,6 +74,7 @@ class HeaderComponent extends Component { ...@@ -73,6 +74,7 @@ class HeaderComponent extends Component {
const renderToggleLanguageButton = () => ( const renderToggleLanguageButton = () => (
<Navbar.Item <Navbar.Item
key={`Button${6}`}
style={{ style={{
display: 'flex', display: 'flex',
flex: 1, flex: 1,
...@@ -94,7 +96,7 @@ class HeaderComponent extends Component { ...@@ -94,7 +96,7 @@ class HeaderComponent extends Component {
NavItems.push( NavItems.push(
this.props.isTabletSized ? renderToggleLanguageButton() : renderToggleLanguage(), this.props.isTabletSized ? renderToggleLanguageButton() : renderToggleLanguage(),
<Navbar.Item href="#"> <Navbar.Item key={`Button${7}`} href="#">
<Button style={{ paddingVertical: '0.1em' }} fullwidth color={'light'}> <Button style={{ paddingVertical: '0.1em' }} fullwidth color={'light'}>
{ButtonNavs[7].name} {ButtonNavs[7].name}
</Button> </Button>
...@@ -113,7 +115,7 @@ class HeaderComponent extends Component { ...@@ -113,7 +115,7 @@ class HeaderComponent extends Component {
</Navbar.Item> </Navbar.Item>
<Navbar.Burger onClick={() => this.setState(prevState => ({ open: !prevState.open }))} /> <Navbar.Burger onClick={() => this.setState(prevState => ({ open: !prevState.open }))} />
</Navbar.Brand> </Navbar.Brand>
<Navbar.Menu> <Navbar.Menu key={'hello'}>
<Navbar.Container position="end">{this.renderButtonNavs()}</Navbar.Container> <Navbar.Container position="end">{this.renderButtonNavs()}</Navbar.Container>
</Navbar.Menu> </Navbar.Menu>
</Navbar> </Navbar>
......
src/components/Home/Packages.js
...@@ -99,14 +99,14 @@ export default class Packages extends React.Component { ...@@ -99,14 +99,14 @@ export default class Packages extends React.Component {
<OwlCarousel className="owl-theme" {...options}> <OwlCarousel className="owl-theme" {...options}>
{this.state.activeTab === 'tab1' && {this.state.activeTab === 'tab1' &&
[1, 2, 3].map((item, index) => ( [1, 2, 3].map((item, index) => (
<div className="item center"> <div key={item + index} className="item center">
<Card /> <Card />
</div> </div>
))} ))}
{this.state.activeTab === 'tab2' && ( {this.state.activeTab === 'tab2' && (
<div className="row"> <div className="row">
{[1, 2, 3].map((item, index) => ( {[1, 2, 3].map((item, index) => (
<Card /> <Card key={item + index} />
))} ))}
</div> </div>
)} )}
......
src/pages/Homepage.js
...@@ -6,10 +6,13 @@ import Services from 'components/Home/Services'; ...@@ -6,10 +6,13 @@ import Services from 'components/Home/Services';
import Features from 'components/Home/Features'; import Features from 'components/Home/Features';
import Packages from 'components/Home/Packages'; import Packages from 'components/Home/Packages';
import WindowDimension from '../utils/WindowDimension'; import WindowDimension from '../utils/WindowDimension';
import SimpleSlider from 'components/SimpleSlider'; // import SimpleSlider from 'components/SimpleSlider';
import 'owl.carousel/dist/assets/owl.carousel.css'; import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css'; import 'owl.carousel/dist/assets/owl.theme.default.css';
import { Fullpage, Slide } from 'fullpage-react'; import { Fullpage, Slide } from 'fullpage-react';
// import { FiChevronUp } from 'react-icons/fi';
const { changeFullpageSlide } = Fullpage;
const fullPageOptions = { const fullPageOptions = {
scrollSensitivity: 0, scrollSensitivity: 0,
...@@ -48,13 +51,59 @@ const slides = [ ...@@ -48,13 +51,59 @@ const slides = [
fullPageOptions.slides = slides; fullPageOptions.slides = slides;
class Homepage extends Component { class Homepage extends Component {
constructor(props) { state = { activeSlide: 0 };
super(props);
this.fullPageRef = React.createRef(); // renderBackToTop = () => {
} // return (
// <Button
// color="primary"
// style={{
// position: 'fixed',
// right: 0,
// bottom: 0,
// zIndex: 100,
// margin: '0px 12px 12px 0px',
// width: 42,
// height: 40,
// opacity: this.state.activeSlide !== 0 ? 1 : 0,
// pointerEvents: this.state.activeSlide !== 0 ? 'auto' : 'none',
// transition: 'all 0.2s ease-in-out',
// }}
// onClick={() => changeFullpageSlide(0)}>
// <FiChevronUp />
// </Button>
// );
// };
onControlsClick = () => { renderBulletNavs = () => {
this.fullPageRef.current.scrollToSlide(1); return (
<div style={{ position: 'absolute', zIndex: 1000, top: '50%', right: 50 }}>
{slides.map((slides, index) => {
return (
<div
className="bullet-navs"
style={{ marginTop: index * 16 }}
onClick={() => this.handleOnClick(index)}>
<div className="bullet-navs-container">
<span
className="bullet"
style={{
backgroundColor: this.state.activeSlide === 0 ? '#fff' : '#1c58ba',
width: this.state.activeSlide === index && 12,
height: this.state.activeSlide === index && 12,
}}
/>
</div>
</div>
);
})}
</div>
);
};
handleOnClick = index => {
changeFullpageSlide(index);
this.setState({ activeSlide: index });
}; };
render() { render() {
...@@ -70,7 +119,19 @@ class Homepage extends Component { ...@@ -70,7 +119,19 @@ class Homepage extends Component {
<Packages /> <Packages />
</> </>
) : ( ) : (
<Fullpage ref={this.fullPageRef} {...fullPageOptions} /> <>
{this.renderBulletNavs()}
{/* {this.renderBackToTop()} */}
<Fullpage
{...fullPageOptions}
onSlideChangeStart={(name, props, state, newState) => {
// console.log(name, props, state, newState);
this.setState({
activeSlide: newState.activeSlide,
});
}}
/>
</>
)} )}
</> </>
); );
......
src/pages/HomepageV3.js 0 → 100644
import React, { Component } from 'react';
import Banner from '../components/Home/Banner';
import About from '../components/Home/About';
import WhyUs from 'components/Home/WhyUs';
import Services from 'components/Home/Services';
import Features from 'components/Home/Features';
import Packages from 'components/Home/Packages';
import WindowDimension from '../utils/WindowDimension';
// import SimpleSlider from 'components/SimpleSlider';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import { Fullpage, Slide } from 'fullpage-react';
const { changeFullpageSlide, changeHorizontalSlide } = Fullpage;
const fullPageOptions = {
scrollSensitivity: 0,
touchSensitivity: 0,
scrollSpeed: 375,
hideScrollBars: false,
enableArrowKeys: true,
};
const baseStyle = {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
};
const slides = [
<Slide style={{ ...baseStyle }}>
<Banner />
</Slide>,
<Slide style={{ ...baseStyle }}>
<About />
</Slide>,
<Slide style={{ ...baseStyle }}>
<WhyUs />
</Slide>,
<Slide style={{ ...baseStyle }}>
<Services />
</Slide>,
<Slide style={{ ...baseStyle }}>
<Features />
</Slide>,
<Slide style={{ ...baseStyle }}>
<Packages />
</Slide>,
];
fullPageOptions.slides = slides;
class Homepage extends Component {
state = {
activePageIndex: 0,
};
renderBulletNavs = () => {
return (
<div style={{ position: 'absolute', zIndex: 1000, top: '50%', right: 35 }}>
<div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
{slides.map((slides, index) => {
return (
<span
className="bullet-navs"
style={{
width: this.state.activePageIndex === index && 15,
height: this.state.activePageIndex === index && 15,
marginTop: index * 19,
}}
onClick={() => this.handleOnClick(index)}
/>
);
})}
</div>
</div>
);
};
handleOnClick = index => {
changeFullpageSlide(index);
this.setState({ activePageIndex: index });
};
render() {
return (
<>
{this.props.windowWidth <= 768 ? (
<>
<Banner />
<About />
<WhyUs />
<Services />
<Features />
<Packages />
</>
) : (
<>
{this.renderBulletNavs()}
<Fullpage {...fullPageOptions} />
</>
)}
</>
);
}
}
export default WindowDimension(Homepage);
src/scss/style.scss
...@@ -11,9 +11,9 @@ body { ...@@ -11,9 +11,9 @@ body {
font-family: 'Kanit', sans-serif; font-family: 'Kanit', sans-serif;
} }
// ::-webkit-scrollbar { ::-webkit-scrollbar {
// display: none; display: none;
// } }
.dropdown-menu { .dropdown-menu {
min-width: 5rem; min-width: 5rem;
...@@ -370,6 +370,44 @@ body { ...@@ -370,6 +370,44 @@ body {
padding: 0.5rem 0.15rem; padding: 0.5rem 0.15rem;
} }
.bullet-navs {
outline: none;
position: fixed;
border: none;
cursor: pointer;
transition: all 0.3s;
.bullet {
border-radius: 100%;
width: 4px;
height: 4px;
transition: all 0.3s;
&:hover {
width: 10px;
height: 10px;
}
}
&:hover {
.bullet {
width: 10px;
height: 10px;
transition: all 0.3s;
&:hover {
width: 10px;
height: 10px;
}
}
}
}
.bullet-navs-container {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
width: 20px;
height: 16px;
}
// @media screen and (min-width: 1023px) { // @media screen and (min-width: 1023px) {
// .navbar-burger { // .navbar-burger {
// margin-left: auto; // margin-left: auto;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment