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

navbar styled finish

This commit is contained in:
Priyatham-sai-chand 2021-03-18 18:59:48 +05:30
parent d883a6f25c
commit 53d84550a8
2 changed files with 43 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/NavBar.js
View File

@ -1,6 +1,5 @@
import React, {useContext,useEffect } from 'react'; import React, {useContext,useEffect } from 'react';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import '../navbar.css';
import UserContext from "../context/UserContext"; import UserContext from "../context/UserContext";
import styled,{ css } from 'styled-components'; import styled,{ css } from 'styled-components';
@ -23,7 +22,7 @@ const Header = styled.header`
${ props => props.sticky ? css` ${ props => props.sticky ? css`
${Header}; ${Header};
padding: 3px 45px; padding: 3px 45px;
min-height: 6vh; min-height: 3vh;
opacity: 0.85; opacity: 0.85;
display: fixed; display: fixed;
`:css``}; `:css``};
@ -37,43 +36,54 @@ const Header = styled.header`
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
text-transform: lowercase; text-transform: lowercase;
padding-left: 100px;
transition: 0.6s; transition: 0.6s;
} }
`;
const ListElement = styled.li`
`;
const Anchor = styled.a`
`; `;
const List = styled.ul` const List = styled.ul`
${Header};
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
& ${ListElement} { padding: 13px 50px;
position: relative; flex-wrap: nowrap;
list-style:none; margin-bottom: 0px !important;
} `;
& ${ListElement} ${Anchor} { const ListElement = styled.li`
position: relative;
margin: 5px 15px;
text-transform: uppercase;
color: #fff; color: #fff;
text-decoration: none;
text-transfrom: uppercase;
position:relative;
padding:3px 50px;
`;
const Anchor = styled.a`
color: #fff;
text-transform: uppercase;
color: inherit;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 500px; font-size: 1.2em;
padding: 3px ;
transition: 0.6s;
white-space: nowrap;
`;
const Linker = styled(Link)`
color:#fff;
text-transform: uppercase;
color: inherit;
letter-spacing: 2px;
font-size: 1.2em;
padding: 3px 0; padding: 3px 0;
transition: 0.6s; transition: 0.6s;
}
`; `;
@ -109,24 +119,24 @@ export default function NavBar() {
<div className="navbar"> <div className="navbar">
<Header sticky = {scrolled} > <Header sticky = {scrolled} >
<a href="/" className="logo">locaft</a> <Anchor href="/" className="logo">locaft</Anchor>
<ul> <List>
<li><a href="/">Home</a></li> <ListElement><Anchor href="/">Home</Anchor></ListElement>
<li><a href="/#about-us">About</a></li> <ListElement><Anchor href="/#about-us">About</Anchor></ListElement>
<li><a href="/#features">Services</a></li> <ListElement><Anchor href="/#features">Services</Anchor></ListElement>
<li><a href="/#footer">Contact us</a></li> <ListElement><Anchor href="/#footer">Contact us</Anchor></ListElement>
{userData.user ? ( {userData.user ? (
<React.Fragment> <React.Fragment>
<li><Link onClick={logout}>{userData.user.username}</Link></li> <ListElement><Link onCListElementck={logout}>{userData.user.username}</Link></ListElement>
</React.Fragment> </React.Fragment>
) : ( ) : (
<React.Fragment> <React.Fragment>
<li><Link to="/user/register">Register</Link></li> <ListElement><Linker to="/user/register">Register</Linker></ListElement>
<li><Link to="/user/login">login</Link></li> <ListElement><Linker to="/user/login">login</Linker></ListElement>
</React.Fragment> </React.Fragment>
)} )}
</ul> </List>
</Header> </Header>
</div> </div>

7
src/navbar.css
View File

@ -57,13 +57,6 @@ header ul li {
header ul li a { header ul li a {
position: relative; position: relative;
margin: 5px 15px;
text-transform: uppercase;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
padding: 3px 0;
transition: 0.6s;
} }