refactor(header): hover style for logout

components/ProfileBox.js

@@ -6,27 +6,19 @@ import { NavLink } from 'fluxible-router';
 
 import { logout } from '../actions/auth';
 
-class ProfileDrop extends React.Component {
-
-  componentDidMount () {
-    const first = React.findDOMNode(this).querySelector('.item');
-    first.focus();
-  }
+class LogoutButton extends React.Component {
 
   componentWillEnter (done) {
-    const els = React.findDOMNode(this).querySelectorAll('.item');
+    const el = React.findDOMNode(this);
     new TimelineMax()
-      .staggerFrom(els, 0.15, {
-        opacity: 0,
-        y: -10
-      }, 0.1)
+      .from(el, 0.25, { opacity: 0, x: 20, ease: 'Back.easeOut' })
       .addCallback(done);
   }
 
   componentWillLeave (done) {
-    const els = React.findDOMNode(this).querySelectorAll('.item');
+    const el = React.findDOMNode(this);
     new TimelineMax()
-      .staggerTo(els, 0.15, { opacity: 0, y: -10 }, -0.1)
+      .to(el, 0.2, { opacity: 0, x: 20, ease: 'Back.easeIn' })
       .addCallback(done);
   }
 
@@ -36,20 +28,12 @@ class ProfileDrop extends React.Component {
 
   render () {
     return (
-      <div className='ProfileBox-drop'>
-        <NavLink
-          className='item'
-          routeName='home'>
-          <i className='ion-person' />
-          {'Profile'}
-        </NavLink>
-        <button
-          className='item'
-          onClick={this.logout.bind(this)}>
-          <i className='ion-log-out' />
-          {'Logout'}
-        </button>
-      </div>
+      <button
+        onClick={this.logout.bind(this)}
+        className='ZavButton high logout'>
+        <i className='ion-log-out' />
+        {'Logout'}
+      </button>
     );
   }
 
@@ -65,9 +49,15 @@ export default class ProfileBox extends React.Component {
     };
   }
 
-  toggle () {
+  toggleOn () {
+    this.setState({
+      open: true
+    });
+  }
+
+  toggleOff () {
     this.setState({
-      open: !this.state.open
+      open: false
     });
   }
 
@@ -76,32 +66,26 @@ export default class ProfileBox extends React.Component {
     const { user } = this.props;
     const { open } = this.state;
 
-    const toggleClassName = [
-      'Profile-toggle',
-      open ? 'open' : ''
-    ].join(' ');
-
     return (
-      <div className='ProfileBox'>
-        <button
-          onClick={this.toggle.bind(this)}
-          className={toggleClassName}>
-          <div className='ProfileName'>
-            {user.name}
-          </div>
-          <div
-            className='ProfilePic'
-            style={{
-              backgroundImage: `url(${user.avatar}&s=200)`,
-              backgroundSize: '100%'
-            }} />
-        </button>
+      <div
+        onMouseEnter={this.toggleOn.bind(this)}
+        onMouseLeave={this.toggleOff.bind(this)}
+        className='ProfileBox'>
         <ReactTransitionGroup>
           {open && (
-            <ProfileDrop
+            <LogoutButton
               context={this.props.context} />
           )}
         </ReactTransitionGroup>
+        <NavLink
+          routeName='profile'>
+          <div
+            className='ProfilePic'
+            style={{
+              backgroundImage: `url(${user.avatar})`,
+              backgroundSize: '100%'
+            }} />
+        </NavLink>
       </div>
     );
   }

styles/Header.scss

@@ -27,72 +27,22 @@
 .ProfileBox {
   position: relative;
 
-  .Profile-toggle {
-    display: flex;
-    align-items: center;
-    padding: 1px 0.5rem;
-    cursor: pointer;
-    border: none;
-    background: $cdark;
-    outline: none;
-    border: 2px solid transparent;
-    border-radius: 3px;
-    color: rgba($clight, 0.5);
-    position: relative;
-    z-index: 2;
-
-    &:active, &.open { background: $cdarken1 !important; }
-    &:focus  { border-color: rgba($cdarken, 0.3); }
+  display: flex;
+  align-items: center;
 
-    &:hover {
-      background: $cdarken2;
+  .logout {
+    padding: 0.5rem;
+    margin-right: 1rem;
+    i {
+      margin-right: 0.5rem;
     }
   }
 
   .ProfilePic {
-    width: 40px;
-    height: 40px;
+    padding: 3px;
+    border: 2px solid $cdarken2;
+    width: 45px;
+    height: 45px;
     background-size: 100%;
   }
-
-  .ProfileName {
-    margin-right: 0.5rem;
-  }
-
-  .ProfileBox-drop {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    position: absolute;
-    z-index: 1;
-    right: 0;
-    top: 100%;
-    margin-top: 0.25rem;
-    min-width: 250px;
-
-    .item {
-      font-weight: normal;
-      color: rgba($clight, 0.5);
-      background: rgba($cdarken2, 0.3);
-      border: 2px solid transparent;
-      cursor: pointer;
-      display: flex;
-      display: flex;
-      justify-content: center;
-      padding: 1rem;
-      outline: none;
-
-      &:hover {
-        background: rgba($cdarken2, 0.7);
-      }
-      &:active, &:focus {
-        background: $cdarken2;
-        border-color: $cdarken1;
-      }
-
-      i {
-        margin-right: 0.5rem;
-      }
-    }
-  }
 }