Skip to content

Add Sidebar component using react-burger-menu #1

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add Sidebar component using react-burger-menu #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
69 changes: 69 additions & 0 deletions .history/src/Header_20200911155411.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
.header {
height: 60px;
display: flex;
align-items: center;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
}

.header__logo {
width: 100px;
object-fit: contain;
margin: 0 20px;
margin-top: 18px;
}

.header__search {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
}

.header__searchInput {
height: 12px;
padding: 10px;
border: none;
width: 100%;
}

.header__searchIcon {
padding: 5px;
height: 22px !important;
background-color: #cd9042;
}

.header__optionLineOne {
font-size: 10px;
}

.header__optionLineTwo {
font-size: 13px;
font-weight: 800;
}

.header__optionBasket {
display: flex;
align-items: center;
color: white;
}

.header__basketCount {
margin-left: 10px;
margin-right: 10px;
}

.header__nav {
display: flex;
justify-content: space-evenly;
}

.header__option {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-right: 10px;
color: white;
}
66 changes: 66 additions & 0 deletions .history/src/Header_20200911155411.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from "react";
import "./Header.css";
import SearchIcon from "@material-ui/icons/Search";
import ShoppingBasketIcon from "@material-ui/icons/ShoppingBasket";
import { Link } from "react-router-dom";
import { useStateValue } from "./StateProvider";
import { auth } from "./firebase";

function Header() {
const [{ basket, user }, dispatch] = useStateValue();

const handleAuthenticaton = () => {
if (user) {
auth.signOut();
}
}

return (
<div className="header">
<Link to="/">
<img
className="header__logo"
src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
/>
</Link>

<div className="header__search">
<input className="header__searchInput" type="text" />
<SearchIcon className="header__searchIcon" />
</div>

<div className="header__nav">
<Link to={!user && '/#'}>
<div onClick={handleAuthenticaton} className="header__option">
<span className="header__optionLineOne">Hello {!user ? 'Guest' : user.email}</span>
<span className="header__optionLineTwo">{user ? 'Sign Out' : '#'}</span>
</div>
</Link>

<Link to='/orders'>
<div className="header__option">
<span className="header__optionLineOne">Returns</span>
<span className="header__optionLineTwo">& Orders</span>
</div>
</Link>


<div className="header__option">
<span className="header__optionLineOne">Your</span>
<span className="header__optionLineTwo">Prime</span>
</div>

<Link to="/checkout">
<div className="header__optionBasket">
<ShoppingBasketIcon />
<span className="header__optionLineTwo header__basketCount">
{basket?.length}
</span>
</div>
</Link>
</div>
</div>
);
}

export default Header;
70 changes: 70 additions & 0 deletions .history/src/Header_20200911160440.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
.header {
height: 60px;
display: flex;
align-items: center;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
}

.header__logo {
width: 100px;
object-fit: contain;
margin: 0 20px;
margin-top: 18px;
}

.header__search {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
}

.header__searchInput {
height: 12px;
padding: 10px;
border: none;
width: 100%;

}

.header__searchIcon {
padding: 5px;
height: 22px !important;
background-color: #cd9042;
}

.header__optionLineOne {
font-size: 10px;
}

.header__optionLineTwo {
font-size: 13px;
font-weight: 800;
}

.header__optionBasket {
display: flex;
align-items: center;
color: white;
}

.header__basketCount {
margin-left: 10px;
margin-right: 10px;
}

.header__nav {
display: flex;
justify-content: space-evenly;
}

.header__option {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-right: 10px;
color: white;
}
70 changes: 70 additions & 0 deletions .history/src/Header_20200911160442.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
.header {
height: 60px;
display: flex;
align-items: center;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
}

.header__logo {
width: 100px;
object-fit: contain;
margin: 0 20px;
margin-top: 18px;
}

.header__search {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
}

.header__searchInput {
height: 12px;
padding: 10px;
border: none;
width: 100%;
born
}

.header__searchIcon {
padding: 5px;
height: 22px !important;
background-color: #cd9042;
}

.header__optionLineOne {
font-size: 10px;
}

.header__optionLineTwo {
font-size: 13px;
font-weight: 800;
}

.header__optionBasket {
display: flex;
align-items: center;
color: white;
}

.header__basketCount {
margin-left: 10px;
margin-right: 10px;
}

.header__nav {
display: flex;
justify-content: space-evenly;
}

.header__option {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-right: 10px;
color: white;
}
70 changes: 70 additions & 0 deletions .history/src/Header_20200911160443.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
.header {
height: 60px;
display: flex;
align-items: center;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
}

.header__logo {
width: 100px;
object-fit: contain;
margin: 0 20px;
margin-top: 18px;
}

.header__search {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
}

.header__searchInput {
height: 12px;
padding: 10px;
border: none;
width: 100%;
bor
}

.header__searchIcon {
padding: 5px;
height: 22px !important;
background-color: #cd9042;
}

.header__optionLineOne {
font-size: 10px;
}

.header__optionLineTwo {
font-size: 13px;
font-weight: 800;
}

.header__optionBasket {
display: flex;
align-items: center;
color: white;
}

.header__basketCount {
margin-left: 10px;
margin-right: 10px;
}

.header__nav {
display: flex;
justify-content: space-evenly;
}

.header__option {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-right: 10px;
color: white;
}
Loading