diff --git a/public/index.html b/public/index.html
index 7d02ee6a..6a13f834 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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`.
-->
+
+
Bridge In Tech
diff --git a/src/Routes.js b/src/Routes.js
index 71e40989..487c11de 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -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 (
+
diff --git a/src/sidebar/Sidebar.jsx b/src/sidebar/Sidebar.jsx
new file mode 100644
index 00000000..eb3cd4e0
--- /dev/null
+++ b/src/sidebar/Sidebar.jsx
@@ -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 = ;
+ var crossIcon = ;
+ return (
+
+ );
+};
diff --git a/src/sidebar/sidebar.css b/src/sidebar/sidebar.css
new file mode 100644
index 00000000..48d6f85c
--- /dev/null
+++ b/src/sidebar/sidebar.css
@@ -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%);
+ }
+}