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 {
const renderToggleLanguage = () => (
<Navbar.Item
key={`Button${6}`}
style={{
display: 'flex',
flex: 1,
......@@ -73,6 +74,7 @@ class HeaderComponent extends Component {
const renderToggleLanguageButton = () => (
<Navbar.Item
key={`Button${6}`}
style={{
display: 'flex',
flex: 1,
......@@ -94,7 +96,7 @@ class HeaderComponent extends Component {
NavItems.push(
this.props.isTabletSized ? renderToggleLanguageButton() : renderToggleLanguage(),
<Navbar.Item href="#">
<Navbar.Item key={`Button${7}`} href="#">
<Button style={{ paddingVertical: '0.1em' }} fullwidth color={'light'}>
{ButtonNavs[7].name}
</Button>
......@@ -113,7 +115,7 @@ class HeaderComponent extends Component {
</Navbar.Item>
<Navbar.Burger onClick={() => this.setState(prevState => ({ open: !prevState.open }))} />
</Navbar.Brand>
<Navbar.Menu>
<Navbar.Menu key={'hello'}>
<Navbar.Container position="end">{this.renderButtonNavs()}</Navbar.Container>
</Navbar.Menu>
</Navbar>
......
src/components/Home/Packages.js
......@@ -99,14 +99,14 @@ export default class Packages extends React.Component {
<OwlCarousel className="owl-theme" {...options}>
{this.state.activeTab === 'tab1' &&
[1, 2, 3].map((item, index) => (
<div className="item center">
<div key={item + index} className="item center">
<Card />
</div>
))}
{this.state.activeTab === 'tab2' && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card />
<Card key={item + index} />
))}
</div>
)}
......
src/pages/Homepage.js
......@@ -6,10 +6,13 @@ 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 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';
// import { FiChevronUp } from 'react-icons/fi';
const { changeFullpageSlide } = Fullpage;
const fullPageOptions = {
scrollSensitivity: 0,
......@@ -48,13 +51,59 @@ const slides = [
fullPageOptions.slides = slides;
class Homepage extends Component {
constructor(props) {
super(props);
this.fullPageRef = React.createRef();
}
state = { activeSlide: 0 };
// 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 = () => {
this.fullPageRef.current.scrollToSlide(1);
renderBulletNavs = () => {
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() {
......@@ -70,7 +119,19 @@ class Homepage extends Component {
<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 {
font-family: 'Kanit', sans-serif;
}
// ::-webkit-scrollbar {
// display: none;
// }
::-webkit-scrollbar {
display: none;
}
.dropdown-menu {
min-width: 5rem;
......@@ -370,6 +370,44 @@ body {
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) {
// .navbar-burger {
// 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