✨ add logout for mobile (#515)

src/layout/navbar/avatarDropdown/avatarDropdown.css → src/layout/avatarDropdown/avatarDropdown.css

@@ -1,18 +1,22 @@
-.avatar-dropdown .cc-avatar-image > img {
+.avatar-dropdown-button .cc-avatar-image > img {
   border: 2px solid var(--primary-color-font);
   font-size: 1.5em;
 }
 
-.avatar-dropdown .cc-avatar-image > img:hover {
+.avatar-dropdown-button .cc-avatar-image > img:hover {
   border: 2px solid var(--secondary-color);
   cursor: pointer;
 }
 
-.avatar-dropdown .cc-avatar-initials {
+.avatar-dropdown-button .cc-avatar-initials {
   border: 2px solid var(--secondary-color);
 }
 
-.avatar-dropdown .cc-avatar-initials:hover {
+.avatar-dropdown-button .cc-avatar-initials:hover {
   border: 2px solid var(--secondary-color-font);
   cursor: pointer;
 }
+
+.avatar-dropdown {
+  z-index: 110;
+}

src/layout/navbar/avatarDropdown/avatarDropdown.jsx → src/layout/avatarDropdown/avatarDropdown.jsx

@@ -11,11 +11,9 @@ import './avatarDropdown.css'
 const AvatarDropdown = ({
   displayName, photoURL, contributorsRoute, signout,
 }) => {
-  const avatar = (
-    <Avatar src={photoURL} name={displayName} className="avatar-dropdown" />
-  )
+  const avatar = <Avatar src={photoURL} name={displayName} className="avatar-dropdown-button" />
   return (
-    <Dropdown action={avatar}>
+    <Dropdown className="avatar-dropdown" action={avatar}>
       <div>{displayName}</div>
       <Link code="home">
         <IconLabel icon="fa fa-home" label="Conference Hall" />

src/layout/brand/brand.jsx

@@ -9,6 +9,8 @@ import Portal from 'components/portals/portal'
 import withTheme from 'styles/themes/withTheme'
 import { withSizes } from 'styles/utils'
 
+import AvatarDropdown from '../avatarDropdown'
+
 import styles from './brand.module.css'
 
 const SidebarWrapper = withTheme(({ className, onClick, content }) => (
@@ -23,19 +25,19 @@ const Brand = ({
   title, baseRoute, isTablet, isMobile, sidebar, className,
 }) => (
   <div className={cn(styles.brand, className)}>
-    {sidebar
-      && (isMobile || isTablet) && (
-        <OpenTrigger
-          renderTrigger={({ show, hide, isOpen }) => (
-            <a onClick={isOpen ? hide : show} role="button" className={styles.burgerLink}>
-              <i className={`fa ${isOpen ? 'fa-arrow-left' : 'fa-bars'}`} />
-            </a>
-          )}
-        >
-          {({ hide }) => <SidebarWrapper content={sidebar} onClick={hide} />}
-        </OpenTrigger>
+    {sidebar && (isMobile || isTablet) && (
+      <OpenTrigger
+        renderTrigger={({ show, hide, isOpen }) => (
+          <a onClick={isOpen ? hide : show} role="button" className={styles.burgerLink}>
+            <i className={`fa ${isOpen ? 'fa-arrow-left' : 'fa-bars'}`} />
+          </a>
+        )}
+      >
+        {({ hide }) => <SidebarWrapper content={sidebar} onClick={hide} />}
+      </OpenTrigger>
     )}
     <Link code={baseRoute}>{title}</Link>
+    {sidebar && (isMobile || isTablet) && <AvatarDropdown classname={styles.avatar} />}
   </div>
 )
 

src/layout/brand/brand.module.css

@@ -21,7 +21,11 @@
   text-decoration: none;
 }
 
-.brand > .burgerLink:hover  {
+.brand > .burgerLink {
+  width: 40px;
+}
+
+.brand > .burgerLink:hover {
   color: var(--secondary-color-font);
 }
 
@@ -31,4 +35,4 @@
 
 .mobileSidebar {
   height: calc(100% - var(--layout-navbar-height));
-}
+}

src/layout/navbar/navbar.jsx

@@ -5,15 +5,13 @@ import cn from 'classnames'
 import IconLink from 'components/iconLink'
 import IconLabel from 'components/iconLabel'
 
-import AvatarDropdown from './avatarDropdown'
+import AvatarDropdown from '../avatarDropdown'
 
 import './navbar.css'
 
 const Navbar = ({ name, className }) => (
   <nav className={cn('navbar', className)}>
-    <div className="navbar-left">
-      {name && <IconLabel icon="fa fa-caret-right" label={name} />}
-    </div>
+    <div className="navbar-left">{name && <IconLabel icon="fa fa-caret-right" label={name} />}</div>
     <div className="navbar-right">
       <IconLink
         icon="fa fa-github"