BP-3 (Build Navigation Component) (#5)

* Format README

* Copy React Material UI template for the nav bar

* Create Navigation component

* Moved CSS to its own file.

* Created a button and refactored the CSS names.

* Added phone number and icon.

* Add dummy theme and copy and paste the tab drop down

* Modify tab dropdown to look prettier and improve theme

* Move content to right place, tidy up looks

* Remove unnecessary imports in TabDropdown.js

* Refactor Navigation

* Revert "Refactor Navigation"

This reverts commit c171e90.

* Refactored Navigation component

* Added Navigation_Tab_Dropdown CSS.

* Remove logo, refactor Navigation CSS and TabDropdown

* Add spacing of Navigation component and optimize imports

* Use a key on list of tabs

* Added more tabs and refactor imports

* Remove data key

* Remove unneeded CSS and fix bug with drop down to hide it upon clicking of a menu item

* Update Navigation.css

Remove whitespace off of Tab Dropdown

* Change variable naming to camel case and then add comments (temporary) to Navigation CSS

* Cleaned up Navigation.CSS, changed tab min-weight, and changed color palette.

* Changed theme and spacing.

* Removed comments, and got rid of unnecessary material ui package.

Co-authored-by: Minh Lu <[email protected]>

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.9.14",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/App.js

@@ -1,19 +1,6 @@
-import React, { Component } from 'react';
-import './App.css';
-import { Container, AppBar } from '@material-ui/core';
-import Toolbar from './components/Toolbar';
+import React from "react";
+import Navigation from "./components/Navigation/Navigation";
 
-class App extends Component {
-  render() {
-    return (
-      <div className ="App">
-        <Toolbar />
-        <main style={{marginTop:'150px'}}> 
-          <p> This is the page content!</p>
-        </main>
-
-      </div>
-    )
-  }
-}
-export default App;
+export default function App() {
+  return <Navigation></Navigation>
+}

src/Theme.js

@@ -0,0 +1,16 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#67697C',
+      contrastText: 'white'
+    },
+    secondary: {
+      main: '#C6878F',
+      contrastText: 'white'
+    }
+  },
+});
+
+export default theme;

src/components/Navigation/Navigation.css

@@ -0,0 +1,21 @@
+.Navigation_Toolbar {
+    min-height: 50px !important;
+    align-items: flex-start !important; 
+    padding-top: 8px;
+    display: flex; 
+    justify-content: flex-end; 
+}
+
+.Navigation_Phone_Icon {
+    margin-right: 5px;
+    margin-top: 8px;
+}
+
+.Navigation_Phone_Number {
+    margin-right: 10px;
+    margin-top: 7px;
+}
+
+.Navigation_Tab_Dropdown {
+    overflow: hidden !important;
+}

src/components/Navigation/Navigation.js

@@ -0,0 +1,29 @@
+import React from "react";
+import TabDropdown from "./TabDropdown/TabDropdown";
+import "./Navigation.css";
+import { ThemeProvider } from '@material-ui/styles';
+import Theme from "../../Theme";
+import { AppBar, Toolbar, Button } from "@material-ui/core";
+import PhoneIcon from "@material-ui/icons/Phone";
+
+const Navigation = () => {
+  return (
+    <ThemeProvider theme={Theme}>
+      <AppBar position="static">
+
+        <Toolbar className="Navigation_Toolbar">
+          <PhoneIcon className = "Navigation_Phone_Icon" fontSize="small"/>
+          <p className="Navigation_Phone_Number">206-866-6466</p>
+          <Button variant="contained" color="secondary">Contact Us</Button>
+        </Toolbar>
+
+        <div className="Navigation_Tab_Dropdown">
+          <TabDropdown></TabDropdown>  
+        </div>
+
+      </AppBar>
+    </ThemeProvider>
+  )
+}
+
+export default Navigation;

src/components/Navigation/TabDropdown/TabDropdown.css

@@ -0,0 +1,8 @@
+.TabDropdown {
+    background-color: transparent !important;
+}
+
+.TabDropdown_Tab {
+    min-width: 73px !important;
+    color: white !important;
+}

src/components/Navigation/TabDropdown/TabDropdown.js

@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import "./TabDropdown.css";
+import { AppBar, Paper, Tabs, Tab, Popper, MenuList, MenuItem} from "@material-ui/core";
+
+const homeItems = ["Home 1", "Home 2", "Home 3"];
+const aboutUsItems = ["AboutUs 1", "AboutUs 2", "AboutUs 3"];
+const forPatientsItems = ["ForPatients 1", "ForPatients 2", "ForPatients 3"];
+const servicesItems = ["Services 1", "Services 2", "Services 3"];
+const forDoctorsItems = ["ForDoctors 1", "ForDoctors 2", "ForDoctors 3"];
+
+const tabs = [
+  { key: 0, pathName: "/test", label: "Home", items: homeItems },
+  { key: 1, pathName: "/test", label: "About Us", items: aboutUsItems },
+  { key: 2, pathName: "/test", label: "For Patients", items: forPatientsItems },
+  { key: 3, pathName: "/test", label: "Services", items: servicesItems },
+  { key: 4, pathName: "/test", label: "Gallery", items: [] },
+  { key: 5, pathName: "/test", label: "For Doctors", items: forDoctorsItems }
+];
+
+class TabDropdown extends Component {
+  state = {
+    tabIndex: 0,
+    showDropdown: false,
+    targetTabElement: null
+  };
+
+  showDropdown = (index, event) => {
+    const { currentTarget } = event;
+
+    this.setState({
+      showDropdown: true,
+      targetTabElement: currentTarget,
+      tabIndex: index
+    });
+  };
+
+  hideDropdown = () => {
+    this.setState({ 
+      showDropdown: false,
+      targetTabElement: null
+    });
+  };
+
+  render() {
+    const { targetTabElement, showDropdown, tabIndex } = this.state;
+
+    return (
+      <div onMouseLeave={this.hideDropdown}>
+        <AppBar position="static">
+
+            <Tabs
+              value={tabIndex}
+              indicatorColor="primary"
+              textColor="primary"
+              centered>
+              {tabs.map((tab) => (
+                <Tab
+                  key={tab.key}
+                  onMouseEnter={this.showDropdown.bind(this, tab.key)}
+                  className="TabDropdown_Tab"
+                  label={tab.label}
+                  aria-owns={showDropdown ? "menu-list-grow" : undefined}
+                  aria-haspopup={"true"}
+                />
+              ))}
+            </Tabs>
+
+            <Popper open={showDropdown} anchorEl={targetTabElement} id="menu-list-grow">
+              <Paper>
+                <MenuList>
+                  {tabs[tabIndex].items.map((item, index) => (
+                    <MenuItem key={index} onClick={this.hideDropdown}>
+                      {item}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </Paper>
+            </Popper>
+
+        </AppBar>
+      </div>
+    );
+  }
+}
+
+export default TabDropdown;