Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

UI: Created Navbar Component #230

Merged
merged 13 commits into from
Jun 25, 2021
Merged

UI: Created Navbar Component #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
76ab040
Created Navbar
stableapple Apr 16, 2021
571dfb9
Added missing elements in navbar
stableapple Apr 17, 2021
1a3a31d
Added class to links
stableapple Apr 23, 2021
1d7fb09
Fixed typo
stableapple Apr 24, 2021
5ed569d
Removed the space in sign up button
stableapple Apr 26, 2021
9b9fbf4
Resolved bug in toggle
stableapple Apr 27, 2021
eba63b4
Fixed button issue
stableapple Apr 28, 2021
4c5a8fb
Merge branch 'develop' of https://github.com/anitab-org/bridge-in-tec…
stableapple Jun 17, 2021
0bb9019
Added routes
stableapple Jun 18, 2021
8321a2d
Added register login routes
stableapple Jun 18, 2021
ab838d6
Added AuthContext
stableapple Jun 19, 2021
2044437
Removed user
stableapple Jun 20, 2021
f2e2fb9
Remove Accordian
stableapple Jun 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 53 additions & 16 deletions src/Nav.css
View file
Open in desktop
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
Open in desktop
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";
stableapple marked this conversation as resolved.
Show resolved Hide resolved
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);
stableapple marked this conversation as resolved.
Show resolved Hide resolved

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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure this Logout option is shown for users who have successfully logged-in (instead of Sign In and Sign Up buttons).

</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">
stableapple marked this conversation as resolved.
Show resolved Hide resolved

<Link to="/about" className="li">
<li >About Us</li>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This later can be linked to the video section (UI not completed yet, so no changes needed here 😉)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen Shot 2021-06-17 at 11 35 55 pm

</Link>
<Link to="/" className="li">
Copy link
Member

@mtreacy002 mtreacy002 Jun 17, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on Figma, this later can be linked to the Why BridgeInTech section (pr #247 is still in progress). No changes needed atm.
Screen Shot 2021-06-17 at 11 33 12 pm

<li >Services</li>
</Link>
<Link to="/" className="li">
<li >Membership</li>
Copy link
Member

@mtreacy002 mtreacy002 Jun 17, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can later be linked to the Benefit section added on pr #245 which is still in progress. No changes needed atm.
Screen Shot 2021-06-17 at 11 55 52 pm

</Link>
<Link to="/faq" className="li">
<li>FAQs</li>
stableapple marked this conversation as resolved.
Show resolved Hide resolved
</Link>
<Link to="/aboutUs" className="li">
<li>Blogs</li>
stableapple marked this conversation as resolved.
Show resolved Hide resolved
</Link>
<Link to="/getInTouch" className="li">
<li>Contact Us</li>
stableapple marked this conversation as resolved.
Show resolved Hide resolved
</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
Open in desktop
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
Open in desktop
Binary file not shown.