Render more space efficient user nav when viewport is insufficient

ui/src/side_nav/components/UserNavBlock.js

@@ -27,6 +27,8 @@ class UserNavBlock extends Component {
 
     const isSuperAdmin = role === SUPERADMIN_ROLE
 
+    const isSmallViewport = window.visualViewport.height < 850
+
     return (
       <div className="sidebar--item">
         <div className="sidebar--square">
@@ -35,7 +37,69 @@ class UserNavBlock extends Component {
             ? <span className="sidebar--icon sidebar--icon__superadmin icon crown2" />
             : null}
         </div>
-        <div className="sidebar-menu">
+        {isSmallViewport
+          ? <div className="sidebar-menu sidebar-menu--inverse">
+              {customLinks
+                ? <div className="sidebar-menu--section">Custom Links</div>
+                : null}
+              {customLinks
+                ? customLinks.map((link, i) =>
+                    <a
+                      key={i}
+                      className="sidebar-menu--item"
+                      href={link.url}
+                      target="_blank"
+                    >
+                      {link.name}
+                    </a>
+                  )
+                : null}
+              <div className="sidebar-menu--section">Switch Organizations</div>
+              <FancyScrollbar
+                className="sidebar-menu--scrollbar"
+                autoHeight={true}
+                maxHeight={isSmallViewport ? 105 : 300}
+                autoHide={false}
+              >
+                {roles.map((r, i) => {
+                  const isLinkCurrentOrg =
+                    currentOrganization.id === r.organization
+                  return (
+                    <span
+                      key={i}
+                      className={classnames({
+                        'sidebar-menu--item': true,
+                        active: isLinkCurrentOrg,
+                      })}
+                      onClick={this.handleChangeCurrentOrganization(
+                        r.organization
+                      )}
+                    >
+                      {
+                        organizations.find(o => o.id === r.organization).name
+                      }{' '}
+                      <strong>({r.name})</strong>
+                    </span>
+                  )
+                })}
+              </FancyScrollbar>
+              <div className="sidebar-menu--section">Account</div>
+              <a className="sidebar-menu--item" href={logoutLink}>
+                Logout
+              </a>
+              {isSuperAdmin
+                ? <div className="sidebar-menu--superadmin">
+                    <div>
+                      <span className="icon crown2" /> You are a SuperAdmin
+                    </div>
+                  </div>
+                : null}
+              <div className="sidebar-menu--heading sidebar--no-hover">
+                {me.name}
+              </div>
+              <div className="sidebar-menu--triangle" />
+            </div>
+          : <div className="sidebar-menu">
               <div className="sidebar-menu--heading sidebar--no-hover">
                 {me.name}
               </div>
@@ -54,11 +118,12 @@ class UserNavBlock extends Component {
               <FancyScrollbar
                 className="sidebar-menu--scrollbar"
                 autoHeight={true}
-            maxHeight={300}
+                maxHeight={isSmallViewport ? 100 : 300}
                 autoHide={false}
               >
                 {roles.map((r, i) => {
-              const isLinkCurrentOrg = currentOrganization.id === r.organization
+                  const isLinkCurrentOrg =
+                    currentOrganization.id === r.organization
                   return (
                     <span
                       key={i}
@@ -66,9 +131,13 @@ class UserNavBlock extends Component {
                         'sidebar-menu--item': true,
                         active: isLinkCurrentOrg,
                       })}
-                  onClick={this.handleChangeCurrentOrganization(r.organization)}
+                      onClick={this.handleChangeCurrentOrganization(
+                        r.organization
+                      )}
                     >
-                  {organizations.find(o => o.id === r.organization).name}{' '}
+                      {
+                        organizations.find(o => o.id === r.organization).name
+                      }{' '}
                       <strong>({r.name})</strong>
                     </span>
                   )
@@ -90,7 +159,7 @@ class UserNavBlock extends Component {
                   )
                 : null}
               <div className="sidebar-menu--triangle" />
-        </div>
+            </div>}
       </div>
     )
   }

ui/src/style/layout/sidebar.scss

@@ -140,6 +140,11 @@ $sidebar-menu--gutter: 18px;
   transition: opacity 0.25s ease;
   display: none;
   flex-direction: column;
+
+  &.sidebar-menu--inverse {
+    top: initial;
+    bottom: 0;
+  }
 }
 .sidebar-menu--heading,
 .sidebar-menu--item {
@@ -229,6 +234,11 @@ $sidebar-menu--gutter: 18px;
     height: 2px;
     @include gradient-h($c-laser,$c-potassium);
   }
+
+  &:first-child:after {
+    display: none;
+    border-top-right-radius: $radius;
+  }
 }
 
 // SuperAdminIndicator