-
Notifications
You must be signed in to change notification settings - Fork 93
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UI: Temporary side navigation for protected pages (#254)
* 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
1 parent
334ba9b
commit 2c888bf
Showing
4 changed files
with
214 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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%); | ||
| } | ||
| } |