diff --git a/README.md b/README.md
index 40051ea..4661930 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,22 @@
-
-
-
-
-
-
-
-
-
-It's a packing and movers along with a conceriage service website.
-To better connect both owners and tenants alike.
-It features a portal for both the parties to connect,communicate and choose the best deal.
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
+
+
+
+
+
+
+
+
+
+It's a packing and movers along with a conceriage service website.
+To better connect both owners and tenants alike.
+It features a portal for both the parties to connect,communicate and choose the best deal.
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 8c336da..24b0a97 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,9 +1,10 @@
import React from 'react';
import styled from 'styled-components';
-import { Facebook,Twitter, Instagram } from "@styled-icons/fa-brands";
+import { Facebook, Twitter, Instagram } from "@styled-icons/fa-brands";
import { Envelope } from "@styled-icons/fa-solid";
+import { StyledIconBase } from '@styled-icons/styled-icon'
-import {
+import {
Container
} from 'react-bootstrap';
@@ -14,12 +15,25 @@ const ContainerPadded = styled(Container)`
`;
const WhiteSection = styled.footer`
- background: ${ props => props.background || "white"};
+ background: ${props => props.background || "white"};
`;
const ContainerCentered = styled.div`
text-align: center;
`;
+const IconStyler = styled.div`
+ ${StyledIconBase} {
+ width: ${props => props.width ? props.width : 26}px;
+ height: ${props => props.height ? props.height : 26};
+ color: ${props => props.color ? props.color : "white"};
+
+
+ }
+ margin: 20px 10px;
+
+
+`;
+
const FacebookIcon = styled(Facebook)`
margin: 20px 10px;
width: 16px;
@@ -48,17 +62,21 @@ const Footer = (props) => {
-
-
-
-
-
- © Copyright 2020 Locaft
- Terms and Conditions
- Privacy Policy
-
-
-
+
+
+
+
+
+
+
+
+
+ © Copyright 2020 Locaft
+ Terms and Conditions
+ Privacy Policy
+
+
+
)
}
diff --git a/src/components/HomePage.js b/src/components/HomePage.js
index 5512cf8..75947da 100644
--- a/src/components/HomePage.js
+++ b/src/components/HomePage.js
@@ -1,6 +1,5 @@
import React from 'react';
import '../homepage.css';
-import 'bootstrap/dist/css/bootstrap.min.css';
import NavBar from './NavBar';
import Footer from './Footer';
import { useHistory } from "react-router-dom";
@@ -17,6 +16,7 @@ import { Apple, GooglePlay } from '@styled-icons/fa-brands';
import { CheckCircle, Heart, AddressCard, ChartLine } from '@styled-icons/fa-solid';
import { Bullseye } from "@styled-icons/fa-solid";
import { StyledIconBase } from '@styled-icons/styled-icon'
+
const IconStyler = styled.div`
${StyledIconBase} {
width: ${props => props.width ? props.width : 26}px;
@@ -27,36 +27,6 @@ const IconStyler = styled.div`
}
-`;
-const IconCheckCircle = styled(CheckCircle)`
- width: 50px;
- height: 50px;
- color: #66bfbf;
-`;
-const IconBullseye = styled(Bullseye)`
- width: 50px;
- height: 50px;
- color: #66bfbf;
-
-`;
-const IconHeart = styled(Heart)`
- width: 50px;
- height: 50px;
- color: #66bfbf;
-
-`;
-const IconAddressCard = styled(AddressCard)`
- width: 50px;
- height: 50px;
- color: #66bfbf;
-
-
-`;
-const IconChartLine = styled(ChartLine)`
- width: 50px;
- height: 50px;
- color: #66bfbf;
-
`;
const ColoredSection = styled.section`
@@ -187,7 +157,7 @@ export default function HomePage() {
Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Mani, Hyderabad
@@ -209,19 +179,22 @@ export default function HomePage() {
-
+
+
About Us
Adapting to a new place is always hard in any phase of life. We aim to make it easy.
-
+
+
Vision
Bringing all the basic amenities to the new place before your arrival.
-
+
+ < br/>
Mission
Getting adapted and familiar to the new place made easy.
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 457ade8..8663edc 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -1,10 +1,71 @@
-import React, { useContext } from 'react';
+import React, { useState,useContext, useRef, useCallback } from 'react';
import { Link } from "react-router-dom";
import '../navbar.css';
import UserContext from "../context/UserContext";
+import styled,{ css } from 'styled-components';
+const Header = styled.header`
+ background: #66bfbf;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ transition: 0.6s;
+ padding: 10px 15px;
+ z-index: 100000;
+ font-family: Ubuntu;
+
+ ${ props => props.sticky && css`
+ padding: 3px 50px;
+ background: red;
+ opacity: 0.85;
+ `}
+
+
+ & .logo {
+ font-family: "Ubuntu";
+ font-size: 2rem;
+ font-weight: bold;
+ position: relative;
+ color: #fff;
+ text-decoration: none;
+ text-transform: lowercase;
+ padding-left: 100px;
+ transition: 0.6s;
+
+ }
+`;
+const List = styled.ul`
+ ${Header};
+ & li {
+ position: relative;
+ list-style:none;
+
+ }
+
+
+`;
+
+const RefCallback = () => {
+
+ const HeaderRef = useRef(null);
+ const setRef = useCallback(node => {
+ if(HeaderRef.current){
+
+ }
+ if( node ){
+ node.addEventListener()
+
+
+ }
+ })
+}
export default function NavBar() {
const { userData, setUserData } = useContext(UserContext);
+ const [ isSticky, setSticky ] = useState(false);
const logout = () => {
setUserData({
token: undefined,
@@ -12,15 +73,19 @@ export default function NavBar() {
});
localStorage.setItem("auth-token", "");
};
- document.addEventListener('DOMContentLoaded', () => {
+
+
window.addEventListener("scroll", () => {
- var header = document.getElementById("navheader");
- header.classList.toggle("sticky", window.scrollY > 1);
+ //header.classList.toggle("sticky", window.scrollY > 1);
+ if(window.scrollY > 1){
+ setSticky(isSticky => !isSticky);
+ console.log(isSticky);
+ }
});
- });
+
return (
-
)
diff --git a/src/navbar.css b/src/navbar.css
index 5f87ec4..3db417a 100644
--- a/src/navbar.css
+++ b/src/navbar.css
@@ -6,8 +6,7 @@
text-decoration: none;
}
-body {
-}
+
header{
background: #66bfbf;