From be0df2d563ad038233c6aca705a2c56d282338f5 Mon Sep 17 00:00:00 2001
From: Floyd Chen <chen2918@umn.edu>
Date: Mon, 23 Jul 2018 11:14:16 -0500
Subject: [PATCH 1/6] added comments to nav

---
 src/Nav/Nav.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Nav/Nav.js b/src/Nav/Nav.js
index af29de9f..56002680 100644
--- a/src/Nav/Nav.js
+++ b/src/Nav/Nav.js
@@ -14,8 +14,10 @@ export class Nav extends React.Component {
     };
   }
 
+  // floyd: i don't think we need this function if we handle onClick properly
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.activeIndex !== this.props.activeIndex) {
+      console.log("check check");
       this.setState({ "activeIndex": nextProps.activeIndex });
     }
   }
@@ -46,6 +48,7 @@ export class Nav extends React.Component {
         ignoreActive={ignoreActive}
       >
         {data.map(nav => {
+          console.log("nav", nav);
           const { title, collapsed, ...others } = nav;
           if (!nav.subNav) {
             return (

From 8624dd9b420bdcfad2afee61d3d5d20c89f614c1 Mon Sep 17 00:00:00 2001
From: Floyd Chen <chen2918@umn.edu>
Date: Thu, 26 Jul 2018 08:46:18 -0500
Subject: [PATCH 2/6] not finished. stuck on the hamburger of horizontal navs

---
 src/Nav/Nav.css         |   5 +
 src/Nav/Nav.js          | 314 ++++++++++++++++++++++++++++++++++------
 src/Nav/README.md       |  28 +++-
 src/NavItem/NavItem.css |  13 +-
 src/NavItem/NavItem.js  |  68 ++++++++-
 src/styles/layout.css   |   2 +-
 6 files changed, 373 insertions(+), 57 deletions(-)

diff --git a/src/Nav/Nav.css b/src/Nav/Nav.css
index cfc6bdec..3aed5e2b 100644
--- a/src/Nav/Nav.css
+++ b/src/Nav/Nav.css
@@ -6,6 +6,11 @@
     height: auto;
 }
 
+.horizontal {
+    display: flex;
+    flex-direction: row;
+}
+
 .nav a {
     text-decoration: none;
 }
\ No newline at end of file
diff --git a/src/Nav/Nav.js b/src/Nav/Nav.js
index 56002680..1d8ae473 100644
--- a/src/Nav/Nav.js
+++ b/src/Nav/Nav.js
@@ -8,20 +8,44 @@ import { NavItem } from "../NavItem";
 export class Nav extends React.Component {
   constructor(props) {
     super(props);
+    this.NavRef = React.createRef();
     this.state = {
       "activeIndex": props.activeIndex, // The index of selected menu item.
-      "collapsed": props.collapsed // Whether or not sub-nav menu collapsed.
+      "collapsed": props.collapsed, // Whether or not sub-nav menu collapsed.
+      "width": window.innerWidth // the width of the Nav,
+      // "visibleNavItems":
     };
   }
 
+  componentDidMount() {
+    if (this.props.horizontal && typeof this.props.subNav === "undefined") {
+      // console.log('width', this.NavRef.current.offsetWidth);
+      // console.log('left', this.NavRef.current.offsetLeft);
+      console.log(
+        "right",
+        this.NavRef.current.offsetLeft + this.NavRef.current.offsetWidth
+      );
+      console.log("window.innerWidth", window.innerWidth);
+      // const lastChildWidth = this.NavRef.current.children[this.NavRef.current.children.length - 1].offsetWidth;
+      // const lastChildLeft = this.NavRef.current.children[this.NavRef.current.children.length - 1].offsetLeft;
+      // console.log('last child\'s offset right', lastChildLeft + lastChildWidth);
+    }
+
+    window.addEventListener("resize", this.updateDimensions);
+  }
+
   // floyd: i don't think we need this function if we handle onClick properly
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.activeIndex !== this.props.activeIndex) {
-      console.log("check check");
+      // console.log("check check");
       this.setState({ "activeIndex": nextProps.activeIndex });
     }
   }
 
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.updateDimensions);
+  }
+
   _handleClick = (index, event) => {
     this.setState({ "activeIndex": index });
     if (this.props.onClick) {
@@ -36,11 +60,44 @@ export class Nav extends React.Component {
     }
   };
 
-  _buildNavByData = () => {
-    const { className, data, ignoreActive, onClick, style } = this.props;
+  updateNav = () => {
+    console.log("nav should shrink now!");
+  };
+
+  updateDimensions = () => {
+    this.setState({
+      "width": window.innerWidth
+    });
+    if (this.NavRef.current !== null) {
+      const lastChildWidth = this.NavRef.current.children[
+        this.NavRef.current.children.length - 1
+      ].offsetWidth;
+      const lastChildLeft = this.NavRef.current.children[
+        this.NavRef.current.children.length - 1
+      ].offsetLeft;
+      const lastChildRight = lastChildWidth + lastChildLeft;
+      if (window.innerWidth < lastChildRight) {
+        this.updateNav();
+      }
+    }
+  };
+
+  _buildNavByData = data => {
+    const {
+      className,
+      ignoreActive,
+      onClick,
+      style,
+      subNav,
+      horizontal
+    } = this.props;
     return (
       <Nav
-        styleName={cx("nav")}
+        styleName={
+          horizontal && typeof subNav === "undefined"
+            ? cx("nav", "horizontal")
+            : cx("nav")
+        }
         className={className}
         style={style}
         activeIndex={this.state.activeIndex}
@@ -48,12 +105,15 @@ export class Nav extends React.Component {
         ignoreActive={ignoreActive}
       >
         {data.map(nav => {
-          console.log("nav", nav);
           const { title, collapsed, ...others } = nav;
           if (!nav.subNav) {
             return (
               // NavItems with no subNav
-              <NavItem key={"navItem_" + nav.navKey} {...others}>
+              <NavItem
+                key={"navItem_" + nav.navKey}
+                horizontal={horizontal}
+                {...others}
+              >
                 {title}
               </NavItem>
             );
@@ -63,19 +123,31 @@ export class Nav extends React.Component {
             // If NavItem has a subNav, wrap it in a new Nav
             <Nav
               key={"nav_" + nav.navKey}
-              styleName={cx("nav")}
+              styleName={
+                horizontal && typeof subNav === "undefined"
+                  ? cx("nav", "horizontal")
+                  : cx("nav")
+              }
               collapsed={collapsed}
               onClick={onClick}
             >
               {/* The following NavItem component is the parent for a collapsible group. */}
-              <NavItem key={"navItem_" + nav.navKey} {...others}>
+              <NavItem
+                key={"navItem_" + nav.navKey}
+                horizontal={horizontal}
+                {...others}
+              >
                 {title}
               </NavItem>
-              {nav.subNav.map(subNav => {
-                const { ...otherArgs } = subNav;
+              {nav.subNav.map(subNavbar => {
+                const { ...otherArgs } = subNavbar;
                 return (
-                  <NavItem key={"navItem_" + subNav.navKey} {...otherArgs}>
-                    {subNav.title}
+                  <NavItem
+                    key={"navItem_" + subNavbar.navKey}
+                    horizontal={horizontal}
+                    {...otherArgs}
+                  >
+                    {subNavbar.title}
                   </NavItem>
                 );
               })}
@@ -86,6 +158,40 @@ export class Nav extends React.Component {
     );
   };
 
+  testData = [
+    {
+      "navKey": 0,
+      "title": "Home"
+    },
+    {
+      "navKey": 1,
+      "title": "Catalog"
+    },
+    {
+      "navKey": 2,
+      "title": "Customer Service"
+    },
+    {
+      "navKey": 3,
+      "title": "Reports",
+      "collapsed": true,
+      "subNav": [
+        {
+          "navKey": 3.1,
+          "title": "Create a Report"
+        },
+        {
+          "navKey": 3.2,
+          "title": "Remove Report"
+        }
+      ]
+    },
+    {
+      "navKey": 4,
+      "title": "Administration"
+    }
+  ];
+
   render() {
     const {
       children,
@@ -93,47 +199,153 @@ export class Nav extends React.Component {
       data,
       ignoreActive,
       style,
-      subNav
+      subNav,
+      horizontal,
+      hamburger
     } = this.props;
     let styleName;
     if (data) {
-      return this._buildNavByData();
+      return this._buildNavByData(data);
     }
     // Avoid to append styleName to ul if rendering from json data.
     styleName =
-      className.indexOf("ra_Nav__nav") === -1 ? { "styleName": cx("nav") } : {};
-    return (
-      <ul {...styleName} className={className} style={style}>
-        {React.Children.map(children, (child, index) => {
-          let active = false;
-          if (
-            (child.props.active ||
-              child.props.navKey === this.state.activeIndex) &&
-            !ignoreActive
-          ) {
-            active = true;
-          }
-          // Render a child Nav component with children, mark it as subNav
-          if (typeof child.props.children === "object") {
+      className.indexOf("ra_Nav__nav") === -1
+        ? horizontal && typeof subNav === "undefined"
+          ? { "styleName": cx("nav", "horizontal") }
+          : { "styleName": cx("nav") }
+        : {};
+
+    if (!hamburger) {
+      return (
+        <ul
+          {...styleName}
+          className={className}
+          style={style}
+          ref={horizontal && typeof subNav === "undefined" ? this.NavRef : null}
+        >
+          {React.Children.map(children, (child, index) => {
+            let active = false;
+            if (
+              (child.props.active ||
+                child.props.navKey === this.state.activeIndex) &&
+              !ignoreActive
+            ) {
+              active = true;
+            }
+            // Render a child Nav component with children, mark it as subNav
+            if (typeof child.props.children === "object") {
+              // console.log('child as a subNav', child);
+              return cloneElement(child, {
+                "activeIndex": this.state.activeIndex,
+                "subNav": true,
+                "onClick": this._handleClick,
+                "ignoreActive": ignoreActive,
+                horizontal
+              });
+            }
+            let isParent = subNav && index === 0;
+            // Render NavItem components, adding subNav and parent identifiers accordingly
             return cloneElement(child, {
-              "activeIndex": this.state.activeIndex,
-              "subNav": true,
-              "onClick": this._handleClick,
-              "ignoreActive": ignoreActive
+              "subNav": subNav && !isParent,
+              "parent": isParent,
+              "collapsed": this.state.collapsed,
+              active,
+              "onClick": isParent ? this._handleCollapse : this._handleClick,
+              horizontal
             });
-          }
-          let isParent = subNav && index === 0;
-          // Render NavItem components, adding subNav and parent identifiers accordingly
-          return cloneElement(child, {
-            "subNav": subNav && !isParent,
-            "parent": isParent,
-            "collapsed": this.state.collapsed,
-            active,
-            "onClick": isParent ? this._handleCollapse : this._handleClick
-          });
-        })}
-      </ul>
-    );
+          })}
+          <Nav
+            styleName={
+              horizontal && typeof subNav === "undefined"
+                ? cx("nav", "horizontal")
+                : cx("nav")
+            }
+            className={className}
+            style={style}
+            activeIndex={this.state.activeIndex}
+            onClick={this.props.onClick}
+            ignoreActive={ignoreActive}
+          >
+            {this.testData.map(nav => {
+              const { title, collapsed, ...others } = nav;
+              if (!nav.subNav) {
+                return (
+                  // NavItems with no subNav
+                  <NavItem
+                    key={"navItem_" + nav.navKey}
+                    horizontal={horizontal}
+                    {...others}
+                  >
+                    {title}
+                  </NavItem>
+                );
+              }
+
+              return (
+                // If NavItem has a subNav, wrap it in a new Nav
+                <Nav
+                  key={"nav_" + nav.navKey}
+                  styleName={
+                    horizontal && typeof subNav === "undefined"
+                      ? cx("nav", "horizontal")
+                      : cx("nav")
+                  }
+                  collapsed={collapsed}
+                  onClick={this.props.onClick}
+                >
+                  {/* The following NavItem component is the parent for a collapsible group. */}
+                  <NavItem
+                    key={"navItem_" + nav.navKey}
+                    horizontal={horizontal}
+                    {...others}
+                  >
+                    {title}
+                  </NavItem>
+                  {nav.subNav.map(subNavbar => {
+                    const { ...otherArgs } = subNavbar;
+                    return (
+                      <NavItem
+                        key={"navItem_" + subNavbar.navKey}
+                        horizontal={horizontal}
+                        {...otherArgs}
+                      >
+                        {subNavbar.title}
+                      </NavItem>
+                    );
+                  })}
+                </Nav>
+              );
+            })}
+          </Nav>
+        </ul>
+      );
+    } else {
+      return (
+        <ul {...styleName} className={className} style={style}>
+          {React.Children.map(children, (child, index) => {
+            // Render a child Nav component with children, mark it as subNav
+            if (typeof child.props.children === "object") {
+              return cloneElement(child, {
+                "activeIndex": this.state.activeIndex,
+                "subNav": true,
+                "onClick": this._handleClick,
+                "ignoreActive": ignoreActive,
+                horizontal
+              });
+            }
+            let isParent = subNav && index === 0;
+            // Render NavItem components, adding subNav and parent identifiers accordingly
+            return cloneElement(child, {
+              "subNav": subNav && !isParent,
+              "parent": isParent,
+              "collapsed": this.state.collapsed,
+              "onClick": isParent ? this._handleCollapse : this._handleClick,
+              horizontal
+            });
+          })}
+        </ul>
+      );
+    }
   }
 }
 
@@ -161,14 +373,20 @@ Nav.propTypes = {
   /** Set true If is a sub-Nav container, not a public prop.
    * @ignore
    */
-  "subNav": PropTypes.bool
+  "subNav": PropTypes.bool,
+  /** Define whether the Nav is vertical or horizontal, Nav is vertical by default */
+  "horizontal": PropTypes.bool,
+  /** This prop indicates if the current Nav is a hamburger Nav inside another */
+  "hamburger": PropTypes.bool
 };
 
 Nav.defaultProps = {
   "className": "",
   "collapsed": false,
   "data": null,
-  "ignoreActive": false
+  "ignoreActive": false,
+  "horizontal": false,
+  "hamburger": false
 };
 
 export default CSSModules(Nav, styles, { "allowMultiple": true });
diff --git a/src/Nav/README.md b/src/Nav/README.md
index 7538e7ca..cb6cbdbd 100644
--- a/src/Nav/README.md
+++ b/src/Nav/README.md
@@ -1,4 +1,4 @@
-Basic Nav component:
+Basic Vertical Nav component:
     <Nav activeIndex={0}>
         <NavItem navKey={0}>Home</NavItem>
         <NavItem navKey={1}>Catalog</NavItem>
@@ -6,7 +6,31 @@ Basic Nav component:
         <NavItem navKey={3}>Administration</NavItem>
         <NavItem navKey={4}>Support</NavItem>
     </Nav>
-
+    
+Basic Horizontal Nav component:
+    <Nav activeIndex={0} horizontal>
+        <NavItem navKey={0}>Home</NavItem>
+        <NavItem navKey={1}>Catalog</NavItem>
+        <NavItem navKey={2}>Customer Service</NavItem>
+        <NavItem navKey={3}>Administration</NavItem>
+        <NavItem navKey={4}>Support</NavItem>
+    </Nav>
+    
+Horizontal Nav with sub-NavItems:
+    <Nav activeIndex={0} horizontal>
+        <NavItem navKey={0}>Home</NavItem>
+        <NavItem navKey={1}>Catalog</NavItem>
+        <NavItem navKey={2}>Customer Service</NavItem>
+        <Nav>
+            <NavItem navKey={3}>Reports</NavItem>
+            <NavItem navKey={3.1}>Create a Report</NavItem>
+            <NavItem navKey={3.2}>Edit a Report</NavItem>
+            <NavItem navKey={3.3}>Delete a Report</NavItem>
+        </Nav>
+        <NavItem navKey={4}>Administration</NavItem>
+        <NavItem navKey={5}>Support</NavItem>
+    </Nav>
+    
 Nav with sub-NavItems:
     <Nav activeIndex={0}>
         <NavItem navKey={0}>Home</NavItem>
diff --git a/src/NavItem/NavItem.css b/src/NavItem/NavItem.css
index 45ec2cfc..9c42cd73 100644
--- a/src/NavItem/NavItem.css
+++ b/src/NavItem/NavItem.css
@@ -2,7 +2,7 @@
 
 .base {
     border-style: none;
-    border-top: 1px solid #eee !important; /* Important designation needed to overwrite Button styling in prod build */
+    /*border-top: 1px solid #eee !important; !* Important designation needed to overwrite Button styling in prod build *!*/
 }
 
 .subNav {
@@ -24,8 +24,15 @@
     padding: 10px 15px;
     background-color: #fff;
     text-align: left;
+    white-space: nowrap;
 }
 
+.horizontal > button {
+    border-top: solid 5px transparent;
+    border-left: none;
+}
+
+
 .subNav button {
     padding-left: 38px;
 }
@@ -49,6 +56,10 @@
     color: #003058;
 }
 
+.horizontal.active > button {
+    border-top: solid 5px #003058 !important;
+}
+
 .caret::before {
     content: "";
     border: solid #003058;
diff --git a/src/NavItem/NavItem.js b/src/NavItem/NavItem.js
index 7eccf38f..79d9da61 100644
--- a/src/NavItem/NavItem.js
+++ b/src/NavItem/NavItem.js
@@ -6,12 +6,41 @@ import CSSModules from "react-css-modules";
 import styles from "./NavItem.css";
 
 export class NavItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.NavItemRef = React.createRef();
+
+    this.state = {
+      "visible": false // indicate if this NavItem is visible in Nav or hidden in rightmost dropdown
+    };
+  }
+
+  componentDidMount() {
+    this.updateVisibility();
+    window.addEventListener("resize", this.updateVisibility);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.updateVisibility);
+  }
+
   _handleClick = event => {
     if (this.props.onClick) {
       this.props.onClick(this.props.navKey, event);
     }
   };
 
+  updateVisibility = () => {
+    // console.log('right', this.NavItemRef.current.offsetWidth + this.NavItemRef.current.offsetLeft);
+    // console.log('window.innerWidth', window.innerWidth);
+    this.setState({
+      "visible":
+        this.NavItemRef.current.offsetWidth +
+          this.NavItemRef.current.offsetLeft <=
+        window.innerWidth
+    });
+  };
+
   render() {
     const {
       as,
@@ -24,13 +53,18 @@ export class NavItem extends React.Component {
       subNav,
       collapsed,
       children,
+      horizontal,
       ...others
     } = this.props;
 
     const button = 
       <Button
         disabled={disabled}
-        styleName={cx("link", { disabled, subNav })}
+        styleName={
+          !horizontal || horizontal && subNav
+            ? cx("link", disabled, subNav)
+            : cx("link", "horizontal", disabled, subNav)
+        }
         link
         href={typeof to === "undefined" ? href : null}
         onClick={typeof to === "undefined" ? this._handleClick : null}
@@ -39,15 +73,26 @@ export class NavItem extends React.Component {
         <i styleName={cx({ "caret": parent })} />
       </Button>
     ;
+
     const LinkElement = this.props.as;
 
     if (typeof as !== "undefined" && !disabled) {
       return (
         <li
           role="presentation"
-          styleName={cx("navItem", { active, disabled, collapsed, subNav })}
+          styleName={
+            !horizontal || horizontal && subNav
+              ? cx("navItem", { active, disabled, collapsed, subNav })
+              : cx("navItem", "horizontal", {
+                  active,
+                  disabled,
+                  collapsed,
+                  subNav
+                })
+          }
           style={style}
           className={className}
+          ref={this.NavItemRef}
         >
           <LinkElement {...others} onClick={this._handleClick}>
             {button}
@@ -58,9 +103,19 @@ export class NavItem extends React.Component {
       return (
         <li
           role="presentation"
-          styleName={cx("navItem", { active, disabled, collapsed, subNav })}
+          styleName={
+            !horizontal || horizontal && subNav
+              ? cx("navItem", { active, disabled, collapsed, subNav })
+              : cx("navItem", "horizontal", {
+                  active,
+                  disabled,
+                  collapsed,
+                  subNav
+                })
+          }
           style={style}
           className={className}
+          ref={this.NavItemRef}
         >
           {button}
         </li>
@@ -112,11 +167,14 @@ NavItem.propTypes = {
   /** callback for Nav Component
    * @ignore
    */
-  "onClick": PropTypes.func
+  "onClick": PropTypes.func,
+  /** Define whether the NavItem is vertical or horizontal, NavItem is vertical by default */
+  "horizontal": PropTypes.bool
 };
 
 NavItem.defaultProps = {
-  "className": ""
+  "className": "",
+  "horizontal": false
 };
 
 export default CSSModules(NavItem, styles, { "allowMultiple": true });
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 04fb7d20..a27c24a7 100755
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -64,7 +64,7 @@
 
 .pad-0 { padding: 0 }
 
-.pad-0-25 {padding: var(--space-0-25) };
+.pad-0-25 {padding: var(--space-0-25) }
 .pad-v-0-25 {padding-top: var(--space-0-25); padding-bottom: var(--space-0-25) }
 .pad-h-0-25 {padding-left: var(--space-0-25); padding-right: var(--space-0-25) }
 

From 21cdff6a01925a678c3dc25f581337e28c9af965 Mon Sep 17 00:00:00 2001
From: Floyd Chen <chen2918@umn.edu>
Date: Fri, 27 Jul 2018 15:27:33 -0500
Subject: [PATCH 3/6] finished first phase for horizontal nav

---
 src/Nav/Nav.js          | 209 ++++++++--------------------------------
 src/NavItem/NavItem.css |   6 +-
 2 files changed, 44 insertions(+), 171 deletions(-)

diff --git a/src/Nav/Nav.js b/src/Nav/Nav.js
index 1d8ae473..e70d0aca 100644
--- a/src/Nav/Nav.js
+++ b/src/Nav/Nav.js
@@ -158,40 +158,6 @@ export class Nav extends React.Component {
     );
   };
 
-  testData = [
-    {
-      "navKey": 0,
-      "title": "Home"
-    },
-    {
-      "navKey": 1,
-      "title": "Catalog"
-    },
-    {
-      "navKey": 2,
-      "title": "Customer Service"
-    },
-    {
-      "navKey": 3,
-      "title": "Reports",
-      "collapsed": true,
-      "subNav": [
-        {
-          "navKey": 3.1,
-          "title": "Create a Report"
-        },
-        {
-          "navKey": 3.2,
-          "title": "Remove Report"
-        }
-      ]
-    },
-    {
-      "navKey": 4,
-      "title": "Administration"
-    }
-  ];
-
   render() {
     const {
       children,
@@ -200,8 +166,7 @@ export class Nav extends React.Component {
       ignoreActive,
       style,
       subNav,
-      horizontal,
-      hamburger
+      horizontal
     } = this.props;
     let styleName;
     if (data) {
@@ -215,137 +180,46 @@ export class Nav extends React.Component {
           : { "styleName": cx("nav") }
         : {};
 
-    if (!hamburger) {
-      return (
-        <ul
-          {...styleName}
-          className={className}
-          style={style}
-          ref={horizontal && typeof subNav === "undefined" ? this.NavRef : null}
-        >
-          {React.Children.map(children, (child, index) => {
-            let active = false;
-            if (
-              (child.props.active ||
-                child.props.navKey === this.state.activeIndex) &&
-              !ignoreActive
-            ) {
-              active = true;
-            }
-            // Render a child Nav component with children, mark it as subNav
-            if (typeof child.props.children === "object") {
-              // console.log('child as a subNav', child);
-              return cloneElement(child, {
-                "activeIndex": this.state.activeIndex,
-                "subNav": true,
-                "onClick": this._handleClick,
-                "ignoreActive": ignoreActive,
-                horizontal
-              });
-            }
-            let isParent = subNav && index === 0;
-            // Render NavItem components, adding subNav and parent identifiers accordingly
-            return cloneElement(child, {
-              "subNav": subNav && !isParent,
-              "parent": isParent,
-              "collapsed": this.state.collapsed,
-              active,
-              "onClick": isParent ? this._handleCollapse : this._handleClick,
-              horizontal
-            });
-          })}
-          <Nav
-            styleName={
-              horizontal && typeof subNav === "undefined"
-                ? cx("nav", "horizontal")
-                : cx("nav")
-            }
-            className={className}
-            style={style}
-            activeIndex={this.state.activeIndex}
-            onClick={this.props.onClick}
-            ignoreActive={ignoreActive}
-          >
-            {this.testData.map(nav => {
-              const { title, collapsed, ...others } = nav;
-              if (!nav.subNav) {
-                return (
-                  // NavItems with no subNav
-                  <NavItem
-                    key={"navItem_" + nav.navKey}
-                    horizontal={horizontal}
-                    {...others}
-                  >
-                    {title}
-                  </NavItem>
-                );
-              }
-
-              return (
-                // If NavItem has a subNav, wrap it in a new Nav
-                <Nav
-                  key={"nav_" + nav.navKey}
-                  styleName={
-                    horizontal && typeof subNav === "undefined"
-                      ? cx("nav", "horizontal")
-                      : cx("nav")
-                  }
-                  collapsed={collapsed}
-                  onClick={this.props.onClick}
-                >
-                  {/* The following NavItem component is the parent for a collapsible group. */}
-                  <NavItem
-                    key={"navItem_" + nav.navKey}
-                    horizontal={horizontal}
-                    {...others}
-                  >
-                    {title}
-                  </NavItem>
-                  {nav.subNav.map(subNavbar => {
-                    const { ...otherArgs } = subNavbar;
-                    return (
-                      <NavItem
-                        key={"navItem_" + subNavbar.navKey}
-                        horizontal={horizontal}
-                        {...otherArgs}
-                      >
-                        {subNavbar.title}
-                      </NavItem>
-                    );
-                  })}
-                </Nav>
-              );
-            })}
-          </Nav>
-        </ul>
-      );
-    } else {
-      return (
-        <ul {...styleName} className={className} style={style}>
-          {React.Children.map(children, (child, index) => {
-            // Render a child Nav component with children, mark it as subNav
-            if (typeof child.props.children === "object") {
-              return cloneElement(child, {
-                "activeIndex": this.state.activeIndex,
-                "subNav": true,
-                "onClick": this._handleClick,
-                "ignoreActive": ignoreActive,
-                horizontal
-              });
-            }
-            let isParent = subNav && index === 0;
-            // Render NavItem components, adding subNav and parent identifiers accordingly
+    return (
+      <ul
+        {...styleName}
+        className={className}
+        style={style}
+        ref={horizontal && typeof subNav === "undefined" ? this.NavRef : null}
+      >
+        {React.Children.map(children, (child, index) => {
+          let active = false;
+          if (
+            (child.props.active ||
+              child.props.navKey === this.state.activeIndex) &&
+            !ignoreActive
+          ) {
+            active = true;
+          }
+          // Render a child Nav component with children, mark it as subNav
+          if (typeof child.props.children === "object") {
+            // console.log('child as a subNav', child);
             return cloneElement(child, {
-              "subNav": subNav && !isParent,
-              "parent": isParent,
-              "collapsed": this.state.collapsed,
-              "onClick": isParent ? this._handleCollapse : this._handleClick,
+              "activeIndex": this.state.activeIndex,
+              "subNav": true,
+              "onClick": this._handleClick,
+              "ignoreActive": ignoreActive,
               horizontal
             });
-          })}
-        </ul>
-      );
-    }
+          }
+          let isParent = subNav && index === 0;
+          // Render NavItem components, adding subNav and parent identifiers accordingly
+          return cloneElement(child, {
+            "subNav": subNav && !isParent,
+            "parent": isParent,
+            "collapsed": this.state.collapsed,
+            active,
+            "onClick": isParent ? this._handleCollapse : this._handleClick,
+            horizontal
+          });
+        })}
+      </ul>
+    );
   }
 }
 
@@ -375,9 +249,7 @@ Nav.propTypes = {
    */
   "subNav": PropTypes.bool,
   /** Define whether the Nav is vertical or horizontal, Nav is vertical by default */
-  "horizontal": PropTypes.bool,
-  /** This prop indicates if the current Nav is a hamburger Nav inside another */
-  "hamburger": PropTypes.bool
+  "horizontal": PropTypes.bool
 };
 
 Nav.defaultProps = {
@@ -385,8 +257,7 @@ Nav.defaultProps = {
   "collapsed": false,
   "data": null,
   "ignoreActive": false,
-  "horizontal": false,
-  "hamburger": false
+  "horizontal": false
 };
 
 export default CSSModules(Nav, styles, { "allowMultiple": true });
diff --git a/src/NavItem/NavItem.css b/src/NavItem/NavItem.css
index 9c42cd73..fc5ed3e8 100644
--- a/src/NavItem/NavItem.css
+++ b/src/NavItem/NavItem.css
@@ -24,14 +24,16 @@
     padding: 10px 15px;
     background-color: #fff;
     text-align: left;
-    white-space: nowrap;
 }
 
-.horizontal > button {
+.horizontal button {
     border-top: solid 5px transparent;
     border-left: none;
 }
 
+.horizontal ~ li > button {
+    padding-left: 10px !important;
+}
 
 .subNav button {
     padding-left: 38px;

From db691008bdbb96649d0000fdcbdbfec5ed98395f Mon Sep 17 00:00:00 2001
From: Floyd Chen <chen2918@umn.edu>
Date: Mon, 30 Jul 2018 09:17:12 -0500
Subject: [PATCH 4/6] fixed nav.js and get rid of extra comments

---
 src/Nav/Nav.js         | 50 +-----------------------------------------
 src/NavItem/NavItem.js |  2 --
 2 files changed, 1 insertion(+), 51 deletions(-)

diff --git a/src/Nav/Nav.js b/src/Nav/Nav.js
index e70d0aca..28f54412 100644
--- a/src/Nav/Nav.js
+++ b/src/Nav/Nav.js
@@ -11,41 +11,16 @@ export class Nav extends React.Component {
     this.NavRef = React.createRef();
     this.state = {
       "activeIndex": props.activeIndex, // The index of selected menu item.
-      "collapsed": props.collapsed, // Whether or not sub-nav menu collapsed.
-      "width": window.innerWidth // the width of the Nav,
-      // "visibleNavItems":
+      "collapsed": props.collapsed // Whether or not sub-nav menu collapsed.
     };
   }
 
-  componentDidMount() {
-    if (this.props.horizontal && typeof this.props.subNav === "undefined") {
-      // console.log('width', this.NavRef.current.offsetWidth);
-      // console.log('left', this.NavRef.current.offsetLeft);
-      console.log(
-        "right",
-        this.NavRef.current.offsetLeft + this.NavRef.current.offsetWidth
-      );
-      console.log("window.innerWidth", window.innerWidth);
-      // const lastChildWidth = this.NavRef.current.children[this.NavRef.current.children.length - 1].offsetWidth;
-      // const lastChildLeft = this.NavRef.current.children[this.NavRef.current.children.length - 1].offsetLeft;
-      // console.log('last child\'s offset right', lastChildLeft + lastChildWidth);
-    }
-
-    window.addEventListener("resize", this.updateDimensions);
-  }
-
-  // floyd: i don't think we need this function if we handle onClick properly
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.activeIndex !== this.props.activeIndex) {
-      // console.log("check check");
       this.setState({ "activeIndex": nextProps.activeIndex });
     }
   }
 
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.updateDimensions);
-  }
-
   _handleClick = (index, event) => {
     this.setState({ "activeIndex": index });
     if (this.props.onClick) {
@@ -60,28 +35,6 @@ export class Nav extends React.Component {
     }
   };
 
-  updateNav = () => {
-    console.log("nav should shrink now!");
-  };
-
-  updateDimensions = () => {
-    this.setState({
-      "width": window.innerWidth
-    });
-    if (this.NavRef.current !== null) {
-      const lastChildWidth = this.NavRef.current.children[
-        this.NavRef.current.children.length - 1
-      ].offsetWidth;
-      const lastChildLeft = this.NavRef.current.children[
-        this.NavRef.current.children.length - 1
-      ].offsetLeft;
-      const lastChildRight = lastChildWidth + lastChildLeft;
-      if (window.innerWidth < lastChildRight) {
-        this.updateNav();
-      }
-    }
-  };
-
   _buildNavByData = data => {
     const {
       className,
@@ -198,7 +151,6 @@ export class Nav extends React.Component {
           }
           // Render a child Nav component with children, mark it as subNav
           if (typeof child.props.children === "object") {
-            // console.log('child as a subNav', child);
             return cloneElement(child, {
               "activeIndex": this.state.activeIndex,
               "subNav": true,
diff --git a/src/NavItem/NavItem.js b/src/NavItem/NavItem.js
index 79d9da61..70b337bc 100644
--- a/src/NavItem/NavItem.js
+++ b/src/NavItem/NavItem.js
@@ -31,8 +31,6 @@ export class NavItem extends React.Component {
   };
 
   updateVisibility = () => {
-    // console.log('right', this.NavItemRef.current.offsetWidth + this.NavItemRef.current.offsetLeft);
-    // console.log('window.innerWidth', window.innerWidth);
     this.setState({
       "visible":
         this.NavItemRef.current.offsetWidth +

From ad4b9c5737a960e5fb9e39f9f657674602fb3c72 Mon Sep 17 00:00:00 2001
From: Floyd Chen <chen2918@umn.edu>
Date: Mon, 30 Jul 2018 14:38:29 -0500
Subject: [PATCH 5/6] got rid of ref and change NavItem.css to use var instead
 of hexa colors

---
 src/Nav/Nav.js          |  8 +-------
 src/NavItem/NavItem.css | 23 ++++++++++++-----------
 src/NavItem/NavItem.js  | 21 ---------------------
 3 files changed, 13 insertions(+), 39 deletions(-)

diff --git a/src/Nav/Nav.js b/src/Nav/Nav.js
index 28f54412..8d633e2f 100644
--- a/src/Nav/Nav.js
+++ b/src/Nav/Nav.js
@@ -8,7 +8,6 @@ import { NavItem } from "../NavItem";
 export class Nav extends React.Component {
   constructor(props) {
     super(props);
-    this.NavRef = React.createRef();
     this.state = {
       "activeIndex": props.activeIndex, // The index of selected menu item.
       "collapsed": props.collapsed // Whether or not sub-nav menu collapsed.
@@ -134,12 +133,7 @@ export class Nav extends React.Component {
         : {};
 
     return (
-      <ul
-        {...styleName}
-        className={className}
-        style={style}
-        ref={horizontal && typeof subNav === "undefined" ? this.NavRef : null}
-      >
+      <ul {...styleName} className={className} style={style}>
         {React.Children.map(children, (child, index) => {
           let active = false;
           if (
diff --git a/src/NavItem/NavItem.css b/src/NavItem/NavItem.css
index fc5ed3e8..8ab26bb1 100644
--- a/src/NavItem/NavItem.css
+++ b/src/NavItem/NavItem.css
@@ -1,4 +1,5 @@
 @import '../Button/Button.css';
+@import '../styles/variables.css';
 
 .base {
     border-style: none;
@@ -16,13 +17,13 @@
 
 .navItem button {
     width: 100%;
-    border-color: #eee;
+    border-color: var(--silver);
     border-left: solid 5px transparent;
-    color: #555;
+    color: var(--dark-gray);
     position: relative;
     display: block;
     padding: 10px 15px;
-    background-color: #fff;
+    background-color: var(--white);
     text-align: left;
 }
 
@@ -44,8 +45,8 @@
 }
 
 .navItem button:hover {
-    background-color: #f4f8f9;
-    color: #555;
+    background-color: var(--silver);
+    color: var(--dark-gray);
 }
 
 .navItem button:focus {
@@ -53,18 +54,18 @@
 }
 
 .active > button, .active > a > button {
-    border-left-color: #003058;
-    background-color: #f4f8f9;
-    color: #003058;
+    border-left-color: var(--blue);
+    background-color: var(--silver);
+    color: var(--blue);
 }
 
 .horizontal.active > button {
-    border-top: solid 5px #003058 !important;
+    border-top: solid 5px var(--blue) !important;
 }
 
 .caret::before {
     content: "";
-    border: solid #003058;
+    border: solid var(--blue);
     border-width: 0 2px 2px 0;
     display: inline-block;
     padding: 5px;
@@ -81,7 +82,7 @@
     vertical-align: middle;
     float: right;
     clear: right;
-    border-color: #555;
+    border-color: var(--dark-gray);
     transform: none;
     margin: 5px 0 0;
     transition: transform .3s;
diff --git a/src/NavItem/NavItem.js b/src/NavItem/NavItem.js
index 70b337bc..ef589bad 100644
--- a/src/NavItem/NavItem.js
+++ b/src/NavItem/NavItem.js
@@ -8,37 +8,18 @@ import styles from "./NavItem.css";
 export class NavItem extends React.Component {
   constructor(props) {
     super(props);
-    this.NavItemRef = React.createRef();
 
     this.state = {
       "visible": false // indicate if this NavItem is visible in Nav or hidden in rightmost dropdown
     };
   }
 
-  componentDidMount() {
-    this.updateVisibility();
-    window.addEventListener("resize", this.updateVisibility);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.updateVisibility);
-  }
-
   _handleClick = event => {
     if (this.props.onClick) {
       this.props.onClick(this.props.navKey, event);
     }
   };
 
-  updateVisibility = () => {
-    this.setState({
-      "visible":
-        this.NavItemRef.current.offsetWidth +
-          this.NavItemRef.current.offsetLeft <=
-        window.innerWidth
-    });
-  };
-
   render() {
     const {
       as,
@@ -90,7 +71,6 @@ export class NavItem extends React.Component {
           }
           style={style}
           className={className}
-          ref={this.NavItemRef}
         >
           <LinkElement {...others} onClick={this._handleClick}>
             {button}
@@ -113,7 +93,6 @@ export class NavItem extends React.Component {
           }
           style={style}
           className={className}
-          ref={this.NavItemRef}
         >
           {button}
         </li>

From 4036269ccb1dd5aa64a26d6963f4ac3a49005afa Mon Sep 17 00:00:00 2001
From: Floyd Chen <chen2918@umn.edu>
Date: Wed, 8 Aug 2018 14:11:48 -0500
Subject: [PATCH 6/6] horizontal nav not finished yet 080818

---
 src/Nav/Nav.css         |   5 ++
 src/Nav/Nav.js          | 148 +++++++++++++++++++++++++++++-----------
 src/Nav/README.md       |   8 +--
 src/NavItem/NavItem.css |  32 +++++++--
 src/NavItem/NavItem.js  | 120 +++++++++++++++++++++++++-------
 5 files changed, 239 insertions(+), 74 deletions(-)

diff --git a/src/Nav/Nav.css b/src/Nav/Nav.css
index 3aed5e2b..6f1dc9e7 100644
--- a/src/Nav/Nav.css
+++ b/src/Nav/Nav.css
@@ -13,4 +13,9 @@
 
 .nav a {
     text-decoration: none;
+}
+
+.horizontal.nav .nav li:not(:first-child) {
+    position: absolute;
+    z-index: 9998;
 }
\ No newline at end of file
diff --git a/src/Nav/Nav.js b/src/Nav/Nav.js
index 8d633e2f..5af3949e 100644
--- a/src/Nav/Nav.js
+++ b/src/Nav/Nav.js
@@ -10,8 +10,11 @@ export class Nav extends React.Component {
     super(props);
     this.state = {
       "activeIndex": props.activeIndex, // The index of selected menu item.
-      "collapsed": props.collapsed // Whether or not sub-nav menu collapsed.
+      "collapsed": props.collapsed, // Whether or not sub-nav menu collapsed.
+      "subNavItemHeight": 0, // the NavItem's height in subNav
+      "subNavItemMaxWidth": 0
     };
+    this.subNavItemRef = React.createRef();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -34,6 +37,49 @@ export class Nav extends React.Component {
     }
   };
 
+  _setDimension = (height, width) => {
+    console.log("height", height);
+    console.log("width", width);
+    if (width > 0 && width > this.state.subNavItemMaxWidth) {
+      this.setState({
+        "subNavItemHeight": height,
+        "subNavItemMaxWidth": width
+      });
+    } else {
+      this.setState({
+        "subNavItemHeight": height
+      });
+    }
+  };
+
+  // use this ternary helper to avoid nested ternary in JSX
+  // not working for _buidNavByData
+  widthStyleTernaryHelper = (cond1, cond2, child, index, data) => {
+    let tempIndex = index;
+    if (cond1 && cond2) {
+      if (data) {
+        tempIndex += 2;
+      }
+      return {
+        "transform": `translateY(${(tempIndex - 1) *
+          this.state.subNavItemHeight}px)`,
+        "width": `${this.state.subNavItemMaxWidth}px`,
+        ...child.style
+      };
+    } else if (cond1 && !cond2) {
+      if (data) {
+        tempIndex += 2;
+      }
+      return {
+        "transform": `translateY(${(tempIndex - 1) *
+          this.state.subNavItemHeight}px)`,
+        ...child.style
+      };
+    } else {
+      return child.style;
+    }
+  };
+
   _buildNavByData = data => {
     const {
       className,
@@ -55,35 +101,57 @@ export class Nav extends React.Component {
         activeIndex={this.state.activeIndex}
         onClick={onClick}
         ignoreActive={ignoreActive}
+        horizontal={horizontal}
       >
         {data.map(nav => {
           const { title, collapsed, ...others } = nav;
-          if (!nav.subNav) {
+          if (nav.subNavArray) {
             return (
-              // NavItems with no subNav
-              <NavItem
-                key={"navItem_" + nav.navKey}
+              // If NavItem has a subNav, wrap it in a new Nav
+              <Nav
+                key={"nav_" + nav.navKey}
+                styleName={
+                  horizontal && typeof subNav === "undefined"
+                    ? cx("nav", "horizontal")
+                    : cx("nav")
+                }
+                collapsed={collapsed}
+                onClick={onClick}
                 horizontal={horizontal}
-                {...others}
               >
-                {title}
-              </NavItem>
+                {/* The following NavItem component is the parent for a collapsible group. */}
+                <NavItem
+                  key={"navItem_" + nav.navKey}
+                  horizontal={horizontal}
+                  {...others}
+                >
+                  {title}
+                </NavItem>
+                {nav.subNavArray.map((subNavbar, index) => {
+                  const { ...otherArgs } = subNavbar;
+                  return (
+                    <NavItem
+                      key={"navItem_" + subNavbar.navKey}
+                      horizontal={horizontal}
+                      ref={horizontal && subNav ? this.subNavItemRef : null}
+                      style={this.widthStyleTernaryHelper(
+                        true,
+                        true,
+                        subNavbar,
+                        index,
+                        true
+                      )}
+                      {...otherArgs}
+                    >
+                      {subNavbar.title}
+                    </NavItem>
+                  );
+                })}
+              </Nav>
             );
-          }
-
-          return (
-            // If NavItem has a subNav, wrap it in a new Nav
-            <Nav
-              key={"nav_" + nav.navKey}
-              styleName={
-                horizontal && typeof subNav === "undefined"
-                  ? cx("nav", "horizontal")
-                  : cx("nav")
-              }
-              collapsed={collapsed}
-              onClick={onClick}
-            >
-              {/* The following NavItem component is the parent for a collapsible group. */}
+          } else {
+            return (
+              // NavItems with no subNav
               <NavItem
                 key={"navItem_" + nav.navKey}
                 horizontal={horizontal}
@@ -91,20 +159,8 @@ export class Nav extends React.Component {
               >
                 {title}
               </NavItem>
-              {nav.subNav.map(subNavbar => {
-                const { ...otherArgs } = subNavbar;
-                return (
-                  <NavItem
-                    key={"navItem_" + subNavbar.navKey}
-                    horizontal={horizontal}
-                    {...otherArgs}
-                  >
-                    {subNavbar.title}
-                  </NavItem>
-                );
-              })}
-            </Nav>
-          );
+            );
+          }
         })}
       </Nav>
     );
@@ -161,7 +217,19 @@ export class Nav extends React.Component {
             "collapsed": this.state.collapsed,
             active,
             "onClick": isParent ? this._handleCollapse : this._handleClick,
-            horizontal
+            horizontal,
+            "ref": horizontal && !isParent && subNav ? this.subNavItemRef : null,
+            "dimension": this._setDimension,
+            "style": this.widthStyleTernaryHelper(
+              horizontal && !isParent && subNav,
+              horizontal &&
+                !isParent &&
+                subNav &&
+                this.state.subNavItemMaxWidth > 0,
+              child.props,
+              index,
+              false
+            )
           });
         })}
       </ul>
@@ -186,7 +254,9 @@ Nav.propTypes = {
   "data": PropTypes.array,
   /** Set to true if you intend to set an active style externally. */
   "ignoreActive": PropTypes.bool,
-  /** Function that will be executed when onClick event occurs. */
+  /** Function that will be executed when onClick event occurs.
+   * @ignore
+   * */
   "onClick": PropTypes.func,
   /** Pass inline styling here. */
   "style": PropTypes.object,
diff --git a/src/Nav/README.md b/src/Nav/README.md
index cb6cbdbd..21c00975 100644
--- a/src/Nav/README.md
+++ b/src/Nav/README.md
@@ -21,7 +21,7 @@ Horizontal Nav with sub-NavItems:
         <NavItem navKey={0}>Home</NavItem>
         <NavItem navKey={1}>Catalog</NavItem>
         <NavItem navKey={2}>Customer Service</NavItem>
-        <Nav>
+        <Nav collapsed>
             <NavItem navKey={3}>Reports</NavItem>
             <NavItem navKey={3.1}>Create a Report</NavItem>
             <NavItem navKey={3.2}>Edit a Report</NavItem>
@@ -126,7 +126,7 @@ Build Nav Menu via data attribute:
          "navKey": 3,
          "title": "Reports",
          "collapsed": true,
-         "subNav": [
+         "subNavArray": [
            {
              "navKey": 3.1,
              "title": "Create a Report"
@@ -144,7 +144,7 @@ Build Nav Menu via data attribute:
      ];
 
     _handleClick = (selectedIndex) => console.log('Item ' + selectedIndex + ' has been selected.');
-    <Nav activeIndex={1} data={data} onClick={_handleClick} />
+    <Nav horizontal activeIndex={1} data={data} onClick={_handleClick} />
 
 Nav component with a routing library. Use the `as` property to define the component name (e.g. `Link` from react-router) and pass any router specific props to your NavItem component:
     
@@ -170,7 +170,7 @@ Nav component with React-Router using data instead of children:
          "navKey": 0,
          "title": "Form Components",
          "collapsed": true,
-         "subNav": [
+         "subNavArray": [
            {
              "navKey": 0.1,
              "to": "button",
diff --git a/src/NavItem/NavItem.css b/src/NavItem/NavItem.css
index 8ab26bb1..ff09d099 100644
--- a/src/NavItem/NavItem.css
+++ b/src/NavItem/NavItem.css
@@ -11,10 +11,25 @@
     transition: height .3s ease-in-out;
 }
 
-.subNav.collapsed {
+.subNav.collapsed.initial {
+    height: auto;
+}
+
+.subNav.collapsed.initial button {
+    display: list-item;
+    visibility: hidden;
+}
+
+.subNav.collapsed.normal {
     height: 0;
 }
 
+.subNav.collapsed.normal button {
+    display: none;
+    visibility: visible;
+    transition: height .3s ease-in-out;
+}
+
 .navItem button {
     width: 100%;
     border-color: var(--silver);
@@ -40,10 +55,6 @@
     padding-left: 38px;
 }
 
-.subNav.collapsed button {
-    display: none;
-}
-
 .navItem button:hover {
     background-color: var(--silver);
     color: var(--dark-gray);
@@ -69,12 +80,19 @@
     border-width: 0 2px 2px 0;
     display: inline-block;
     padding: 5px;
-    transform: rotate(45deg);
     position: absolute;
     top: -5px;
     left: 5px;
 }
 
+.caretHorizontal::before {
+    transform: rotate(45deg);
+}
+
+.caretVertical::before {
+    transform: rotate(45deg);
+}
+
 .caret {
     position: relative;
     width: 18px;
@@ -90,6 +108,6 @@
 }
 
 
-.collapsed .caret {
+.collapsed .caretVertical {
     transform: rotate(90deg);
 }
\ No newline at end of file
diff --git a/src/NavItem/NavItem.js b/src/NavItem/NavItem.js
index ef589bad..f32dd13a 100644
--- a/src/NavItem/NavItem.js
+++ b/src/NavItem/NavItem.js
@@ -8,12 +8,32 @@ import styles from "./NavItem.css";
 export class NavItem extends React.Component {
   constructor(props) {
     super(props);
-
+    this.liRef = React.createRef();
     this.state = {
-      "visible": false // indicate if this NavItem is visible in Nav or hidden in rightmost dropdown
+      "initial": true
     };
   }
 
+  componentDidMount() {
+    if (this.liRef.current && this.props.horizontal && this.props.subNav) {
+      const div = window.getComputedStyle(this.liRef.current);
+      const navItemHeight = parseInt(
+        div
+          .getPropertyValue("height")
+          .substring(0, div.getPropertyValue("height").length - 2)
+      );
+      const navItemWidth = parseInt(
+        div
+          .getPropertyValue("width")
+          .substring(0, div.getPropertyValue("width").length - 2)
+      );
+      this.props.dimension(navItemHeight, navItemWidth);
+    }
+    this.setState({
+      "initial": false
+    });
+  }
+
   _handleClick = event => {
     if (this.props.onClick) {
       this.props.onClick(this.props.navKey, event);
@@ -36,6 +56,42 @@ export class NavItem extends React.Component {
       ...others
     } = this.props;
 
+    const styleNameHelper = (horizontalCond, subNavCond, initialCond) => {
+      if (!horizontalCond || horizontalCond && subNavCond) {
+        if (initialCond) {
+          return cx("navItem", "initial", {
+            active,
+            disabled,
+            collapsed,
+            subNav
+          });
+        } else {
+          return cx("navItem", "normal", {
+            active,
+            disabled,
+            collapsed,
+            subNav
+          });
+        }
+      } else {
+        if (initialCond) {
+          return cx("navItem", "initial", "horizontal", {
+            active,
+            disabled,
+            collapsed,
+            subNav
+          });
+        } else {
+          return cx("navItem", "normal", "horizontal", {
+            active,
+            disabled,
+            collapsed,
+            subNav
+          });
+        }
+      }
+    };
+
     const button = 
       <Button
         disabled={disabled}
@@ -49,7 +105,13 @@ export class NavItem extends React.Component {
         onClick={typeof to === "undefined" ? this._handleClick : null}
       >
         {children}
-        <i styleName={cx({ "caret": parent })} />
+        <i
+          styleName={cx({
+            "caret": parent,
+            "caretVertical": !horizontal,
+            "caretHorizontal": horizontal
+          })}
+        />
       </Button>
     ;
 
@@ -59,18 +121,22 @@ export class NavItem extends React.Component {
       return (
         <li
           role="presentation"
-          styleName={
-            !horizontal || horizontal && subNav
-              ? cx("navItem", { active, disabled, collapsed, subNav })
-              : cx("navItem", "horizontal", {
-                  active,
-                  disabled,
-                  collapsed,
-                  subNav
-                })
-          }
+          // keep the comment in case need to change it back
+
+          // styleName={
+          //   !horizontal || horizontal && subNav
+          //     ? cx("navItem", { active, disabled, collapsed, subNav })
+          //     : cx("navItem", "horizontal", {
+          //         active,
+          //         disabled,
+          //         collapsed,
+          //         subNav
+          //       })
+          // }
+          styleName={styleNameHelper(horizontal, subNav, this.state.initial)}
           style={style}
           className={className}
+          ref={parent && horizontal ? this.liRef : null}
         >
           <LinkElement {...others} onClick={this._handleClick}>
             {button}
@@ -81,18 +147,22 @@ export class NavItem extends React.Component {
       return (
         <li
           role="presentation"
-          styleName={
-            !horizontal || horizontal && subNav
-              ? cx("navItem", { active, disabled, collapsed, subNav })
-              : cx("navItem", "horizontal", {
-                  active,
-                  disabled,
-                  collapsed,
-                  subNav
-                })
-          }
+          // keep the comment in case need to change it back
+
+          // styleName={
+          //   !horizontal || horizontal && subNav
+          //     ? cx("navItem", { active, disabled, collapsed, subNav })
+          //     : cx("navItem", "horizontal", {
+          //         active,
+          //         disabled,
+          //         collapsed,
+          //         subNav
+          //       })
+          // }
+          styleName={styleNameHelper(horizontal, subNav, this.state.initial)}
           style={style}
           className={className}
+          ref={!parent && horizontal ? this.liRef : null}
         >
           {button}
         </li>
@@ -146,7 +216,9 @@ NavItem.propTypes = {
    */
   "onClick": PropTypes.func,
   /** Define whether the NavItem is vertical or horizontal, NavItem is vertical by default */
-  "horizontal": PropTypes.bool
+  "horizontal": PropTypes.bool,
+  /** callback for Nav Component for the height and width of the NavItem */
+  "dimension": PropTypes.func
 };
 
 NavItem.defaultProps = {