layout changes -> fixed animation bugs && mobile views

src/components/public-components/header/index.js

@@ -2,13 +2,16 @@ import React, { Component } from 'react';
 import { Link } from "react-router-dom";
 
 import * as routes from './../../../constants/routes';
-import { UserContext } from './../../../containers/header';
 import token from './../../../utils/token';
 
 export default class header extends Component {
 
     state = {
-        togglerClosed: true,
+        togglerClosed: true
+    }
+
+    handleClick = () => {
+        this.setState({ togglerClosed: true })
     }
 
     handleToggle = event => {
@@ -28,54 +31,53 @@ export default class header extends Component {
 
         return (
             <header className="header">
-                <Link to={routes.LANDING}>
+                <Link onClick={this.handleClick} to={routes.LANDING}>
                     <h1 className="header__logo">Test.<span className="header__logo--i-letter">i</span>o</h1>
                 </Link>
                 <hr className="header__logo--divider" />
-                {/* <span className="header__toggle-trigger" onClick={this.handleToggle} >
+                <span className="header__toggle-trigger" onClick={this.handleToggle} >
                     <span />
-                </span> */}
-                <button style={{ position: "absolute", top: '85px', left: 0 }} onClick={this.handleToggle}>HEADER TOGGLE</button>
+                </span>
                 <div className="header__flex-wrapper">
                     <nav className={`header__nav ${toggleStatus}`}>
                         <ul className="header__nav nav__list"  >
                             <li>
-                                <Link className="header__nav nav__list-item" to={routes.HOME}>
+                                <Link onClick={this.handleClick} className="header__nav nav__list-item" to={routes.HOME}>
                                     Home
-                </Link>
+                                </Link>
                             </li>
                             <li>
-                                <Link className="header__nav nav__list-item" to={routes.PROFILE}>
+                                <Link onClick={this.handleClick} className="header__nav nav__list-item" to={routes.PROFILE}>
                                     Profile
-                </Link>
+                                </Link>
                             </li>
                             <li>
-                                <Link className="header__nav nav__list-item" to={routes.TESTS}>
+                                <Link onClick={this.handleClick} className="header__nav nav__list-item" to={routes.TESTS}>
                                     Test
-                </Link>
+                                </Link>
                             </li>
                             <li>
-                                <Link className="header__nav nav__list-item" to={routes.CATEGORIES}>
+                                <Link onClick={this.handleClick} className="header__nav nav__list-item" to={routes.CATEGORIES}>
                                     Categories
-                </Link>
+                                </Link>
                             </li>
                             {
                                 data && data.is_admin && (
                                     <React.Fragment>
                                         <li>
-                                            <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_TEST}>
+                                            <Link onClick={this.handleClick} className="header__nav nav__list-item--admin-only" to={routes.CREATE_TEST}>
                                                 Create test
-                            </Link>
+                                            </Link>
                                         </li>
                                         <li>
-                                            <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_CATEGORY}>
+                                            <Link onClick={this.handleClick} className="header__nav nav__list-item--admin-only" to={routes.CREATE_CATEGORY}>
                                                 Create category
-                            </Link>
+                                            </Link>
                                         </li>
                                         <li>
-                                            <Link className="header__nav nav__list-item--admin-only" to={routes.DELETE_USER}>
+                                            <Link onClick={this.handleClick} className="header__nav nav__list-item--admin-only" to={routes.DELETE_USER}>
                                                 Delete data
-                            </Link>
+                                            </Link>
                                         </li>
                                     </React.Fragment>
                                 )
@@ -88,8 +90,8 @@ export default class header extends Component {
                             !data
                                 ? (
                                     <React.Fragment>
-                                        <Link className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>
-                                        <Link className="header__links--sign-up link--btn link--btn25" to={routes.SIGN_UP}>Sign up</Link>
+                                        <Link onClick={this.handleClick} className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>
+                                        <Link onClick={this.handleClick} className="header__links--sign-up link--btn link--btn25" to={routes.SIGN_UP}>Sign up</Link>
                                     </React.Fragment>
                                 )
                                 : (

src/styles/components/_button.scss

@@ -1,5 +1,6 @@
 .link {
     &--btn {
+        display: inline-block !important;
         text-transform: uppercase;
         font-family: 'Poiret One', cursive;
         font-weight: bold;

src/styles/components/_header.scss

@@ -76,7 +76,7 @@
         }
         &__toggle-trigger {
             position: absolute;
-            top: 70%;
+            top: 65%;
             cursor: pointer;
             left: 0;
             margin-left: 1em;
@@ -145,12 +145,12 @@
         .header__links {
             display: flex;
             justify-content: center;
-
             &--sign-in {
                 margin-right: 1.5vw;
             }
             &--sign-up {
                 margin-left: 1.5vw;
+                margin-right: 0;
             }
         }
     }

src/styles/components/_landingPage.scss

@@ -32,22 +32,27 @@
         justify-content: space-between;
         width: 25%;
         padding: 9vh;
+        @media screen and (max-width: 1125px) {
+            padding: 4vh 7vh;
+        }
     }
     // not correct spelling -> have to ask && change
     &__links {
         border: none;
         box-shadow: 0 0 10px grey;
         background: rgba(232,230, 230, 0.9);
-        padding: 3vh 0;
-        margin: 5px;
         text-transform: uppercase;
+        margin: 5px;
+        padding: 3vh 0;
         font-family: 'Cormorant Infant', serif;
         font-weight: bold;
         font-size: 16px;
         text-align: center;
         width: 20vh;
-            @media screen and (max-width: 1125px) {
+        @media screen and (max-width: 1125px) {
                 width: 100%;
+                margin: 10px 0;
+                padding: 2.5vh 0;
             }
         transition: all 0.6s ease-in-out;
     }