-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Added design for the homepage. * Added new design for the website. * Added title component. * Updated the font in the Nav and Contact. Changed spacing in the Summary. * Changed featured services photo size. * Changed summary font color * Changed the colors. * Addressed minhs requests * Fix app and title * Standardized fonts and font sizes. * Added routing package
- Loading branch information
Showing
21 changed files
with
205 additions
and
207 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 |
|---|---|---|
| @@ -1,25 +1,25 @@ | ||
| import React from "react"; | ||
| import TabDropdown from "./TabDropdown/TabDropdown"; | ||
| import cn from "./Navigation.module.scss"; | ||
| import cn from "./Navigation.module.scss"; | ||
| import { AppBar, Toolbar, Button } from "@material-ui/core"; | ||
| import PhoneIcon from "@material-ui/icons/Phone"; | ||
|
|
||
| const Navigation = () => { | ||
| return ( | ||
| <AppBar position="static" className={cn.AppBar}> | ||
| return ( | ||
| <AppBar position="static" className={cn.AppBar}> | ||
|
|
||
| <Toolbar className={cn.Toolbar}> | ||
| <PhoneIcon className={cn.Phone_Icon} fontSize="small" /> | ||
| <p className={cn.Phone_Number}>206-866-6466</p> | ||
| <Button variant="contained" className={cn.Button}>Contact Us</Button> | ||
| </Toolbar> | ||
| <Toolbar className={cn.Toolbar}> | ||
| <PhoneIcon className={cn.Phone_Icon} fontSize="small"/> | ||
| <p className={cn.Phone_Number}>206-866-6466</p> | ||
| <Button variant="contained" className={cn.Button}>Contact Us</Button> | ||
| </Toolbar> | ||
|
|
||
| <div className={cn.Tab_Dropdown}> | ||
| <TabDropdown></TabDropdown> | ||
| </div> | ||
|
|
||
| </AppBar> | ||
| ) | ||
| <div className={cn.Tab_Dropdown}> | ||
| <TabDropdown></TabDropdown> | ||
| </div> | ||
| </AppBar> | ||
| ) | ||
| } | ||
|
|
||
| export default Navigation; |
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 |
|---|---|---|
| @@ -1,85 +1,85 @@ | ||
| import React, { Component } from "react"; | ||
| import cn from "./TabDropdown.module.scss"; | ||
| import { AppBar, Paper, Tabs, Tab, Popper, MenuList, MenuItem } from "@material-ui/core"; | ||
| import { AppBar, Paper, Tabs, Tab, Popper, MenuList, MenuItem} from "@material-ui/core"; | ||
|
|
||
| const aboutUsItems = ["Our Practice", "Meet Dr. Bergin", "Meet Our Team"]; | ||
| const forPatientsItems = ["Patient Forms", "Financial Policy", "Insurance"]; | ||
| const servicesItems = ["Cosmetic Dentistry", "Restorative Denstistry", "Implant Prosthodontics", "Removable Prosthodontics"]; | ||
| const forDoctorsItems = ["Referring Dentists", "Publications"]; | ||
|
|
||
| const tabs = [ | ||
| { key: 0, pathName: "/test", label: "Home", items: [] }, | ||
| { key: 1, pathName: "/test", label: "About Us", items: aboutUsItems }, | ||
| { key: 2, pathName: "/test", label: "Services", items: servicesItems }, | ||
| { key: 3, pathName: "/test", label: "For Patients", items: forPatientsItems }, | ||
| { key: 4, pathName: "/test", label: "Gallery", items: [] }, | ||
| { key: 5, pathName: "/test", label: "For Doctors", items: forDoctorsItems } | ||
| { key: 0, pathName: "/test", label: "Home", items: [] }, | ||
| { key: 1, pathName: "/test", label: "About Us", items: aboutUsItems }, | ||
| { key: 2, pathName: "/test", label: "Services", items: servicesItems }, | ||
| { key: 3, pathName: "/test", label: "For Patients", items: forPatientsItems }, | ||
| { 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 | ||
| }; | ||
| state = { | ||
| tabIndex: 0, | ||
| showDropdown: false, | ||
| targetTabElement: null | ||
| }; | ||
|
|
||
| showDropdown = (index, event) => { | ||
| const { currentTarget } = event; | ||
| showDropdown = (index, event) => { | ||
| const { currentTarget } = event; | ||
|
|
||
| this.setState({ | ||
| showDropdown: true, | ||
| targetTabElement: currentTarget, | ||
| tabIndex: index | ||
| }); | ||
| }; | ||
|
|
||
| this.setState({ | ||
| showDropdown: true, | ||
| targetTabElement: currentTarget, | ||
| tabIndex: index | ||
| }); | ||
| }; | ||
| hideDropdown = () => { | ||
| this.setState({ | ||
| showDropdown: false, | ||
| targetTabElement: null | ||
| }); | ||
| }; | ||
|
|
||
| hideDropdown = () => { | ||
| this.setState({ | ||
| showDropdown: false, | ||
| targetTabElement: null | ||
| }); | ||
| }; | ||
| render() { | ||
| const { targetTabElement, showDropdown, tabIndex } = this.state; | ||
|
|
||
| render() { | ||
| const { targetTabElement, showDropdown, tabIndex } = this.state; | ||
| return ( | ||
| <div onMouseLeave={this.hideDropdown}> | ||
| <AppBar position="static" className={cn.AppBar}> | ||
|
|
||
| <Tabs | ||
| value={tabIndex} | ||
| classes={{indicator: cn.TabUnderline}} | ||
| textColor="primary" | ||
| centered> | ||
| {tabs.map((tab) => ( | ||
| <Tab | ||
| key={tab.key} | ||
| onMouseEnter={this.showDropdown.bind(this, tab.key)} | ||
| className={cn.Tab} | ||
| label={tab.label} | ||
| aria-owns={showDropdown ? "menu-list-grow" : undefined} | ||
| aria-haspopup={"true"} | ||
| /> | ||
| ))} | ||
| </Tabs> | ||
|
|
||
| return ( | ||
| <div onMouseLeave={this.hideDropdown}> | ||
| <AppBar position="static" className={cn.AppBar}> | ||
| <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> | ||
|
|
||
| <Tabs | ||
| value={tabIndex} | ||
| classes={{ indicator: cn.TabUnderline }} | ||
| textColor="primary" | ||
| centered> | ||
| {tabs.map((tab) => ( | ||
| <Tab | ||
| key={tab.key} | ||
| onMouseEnter={this.showDropdown.bind(this, tab.key)} | ||
| className={cn.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> | ||
| ); | ||
| } | ||
| </AppBar> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default TabDropdown; |
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
Oops, something went wrong.