hamburger / hamburger menu #69

client/src/Components/NavBar/Header.js

@@ -4,12 +4,19 @@ import "./Header.css";
 import logo from "../../images/SVG/logo-01.svg";
 
 function Header() {
-	const navigate = useNavigate()
+	const navigate = useNavigate();
 	return (
 		<div className="">
 			<nav className="navbar px-2 navbar-expand-lg bg-body-tertiary">
 				<div className="container-fluid	">
-					<img src={logo} className="logo" alt="Logo" height="35" weight="65" onClick={() => navigate("/")} />
+					<img
+						src={logo}
+						className="logo"
+						alt="Logo"
+						height="35"
+						weight="65"
+						onClick={() => navigate("/")}
+					/>
 					<button
 						className="navbar-toggler"
 						type="button"
@@ -35,10 +42,18 @@ function Header() {
 							</li>
 						</ul>
 						<form className="btn-link px-4" role="search">
-							<Link className="btn btn-nav btn-pinks px-4 " role="button" to="/signup">
+							<Link
+								className="btn btn-nav btn-pinks px-4 "
+								role="button"
+								to="/signup"
+							>
 								Signup
 							</Link>
-							<Link className="btn btn-nav btn-pinks px-4" role="button" to="/signin">
+							<Link
+								className="btn btn-nav btn-pinks px-4"
+								role="button"
+								to="/signin"
+							>
 								SignIn
 							</Link>
 						</form>

client/src/Components/Topbar/Topbar.js

@@ -3,22 +3,21 @@ import "./topbar.css";
 import iconuser from "./icon-user.svg";
 import bell from "./bell.svg";
 import { Link } from "react-router-dom";
+import searchIcon from "./searchIcon.svg";
+// import Home from "../SideBar/HomeIcon";
+// import Map from "..SideBar/FloorplanIcon";
 
 function Topbar(prop) {
 	const [startDate, setStartDate] = useState(null);
 	const [userName, setUserName] = useState("");
 	const [userRole, setUserRole] = useState("");
 	const [showDropdown, setShowDropdown] = useState(false);
-
-	const CustomInput = ({ value, onClick }) => (
-		<button
-			className="form-control dropdown-toggle"
-			onClick={onClick}
-			id="calendar-link"
-		>
-			{value || "Calendar"}
-		</button>
-	);
+	const [navItems, setNavItems] = useState([
+		// { name: "Home", component: <Home /> },
+		{ name: "Floor Plan", component: <Map /> },
+		{ name: "Book Desk", icon: "bi-calendar-date" },
+		{ name: "Settings", icon: "bi-gear" },
+	]);
 
 	const dropdownRef = useRef(null);
 
@@ -37,28 +36,42 @@ function Topbar(prop) {
 	};
 
 	return (
-		<nav id="navbar" className="navbar navbar-expand-lg navbar-light bg-light">
-			<div className="container-fluid">
-				<div className="navbar-nav">
-					<button id="book-link" className="nav-link" href="#">
-						Book
-					</button>
-					<button id="bookings-link" className="nav-link" href="#">
-						Bookings
-					</button>
-					<button id="map-link" className="dropdown-toggle nav-link" href="#">
-						Map
-					</button>
-				</div>
-			</div>
-
-			<div className="end-of-page">
+		<nav id="navbar" className="navbar navbar-expand-lg navbar-white bg-white">
+			<section className="first_section">
+				<form className=" form-inline ">
+					<div className="input-control-form form-group has-search">
+						<img className="searchIcon" src={searchIcon} alt="The Bell" />
+						<input
+							type="text"
+							className="input-control-form form-control"
+							placeholder=" Search here..."
+						/>
+					</div>
+				</form>
+			</section>
+			<button
+				className="navbar-toggler navbar-toggler-topbar "
+				type="button"
+				data-bs-toggle="collapse"
+				data-bs-target="#navbarSupportedContent"
+				aria-controls="navbarSupportedContent"
+				aria-expanded="false"
+				aria-label="Toggle navigation"
+			>
+				<span className="navbar-toggler-icon"></span>
+			</button>
+			<section
+				id="navbarSupportedContent"
+				className="collapse navbar-collapse end-of-page"
+			>
+				{/* <div className="bell_user__role"> */}
 				<img className="bell" src={bell} alt="The Bell" />
-				{/* <img className="gear" src={gear} alt="The Gear" /> */}
+
 				<span className="user-info">
 					<strong className="user-name">{prop.userName}</strong> <br />
 					<span className="user-role">{prop.role}</span>
 				</span>
+				{/* </div> */}
 				<div className="the-icon-user-background" ref={dropdownRef}>
 					<div onClick={toggleDropdown}>
 						<img className="icon-user" src={iconuser} alt="The Blue Dot" />
@@ -74,7 +87,35 @@ function Topbar(prop) {
 						</Link>
 					)}
 				</div>
-			</div>
+				<section className="second_logout">
+					<ul className="navbar-nav nav-bar-sd flex-column align-items-center mb-sm-auto mt-5 gap-2">
+						{navItems.map((item) => {
+							return (
+								<li
+									className="nav-item nav-item-sd rounded-start-pill  d-flex justify-content-center ps-3 pt-1"
+									onClick={() => console.log(item.name)}
+								>
+									<a
+										href=""
+										className="nav-link border-0 p-0 d-flex align-items-center gap-3"
+									>
+										{/* <i className={item.icon}></i>{" "} */}
+										<span className=" d-sm-inline">{item.name}</span>
+									</a>
+								</li>
+							);
+						})}
+					</ul>
+					<Link className="dropdown-button" to="/">
+						<button
+							className="dropdown-menu-buttons"
+							onClick={() => localStorage.clear()}
+						>
+							Sign out
+						</button>
+					</Link>
+				</section>
+			</section>
 		</nav>
 	);
 }