Skip to content

Commit

Permalink
UI: Temporary side navigation for protected pages (#254)
Browse files Browse the repository at this point in the history
* Temprory Navbar added

* z-index fixed of sidebar

* alt tag added to image

* anchor tag removed and updated with develop branch

* changed alt tag and Organization

* user functionallity added and sidebar with hover effects added

* required changes done

* requested changes

* sidebar toggled
  • Loading branch information
arkumari2000 authored Jun 25, 2021
1 parent 334ba9b commit 2c888bf
Show file tree
Hide file tree
Showing 4 changed files with 214 additions and 0 deletions.
2 changes: 2 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<title>Bridge In Tech</title>
</head>
<body>
Expand Down
2 changes: 2 additions & 0 deletions src/Routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,14 @@ import GetInTouch from "./home/GetInTouch"
import Benefit from "./home/Benefit"
import FAQ from "./home/FAQ"
import Nav from "./Navigation"
import Sidebar from "./sidebar/Sidebar"


export default function Routes() {
return (
<Router basename="/bridge-in-tech-web">
<AuthProvider>
<Sidebar/>
<Nav/>
<Switch>
<Route exact path="/">
Expand Down
101 changes: 101 additions & 0 deletions src/sidebar/Sidebar.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React, { useState, useContext } from "react";
import { Link } from "react-router-dom";
import { Tooltip, OverlayTrigger } from "react-bootstrap";

import { AuthContext } from "../AuthContext";
import "./sidebar.css";
import image from "../assets/images/AnitaBLogo.png";

export default function Sidebar(){
const { user, isAuth } = useContext(AuthContext);
const [isNotActive, setNotActive] = useState("true");
const [isDropdownActive, setDropdownActive] = useState("false");
var barsIcon = <i className="fas fa-bars"></i>;
var crossIcon = <i className="fas fa-times-circle"></i>;
return (
<div className={!isAuth ? "hidden" : ""}>
<div className="wrapper">
<nav id="sidebar" className={isNotActive ? "active" : ""}>
<button
type="button"
id="sidebarCollapse"
onClick={() => setNotActive(!isNotActive)}
className="btn btn-custom"
>
<span className={isNotActive ? "" : "hidden"}>{barsIcon}</span>
<span className={isNotActive ? "hidden" : ""}>{crossIcon}</span>
</button>
<div className="sidebar-header">
<img
alt="user_logo"
src={image}
className="rounded-circle usr-image"
height={isNotActive ? "20" : "70"}
width={isNotActive ? "20" : "70"}
></img>
<h3>{user}</h3>
</div>

<ul className ="list-unstyled components">
<li className="list-item">
<i className="fas fa-briefcase icon-color"></i>
<Link to="/members">Members</Link>
</li>
<li className="list-item">
<i className="fas fa-building icon-color"></i>
<Link to="/organizations">Organizations</Link>
</li>
<li className="list-item">
<i className="fas fa-user-alt icon-color"></i>
<OverlayTrigger
key="bottom"
placement="bottom"
overlay={
<Tooltip id={`tooltip-$'bottom'`}>{!isDropdownActive ? "Close My Space" : "Open My Space"}</Tooltip>
}
>
<Link
to="/portfolio"
href="#homeSubmenu"
data-toggle="collapse"
aria-expanded="false"
className="dropdown-toggle"
onClick={() => setDropdownActive(!isDropdownActive)}
>
My Space
</Link>
</OverlayTrigger>
<ul
className={
isDropdownActive ? "list-unstyled collapse" : "list-unstyled"
}
id="homeSubmenu"
>
<li className="dropdown-item">
<Link to="/portfolio">Portfolio</Link>
</li>
<li className="dropdown-item">
<Link to="/personal-details">Personal Details</Link>
</li>
<li className="dropdown-item">
<Link to="/additional-info">Additional Info</Link>
</li>
<li className="dropdown-item">
<Link to="/personal-background">Personal Background</Link>
</li>
</ul>
</li>
<li className="list-item">
<i className="fas fa-history icon-color"></i>
<Link to="/request-history">Request History</Link>
</li>
<li className="list-item">
<i className="fas fa-sitemap icon-color"></i>
<Link to="/organization-profile">My Organization</Link>
</li>
</ul>
</nav>
</div>
</div>
);
};
109 changes: 109 additions & 0 deletions src/sidebar/sidebar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
.wrapper{
position: fixed;
left: 0;
top: 0;
height: 100vh;
background-color: #215cad;
border-radius: 5px;
z-index: 999;
}
#sidebarCollapse{
position: absolute;
top: .5rem;
right: 1.3rem;
}
#sidebar{
height: inherit;
margin: 1rem;
text-align: left;
}
#sidebar ul li a{
margin-left: .5rem;
color: #e9e9ea;
}
#sidebar .list-item{
margin: 1rem 0;
font-size: 15px;
font-weight: 600;
padding: 10px;
}
#sidebar .list-item:hover{
padding: 10px;
border-radius: 5px;
background-color: #362F78;
}
#sidebar li a{
text-decoration: none;
padding-left: .5rem;
}
.icon-color{
color: #738a9b;
}
.btn-custom{
background-color: #c4b9b9;
border-radius: 50%;
color: #215cad;
font-weight: 600;
}
.sidebar-header{
margin-top: 4rem;
text-align: center;
color: #e9e9ea;
}
#sidebar .dropdown-item:hover{
background-color: #215cad;
}
.usr-image{
border: 2px solid white;
}
.collapse{
display: none;
}
#sidebar.active .sidebar-header h3 {
display: none;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
display: none;
}
#sidebar.active ul li i {
display: block;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
.hidden{
display: none;
}

@media (max-width: 768px) {
#sidebar.active {
width: 50px;
text-align: center;
margin: 0;
}
#sidebar {
margin: 1rem;
}
#sidebarCollapse{
right: .5rem;
}
#sidebar.active .sidebar-header h3 {
display: none;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
}

0 comments on commit 2c888bf

Please sign in to comment.