<div id="root"></div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
/* define the fonts and colors used in the project */
:root {
  --font: 'Open Sans', sans-serif;
  --color-bg: #252525;
  --color-txt: #fff;
  --color-home: #F1C40F;
  --color-about: #16A085;
  --color-projects: #E74C3C;
  --color-contacts: #2980B9;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  font-family: var(--font);
  color: var(--color-txt);
  background: var(--color-bg);
}


.App .Navbar {
  /* display the items of the navigation bar in a grid, where the anchor link elements take the space left available by the header  */
  display: grid;
  grid-template-columns: auto 1fr;
  /* center the items vertically */
  align-items: center;
}

.App .Navbar h2 {
  /* include padding instead of margin to have the header attached to the window's borders (and therefore to avoid the string included with a pseudo element from being displayed inappropriately to the left of the header) */
  padding: 0.25rem 0.75rem;
  font-size: 2.5rem;
  color: var(--color-bg);
  background: var(--color-home);
  /* position relative to absolute position the pseudo element */
  position: relative;
  /* transition for the change in background color (occurring as the nav items are pressed) */
  transition: all 0.3s ease-in-out;
}

.App .Navbar h2:before {
  /* with a pseudo element include a string, which is hidden by default below the header, to the left of the page  */
  content: 'borntofrappé';
  position: absolute;
  left: 100%;
  transform: translateX(-50vw);
  /* top to match the vertical padding */
  top: 0.25rem;
  color: var(--color-txt);
  /* transition for the transform property, to translate the string into view and to the right of the header */
  transition: all 0.3s ease-in-out;
  /* z-index to have the pseudo element below the header itself */
  z-index: -5;
}

.App .Navbar h2:hover:before {
  /* translate the pseudo element into view on hover */
  transform: translateX(10px);
}

.App .Navbar ul {
  /* display the unordered list in a single row, placing the elements at the end of the grid column */
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0.75rem;
  list-style: none;
}

.App .Navbar ul li {
  /* separate the list items more prominently */
  margin: 0 0.75rem;
  font-size: 1.4rem;
  text-transform: uppercase;
}

.App .Navbar ul li a {
  /* reset the anchor link styles */
  color: inherit;
  text-decoration: none;
  padding: 0 0.25rem;
  letter-spacing: 0.2rem;
  /* position relative to absolute position the connected pseudo element */
  position: relative;
}

.App .Navbar ul li a:before {
  /* include a faux-border with a pseudo element  */
  content: '';
  position: absolute;
  /* by default have the faux-border hidden from view */
  top: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  /* transition for the hover state */
  transition: all 0.3s ease-out;
}

/* include the different colors for the different anchor links */
.App .Navbar ul li:nth-of-type(1) a:before {
  background: var(--color-about);
}
.App .Navbar ul li:nth-of-type(2) a:before {
  background: var(--color-projects);
}
.App .Navbar ul li:nth-of-type(3) a:before {
  background: var(--color-contacts);
}

.App .Navbar ul li a:hover:before {
  /* on hover, change the bottom property to have the faux-border stretch from the top down */
  bottom: -5px;
}

.App h1 {
  /* style the header to have the color matching the background of the header in the navbar */
  color: var(--color-home);
  text-transform: uppercase;
  text-align: center;
  margin-top: 20vh;
  font-size: calc(2rem + 1.5vw);
}

/*
for relatively smaller and smaller viewports:
- start by hiding the pseudo element responsible for the string 
- continue by removing the header bearing the "logo" as well 
*/

@media (max-width: 750px) {
  .App .Navbar h2:before {
    display: none;
  }
}

@media (max-width: 400px) {
  /* adjust the visible anchor link elements to show them in a single column, centered in the page */
  .App .Navbar h2 {
    display: none;
  }
  .App .Navbar ul {
    grid-column: 1/3;
    flex-direction: column;
    align-items: center;
  }
  .App .Navbar ul li {
    margin: 0.5rem 0;
  }
}

const Component = React.Component,
			Router = ReactRouterDOM.BrowserRouter,
			Link = ReactRouterDOM.Link,
			Switch = ReactRouterDOM.Switch,
			Route = ReactRouterDOM.Route;


// in a stateful component render a simple navigation bar and an element which depends on which link is active
class App extends Component {

  // when the component is updated (which also occurs as the new routes are included)
  // consider the text of the main header and alter the CSS custom property to style the background of the header in the navigation bar and the color of the header according to which route is included
  componentDidUpdate() {
    let header = document.querySelector("h1");
    let text = header.textContent.toLowerCase();
    let color;
    switch(text) {
      case 'about':
        color = "#16A085";
        break;
      case 'projects':
        color = "#E74C3C";
        break;
      case 'contacts':
        color = "#2980B9";
        break;
      default:
        color = "#F1C40F";
        break;
    }
    // update the custom property for the root element and have it cascade on the header as well
    let root = document.querySelector(":root");
    root.style.setProperty("--color-home", color);
  }

  /* render 
  - a nav with a header and three anchor links elements
    in the nav, include Links from the routing library, directing toward differents paths
  - a header displaying the path of the application
    through a switch, include routes which exclude one another 
    render a simple element in the route to visualize the change in the URL path
  */
  render() {
    return (
      <div className="App">

        <nav className="Navbar">
          <h2>btf</h2>
          <ul>
            <li>
              <Link to="/about">about</Link>
            </li>
            <li>
              <Link to="/projects">projects</Link>
            </li>
            <li>
              <Link to="/contacts">contacts</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <h1>Home</h1>
          </Route>
          <Route path="/about">
            <h1>About</h1>
          </Route>
          <Route path="/projects">
            <h1>Projects</h1>
          </Route>
          <Route path="/contacts">
            <h1>Contacts</h1>
          </Route>

        </Switch>

      </div>
    );
  }
	
}


// render the single component responsible for the navigation bar, wrapped in the router element
ReactDOM.render(
  <Router>
    <App />
  </Router>
  , document.getElementById('root'));