From 47aae9514384e419e6adec062841c4a77678e619 Mon Sep 17 00:00:00 2001
From: Alexander Bell <mail@alexbell.de>
Date: Wed, 6 Jun 2018 09:12:49 -0700
Subject: [PATCH] Only pixel. Input integer instead of string. Style changed a
 little

---
 package.json           |  2 +-
 src/components/Menu.js | 51 +++++++++++++++++++++---------------------
 src/styles/Menu.css    |  2 +-
 3 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 3e8ee49..c03da4a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-animated-menus",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "description": "React component that mounts three dot button that morphs into a menu by clicking on it.",
     "main": "./lib/index.js",
     "license": "MIT",
diff --git a/src/components/Menu.js b/src/components/Menu.js
index 8ba604a..90cb87e 100644
--- a/src/components/Menu.js
+++ b/src/components/Menu.js
@@ -113,7 +113,7 @@ class App extends Component {
           duration: function(targetElements, i, l) {
             return 400 + (i * 200);
           },
-          easing: 'easeOutCubic',
+          easing: 'easeInOutCubic',
           offset: '-=1700'
         });
     } else {
@@ -180,35 +180,36 @@ class App extends Component {
     const inputWidth = this.props.width;
     const inputHeight = this.props.height;
 
-    if(!(inputWidth ||inputHeight)) {
-      console.log("Please define a height OR width!");
-    }
-    //Units and values seperated
-    if(inputWidth !== undefined) {
-      //Width
-      const unitWidth = inputWidth.replace(/[\d]+/g,"");
-      const valueWidth = parseFloat(inputWidth);
+    if(!(inputWidth || inputHeight) || !isNaN(inputWidth) || isNaN(inputHeight)) {
+      console.log("Please define a height OR width correctly! Only define one of both. It has to be an integer!");
+      return {
+        width: 0,
+        height: 0
+      }
+    } else {
+      //Units and values seperated
+      if(inputWidth !== undefined) {
+        //Width
+        const valueWidth = parseInt(inputWidth);
+        //Height
+        const valueHeight = valueWidth * 2.5;
+
+        return {
+          width: String(valueWidth) + 'px',
+          height: String(valueHeight) + 'px'
+        }
+      }
+
       //Height
-      const unitHeight = unitWidth;
-      const valueHeight = valueWidth * 2.5;
+      const valueHeight = parseInt(inputHeight);
+      //Width
+      const valueWidth = valueHeight / 2.5;
 
       return {
-        width: String(valueWidth) + unitWidth,
-        height: String(valueHeight) + unitHeight
+        width: String(valueWidth) + 'px',
+        height: String(valueHeight) + 'px'
       }
     }
-
-    //Height
-    const unitHeight = inputHeight.replace(/[\d]+/g,"");
-    const valueHeight = parseFloat(inputHeight);
-    //Width
-    const unitWidth = unitHeight;
-    const valueWidth = valueHeight / 2.5;
-
-    return {
-      width: String(valueWidth) + unitWidth,
-      height: String(valueHeight) + unitHeight
-    }
   }
 
 
diff --git a/src/styles/Menu.css b/src/styles/Menu.css
index 50e3d2c..5f364f8 100644
--- a/src/styles/Menu.css
+++ b/src/styles/Menu.css
@@ -67,7 +67,7 @@
 }
 .Menu_button:hover {
   background-color: rgb(227, 227, 227);
-  padding-left: 5%;
+  padding-left: 10%;
 }
 .Menu_button:active {
   transition: background-color 0.1s;