priyatham
/
Locaft
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

side bar modify

This commit is contained in:
Priyatham-sai-chand 2021-03-25 23:45:16 +05:30
parent 0107bdfc5c
commit 05062286fd
2 changed files with 152 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/_redirects
View File

@ -1 +1 @@
/* /index.html 200 /* /index.html 200

302
src/components/Sidebar.js
View File

@ -1,151 +1,151 @@
import React, {useState} from 'react'; import React, {useState} from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
const StyledMenu = styled.nav` const StyledMenu = styled.nav`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
background: #EFFFFA; background: #EFFFFA;
transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'}; transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'};
height: 100vh; height: 100vh;
text-align: left; text-align: left;
padding: 2rem; padding: 2rem;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
@media (max-width: 576px) { @media (max-width: 576px) {
width: 100%; width: 100%;
} }
a { a {
font-size: 2rem; font-size: 2rem;
text-transform: uppercase; text-transform: uppercase;
padding: 2rem 0; padding: 2rem 0;
font-weight: bold; font-weight: bold;
letter-spacing: 0.5rem; letter-spacing: 0.5rem;
color: #0D0C1D; color: #0D0C1D;
text-decoration: none; text-decoration: none;
transition: color 0.3s linear; transition: color 0.3s linear;
@media (max-width: 576px) { @media (max-width: 576px) {
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
} }
&:hover { &:hover {
color: #343078; color: #343078;
} }
} }
` `
const Menu = ({ open }) => { const Menu = ({ open }) => {
return ( return (
<StyledMenu open={open}> <StyledMenu open={open}>
<a href="/#about-us"> <a href="/#about-us">
<span role="img" aria-label="about us">💁🏻‍♂️</span> <span role="img" aria-label="about us">💁🏻‍♂️</span>
About us About us
</a> </a>
<a href="/pricing"> <a href="/pricing">
<span role="img" aria-label="pricing">💸</span> <span role="img" aria-label="pricing">💸</span>
Pricing Pricing
</a> </a>
<a href="/#footer"> <a href="/#footer">
<span role="img" aria-label="contact us">📩</span> <span role="img" aria-label="contact us">📩</span>
Contact Contact
</a> </a>
</StyledMenu> </StyledMenu>
) )
} }
const StyledBurger = styled.button` const StyledBurger = styled.button`
position: absolute; position: absolute;
top: 5%; top: 5%;
left: 2rem; left: 2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
z-index: 10; z-index: 10;
&:focus { &:focus {
outline: none; outline: none;
} }
div { div {
width: 2rem; width: 2rem;
height: 0.25rem; height: 0.25rem;
background: ${({ open }) => open ? '#0D0C1D' : '#EFFFFA'}; background: ${({ open }) => open ? '#0D0C1D' : '#EFFFFA'};
border-radius: 10px; border-radius: 10px;
transition: all 0.3s linear; transition: all 0.3s linear;
position: relative; position: relative;
transform-origin: 1px; transform-origin: 1px;
:first-child { :first-child {
transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)'}; transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)'};
} }
:nth-child(2) { :nth-child(2) {
opacity: ${({ open }) => open ? '0' : '1'}; opacity: ${({ open }) => open ? '0' : '1'};
transform: ${({ open }) => open ? 'translateX(20px)' : 'translateX(0)'}; transform: ${({ open }) => open ? 'translateX(20px)' : 'translateX(0)'};
} }
:nth-child(3) { :nth-child(3) {
transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'}; transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'};
} }
} }
@media(min-width:768px){ @media(min-width:768px){
display:none; display:none;
} }
` `
const Burger = ({ open, setOpen }) => { const Burger = ({ open, setOpen }) => {
return ( return (
<StyledBurger open={open} onClick={() => setOpen(!open)}> <StyledBurger open={open} onClick={() => setOpen(!open)}>
<div /> <div />
<div /> <div />
<div /> <div />
</StyledBurger> </StyledBurger>
) )
} }
const Sidebar = () => { const Sidebar = () => {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const node = React.useRef(); const node = React.useRef();
return ( return (
<div> <div>
<div ref={node}> <div ref={node}>
<Burger open={open} setOpen={setOpen} /> <Burger open={open} setOpen={setOpen} />
<Menu open={open} setOpen={setOpen} /> <Menu open={open} setOpen={setOpen} />
</div> </div>
</div> </div>
) )
} }
const useOnClickOutside = (ref, handler) => { const useOnClickOutside = (ref, handler) => {
React.useEffect(() => { React.useEffect(() => {
const listener = event => { const listener = event => {
if (!ref.current || ref.current.contains(event.target)) { if (!ref.current || ref.current.contains(event.target)) {
return; return;
} }
handler(event); handler(event);
}; };
document.addEventListener('mousedown', listener); document.addEventListener('mousedown', listener);
return () => { return () => {
document.removeEventListener('mousedown', listener); document.removeEventListener('mousedown', listener);
}; };
}, },
[ref, handler], [ref, handler],
); );
}; };
export default Sidebar; export default Sidebar;