Fix slide transition

Author: Abhiek187

src/About.js

@@ -1,7 +1,12 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
 class About extends Component {
+  static propTypes = {
+    onClickLink: PropTypes.func.isRequired
+  };
+
   componentDidMount() {
     document.querySelector('title').textContent = 'Abhishek Chaudhuri - About';
     document.querySelector('.links-about').classList.add('selected');
@@ -10,6 +15,8 @@ class About extends Component {
   }
 
 	render() {
+    const { onClickLink } = this.props;
+
     const bio = 'Abhishek Chaudhuri is a college student from North Brunswick, New Jersey. He studies' +
       ' at Rutgers University-New Brunswick, majors in Computer Engineering, and minors in Computer' +
       ' Science. He excels in subjects like math and science and has a strong penchant for' +
@@ -28,7 +35,8 @@ class About extends Component {
             <p className="about-bio" tabIndex={0}>{bio}</p>
           </div>
         </div>
-        <Link className="arrow-right" to="/projects" aria-label="Go to Projects">
+        <Link className="arrow-right" to="/projects" aria-label="Go to Projects"
+          onClick={() => onClickLink('projects')}>
           <i className="fas fa-arrow-right"/>
         </Link>
       </main>

src/App.css

@@ -27,27 +27,39 @@ main {
 }
 
 /* Transition effects */
-.slide-enter {
+.left .slide-enter {
   transform: translate(110%);
 }
 
-.slide-enter.slide-enter-active {
+.right .slide-enter {
+  transform: translate(-110%);
+}
+
+.left .slide-enter.slide-enter-active,
+.right .slide-enter.slide-enter-active {
   transform: translate(0%);
   transition: 600ms ease-in-out;
   position: fixed;
   width: 100%; /* Match contact's width with other components */
 }
 
-.slide-exit {
+.left .slide-exit,
+.right .slide-exit {
   transform: translate(0%);
 }
 
-.slide-exit.slide-exit-active {
+.left .slide-exit.slide-exit-active {
   transform: translate(-110%);
   transition: 600ms ease-in-out;
   position: relative;
 }
 
+.right .slide-exit.slide-exit-active {
+  transform: translate(110%);
+  transition: 600ms ease-in-out;
+  position: relative;
+}
+
 /* Heading */
 .heading {
   padding-bottom: 0;
@@ -177,12 +189,6 @@ main {
   margin: auto;
 }
 
-@media screen and (max-width: 500px) {
-  .about-bio {
-    width: 100%;
-  }
-}
-
 /* Projects section */
 .projects-list {
   padding: 0 5%;
@@ -200,7 +206,7 @@ main {
   padding-right: 1%;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 800px) {
   .projects-list li {
     width: 100%; /* If viewport is too small, have one card per row */
   }
@@ -211,7 +217,7 @@ main {
 }
 
 .projects-image {
-  width: 30%;
+  width: 70%;
 }
 
 .projects-technology {

src/App.js

@@ -18,6 +18,10 @@ class App extends Component {
     history: PropTypes.object.isRequired
   };
 
+  state = {
+    slideDirection: 'left' // Determines which direction to slide components
+  };
+
   componentDidMount() {
     // Change title of tab every page change
     if (window.location.pathname === '/')
@@ -41,7 +45,26 @@ class App extends Component {
       navbar.classList.add('sticky') : navbar.classList.remove('sticky');
   };
 
+  setSlider = dest => {
+    // Check where to slide the components
+    if (window.location.pathname === '/contact') {
+      // At Contact, always slide right
+      this.setState({slideDirection: 'right'});
+    } else if (window.location.pathname === '/projects') {
+      // At Projects, check which link was clicked
+      if (dest === 'about') {
+        this.setState({slideDirection: 'right'});
+      } else {
+        this.setState({slideDirection: 'left'});
+      }
+    } else {
+      // At About, always slide left (default)
+      this.setState({slideDirection: 'left'});
+    }
+  };
+
   render() {
+    const slideDirection = this.state.slideDirection;
     const location = this.props.location;
     window.onscroll = this.checkScroll;
 
@@ -56,12 +79,15 @@ class App extends Component {
         </header>
         <nav className="links">
           {/* Redirect routes without reloading the browser */}
-          <Link className="links-about" to="/about">About</Link>
-          <Link className="links-projects" to="/projects">Projects</Link>
-          <Link className="links-contact" to="/contact">Contact</Link>
+          <Link className="links-about" to="/about"
+            onClick={() => this.setSlider('about')}>About</Link>
+          <Link className="links-projects" to="/projects"
+            onClick={() => this.setSlider('projects')}>Projects</Link>
+          <Link className="links-contact" to="/contact"
+            onClick={() => this.setSlider('contact')}>Contact</Link>
         </nav>
         <hr/>
-        <TransitionGroup className="transition-group">
+        <TransitionGroup className={'transition-group ' + slideDirection}>
           <CSSTransition key={location.key} timeout={{ enter: 600, exit: 600 }}
             classNames={'slide'}>
             <Switch location={location}>
@@ -76,13 +102,13 @@ class App extends Component {
                 </main>
               )}/>
               <Route path={process.env.PUBLIC_URL + '/about'} render={() => (
-                <About/>
+                <About onClickLink={this.setSlider}/>
               )}/>
               <Route path={process.env.PUBLIC_URL + '/projects'} render={() => (
-                <Projects/>
+                <Projects onClickLink={this.setSlider}/>
               )}/>
               <Route path={process.env.PUBLIC_URL + '/contact'} render={() => (
-                <Contact/>
+                <Contact onClickLink={this.setSlider}/>
               )}/>
             </Switch>
           </CSSTransition>

src/Contact.js

@@ -1,7 +1,12 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
 class Contact extends Component {
+  static propTypes = {
+    onClickLink: PropTypes.func.isRequired
+  };
+
   componentDidMount() {
     document.querySelector('title').textContent = 'Abhishek Chaudhuri - Contact';
     document.querySelector('.links-about').classList.remove('selected');
@@ -10,9 +15,12 @@ class Contact extends Component {
   }
 
 	render() {
+    const { onClickLink } = this.props;
+
 		return (
 			<main className="contact">
-        <Link className="arrow-left" to="/projects" aria-label="Go to Projects">
+        <Link className="arrow-left" to="/projects" aria-label="Go to Projects"
+          onClick={() => onClickLink('projects')}>
           <i className="fas fa-arrow-left"/>
         </Link>
         <div className="contact-wrapper">

src/Projects.js

@@ -1,8 +1,13 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import projectData from './projects.json';
 
 class Projects extends Component {
+  static propTypes = {
+    onClickLink: PropTypes.func.isRequired
+  };
+
   componentDidMount() {
     document.querySelector('title').textContent = 'Abhishek Chaudhuri - Projects';
     document.querySelector('.links-about').classList.remove('selected');
@@ -11,12 +16,14 @@ class Projects extends Component {
   }
 
 	render() {
+    const { onClickLink } = this.props;
     // Extract JSON data as an array
     const projects = JSON.parse(JSON.stringify(projectData));
 
 		return (
       <main className="projects">
-        <Link className="arrow-left" to="/about" aria-label="Go to About">
+        <Link className="arrow-left" to="/about" aria-label="Go to About"
+          onClick={() => onClickLink('about')}>
           <i className="fas fa-arrow-left"/>
         </Link>
         <div className="projects-wrapper">
@@ -46,7 +53,8 @@ class Projects extends Component {
           </ul>
           <p className="projects-addendum" tabIndex={0}>...And much more on GitHub!</p>
         </div>
-        <Link className="arrow-right" to="/contact" aria-label="Go to Contact">
+        <Link className="arrow-right" to="/contact" aria-label="Go to Contact"
+          onClick={() => onClickLink('contact')}>
           <i className="fas fa-arrow-right"/>
         </Link>
       </main>