Skip to content

Commit

Permalink
UI: Created Navbar Component (#230)
Browse files Browse the repository at this point in the history 
* Created Navbar

* Added missing elements in navbar

* Added class to links

* Fixed typo

* Removed the space in sign up button

* Resolved bug in toggle

* Fixed button issue

* Added routes

* Added register login routes

* Added AuthContext

* Removed user

* Remove Accordian
  • Loading branch information
@stableapple
stableapple authored Jun 25, 2021
1 parent 13739d4 commit 334ba9b
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 138 deletions.
69 changes: 53 additions & 16 deletions src/Nav.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,57 @@
.Nav_container{
display: flex;
width: 100%;
height: auto;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
padding: 10px;
border-bottom: 2px solid #54BCEB;
@font-face {
font-family: MetaProBold;
src: url("./assets/fonts/MetaPro-Bold.otf") format("opentype");
}

.Nav_box{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
@font-face {
font-family: MetaProRegular;
src: url("./assets/fonts/MetaPro-Normal.otf") format("opentype");
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: static;
.topnav{
display: flex;
height:auto;
width: 100%;
align-items: center;
box-sizing: border-box;
padding: 0px 20px;


}
li {
font-family: MetaProBold;
list-style: none;
align-items: center;
color: #000000;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
padding: 20px 26px;
text-align: center;
white-space: nowrap;
}
.li{
text-decoration: none;
}
.li_signIn{
color:#4892C7;
}

li:hover {
text-decoration: underline blue;
}

.active {
width: 170px;
height: 72px;
background: #4892C7;
margin:0;
color: white;
}
.ml-auto{
padding: 0px 0px;
}
.button-right{
text-align: right;
}

174 changes: 52 additions & 122 deletions src/Navigation.js
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,61 @@
import React, { useContext } from "react";
import { Navbar, Nav, Card, Accordion, Dropdown } from "react-bootstrap";
import React, {useContext} from "react";
import { Navbar, Nav} from "react-bootstrap";
import { Link } from "react-router-dom"
import { AuthContext } from "./AuthContext";
import DropdownMenu from "react-bootstrap/DropdownMenu";
import Logo from "./assets/images/AnitaBLogo.png"
import './Nav.css'
import { AuthContext } from "./AuthContext";


export default function Navigation() {
const { user, isAuth, login, logout } = useContext(AuthContext);

const {isAuth, login, logout } = useContext(AuthContext)
return (
<div className="Nav_container">
<div>
<Nav.Link as={Link} to='/'>
<img
style={{margin:'10px 40px'}}
className="d-inline-block align-top"
src={Logo}
width="150"
height="50"
alt="Logo"
/>
</Nav.Link>
</div>
<div className="Nav_box">
<h2 style={{color:'#F89728'}}>Bridge In Tech</h2>
<Navbar className="mr-auto" expand="lg" style={{borderTop:' 2px solid #54BCEB'}}>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" id="mainNav">
<Nav.Item>
<Accordion style={{backgroundColor:'white'}}>
<Card style={{backgroundColor:'white'}}>
<Card.Header>
<Accordion.Toggle as={Link} to="/" eventKey="0">Home</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Nav>
<Nav.Link as={Link} to="/about">About</Nav.Link>
<Nav.Link as={Link} to="/benefit">Benefit</Nav.Link>
<Nav.Link href="https://anitab.org/contact/" target = "_blank" rel = "noopener noreferrer">Contact</Nav.Link>
</Nav>
</Accordion.Collapse>
</Card>
</Accordion>
</Nav.Item>
<Nav.Item>
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/members" eventKey="0">Members</Accordion.Toggle>
</Card.Header>
</Card>
</Accordion>
</Nav.Item>
<Nav.Item>
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/organizations" eventKey="0">Organizations</Accordion.Toggle>
</Card.Header>
</Card>
</Accordion>
</Nav.Item>
<Nav.Item>
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/portfolio" eventKey="0">My Space</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Nav>
<Nav.Link as={Link} to="/portfolio">Portfolio</Nav.Link>
<Dropdown>
<Dropdown.Toggle variant="light">Profile</Dropdown.Toggle>
<DropdownMenu>
<Nav.Link as={Link} to="/personal-details" eventKey="0">Personal Details</Nav.Link>
<Nav.Link as={Link} to="/additional-info" eventKey="0">Additional Info</Nav.Link>
<Nav.Link as={Link} to="/personal-background" eventKey="0">Personal Background</Nav.Link>
</DropdownMenu>
</Dropdown>
<Nav.Link as={Link} to="/request-history">Request History</Nav.Link>
<Nav.Link as={Link} to="/organization-profile" eventKey="0">My Organization</Nav.Link>
</Nav>
</Accordion.Collapse>
</Card>
</Accordion>
</Nav.Item>
{!isAuth ?
<>
<Nav.Item>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/register" eventKey="0">Register</Accordion.Toggle>
</Card.Header>
</Card>
</Nav.Item>
<Nav.Item>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/login" eventKey="0" onClick={login}>Login</Accordion.Toggle>
</Card.Header>
</Card>
</Nav.Item>
</>
:
<Nav.Item>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/" eventKey="0" onClick={logout}>Logout</Accordion.Toggle>
</Card.Header>
</Card>
</Nav.Item>
}
{isAuth && <Nav.Item>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/" eventKey="0">Welcome back, {user}!</Accordion.Toggle>
</Card.Header>
</Card>
</Nav.Item>}
<div className="topnav">
<Navbar collapseOnSelect className="ml-auto" expand="lg">
<div className="button-right">
<Navbar.Toggle aria-controls='responsive-navbar-nav' />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">

<Link to="/about" className="li">
<li >About Us</li>
</Link>
<Link to="/" className="li">
<li >Services</li>
</Link>
<Link to="/" className="li">
<li >Membership</li>
</Link>
<Link to="/faq" className="li">
<li>FAQs</li>
</Link>
<Link to="/aboutUs" className="li">
<li>Blogs</li>
</Link>
<Link to="/getInTouch" className="li">
<li>Contact Us</li>
</Link>
{!isAuth ?
<>
<Link to="/login" className="li" onClick={login}>
<li className="li_signIn">Sign In</li>
</Link>
<Link as={Link} to="/register" className="li">
<li className="active">Sign Up</li>
</Link>
</>
:
<Link to="/" className="li" onClick={logout}>
<li className="li_signIn">Sign Out</li>
</Link>}


</Nav>
</Navbar.Collapse>
</Navbar>
</div>
</div>
</Navbar.Collapse>
</div>
</Navbar>

</div>


);

)
}
12 changes: 12 additions & 0 deletions src/Routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ import ProtectedRoute from "./ProtectedRoute";
import AuthProvider from "./AuthContext";
import Programs from "./organizations/Programs";
import About from "./home/About";
import ReadAboutUs from "./home/ReadAboutUs"
import GetInTouch from "./home/GetInTouch"
import Benefit from "./home/Benefit"
import FAQ from "./home/FAQ"
import Nav from "./Navigation"


Expand All @@ -34,9 +37,18 @@ export default function Routes() {
<Route exact path="/">
<Home />
</Route>
<Route exact path="/faq">
<FAQ />
</Route>
<Route exact path="/getInTouch">
<GetInTouch />
</Route>
<Route exact path="/about">
<About />
</Route>
<Route exact path="/aboutUs">
<ReadAboutUs />
</Route>
<Route exact path="/benefit">
<Benefit />
</Route>
Expand Down
Binary file added src/assets/fonts/MetaPro-Bold.otf
View file
Binary file not shown.

0 comments on commit 334ba9b

Please sign in to comment.