Dropdown now appears instead of search bar unless in a course

Refactored search bar and added dropdown
5-Bits-in-a-Byte · Apr 29, 2021 · ad8b0da · ad8b0da
2 parents 71d9d09 + 0e17604
commit ad8b0da
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 6 deletions.
diff --git a/client/src/components/common/SearchBar.js b/client/src/components/common/SearchBar.js
@@ -32,8 +32,8 @@ const SearchDiv = styled.div`
   height: 32px;
   align-items: center;
   border-radius: 3px;
+  width: 100%;
   max-width: 360px;
-  margin: auto;
   &:focus-within {
     box-shadow: 0 0 0px 0.4px #818181;
   }

diff --git a/client/src/components/common/dropdown/Dropdown.js b/client/src/components/common/dropdown/Dropdown.js
@@ -29,6 +29,11 @@ const Dropdown = (props) => {
                     key={option.key || index}
                     extras={option.extra}
                   >
+                    {option.color ? (
+                      <CustomCircle color={option.color}></CustomCircle>
+                    ) : (
+                      <></>
+                    )}
                     {option.label}
                   </DropdownOption>
                 ))}
@@ -77,3 +82,12 @@ const Options = styled.div`
       box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.32);
     `}
 `;
+
+const CustomCircle = styled.div`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: ${(props) => (props.color ? props.color : css`#000000`)};
+  float: left;
+  margin: 2px 1em 2px 0;
+`;
diff --git a/client/src/components/navigation/TopNavBar.js b/client/src/components/navigation/TopNavBar.js
@@ -1,24 +1,62 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import styled from "styled-components";
+import React, { useContext, useState } from "react";
+import { Link, useHistory } from "react-router-dom";
+import { useParams } from "react-router";
+import styled, { withTheme } from "styled-components";
 import Logo from "../../imgs/inquire-logo.png";
 import SearchBar from "../common/SearchBar";
 import ProfileDropdown from "./ProfileDropdown";
+import Dropdown from "../common/dropdown/Dropdown";
+import { UserContext } from "../context/UserProvider";
+import Arrow from "../../imgs/carrot-down-secondary.svg";
+import Icon from "../common/Icon";
 
 /** TopNavBar Component
  * @brief Wrapper the top content of the website such as profile icon / menu, etc etc
  * @returns TopNavBar component
  */
+
 const TopNavBar = () => {
+  const { courseId } = useParams();
+  const user = useContext(UserContext);
+  const history = useHistory();
+
+  const handleRouteChange = (cid) => {
+    let path = "/course/" + cid;
+    history.push(path);
+  };
+
+  // Create the options for the dropdown
+  let options = [];
+  for (let i = 0; i < user.courses.length; i++) {
+    let option = {
+      // Have to set click up this way so history.push isn't called on page load
+      onClick: () => {
+        handleRouteChange(user.courses[i].courseId);
+      },
+      label: user.courses[i].courseName,
+      color: user.courses[i].color,
+    };
+    options.push(option);
+  }
+
   return (
     <Nav>
       <Wrapper>
         <Link to={"/"}>
           <LogoImg src={Logo} />
         </Link>
       </Wrapper>
-      <Wrapper>
-        <SearchBar placeholder="Search for a post or class" />
+      <Wrapper style={{ display: "flex", justifyContent: "center" }}>
+        {courseId ? (
+          <SearchBar placeholder="Search for a post or class" />
+        ) : (
+          <Dropdown options={options}>
+            <DropdownSelector tabIndex="0">
+              <SelectionName>Select a Class</SelectionName>
+              <Icon src={Arrow} style={{ padding: "0 .75em 0 .25em" }} />
+            </DropdownSelector>
+          </Dropdown>
+        )}
       </Wrapper>
       <Wrapper>
         <ProfileDropdown />
@@ -50,3 +88,22 @@ const Nav = styled.nav`
 const LogoImg = styled.img`
   height: 40px;
 `;
+
+const DropdownSelector = styled.div`
+  background-color: #e7e7e7;
+  width: 100vw;
+  height: 5vh;
+  display: flex;
+  align-items: center;
+  border-radius: 0.25em;
+  max-width: 360px;
+  cursor: pointer;
+  &:focus {
+    outline-color: #162b55;
+  }
+`;
+
+const SelectionName = styled.p`
+  flex: 1;
+  text-align: center;
+`;