From 74cf0f26c4b7e26a00bddf3ce86d196b744dd47f Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 13 Nov 2017 22:25:15 -0800
Subject: [PATCH] Render more space efficient user nav when viewport is
 insufficient

---
 ui/src/side_nav/components/UserNavBlock.js | 179 ++++++++++++++-------
 ui/src/style/layout/sidebar.scss           |  10 ++
 2 files changed, 134 insertions(+), 55 deletions(-)

diff --git a/ui/src/side_nav/components/UserNavBlock.js b/ui/src/side_nav/components/UserNavBlock.js
index 135c6f3fa0..b451067134 100644
--- a/ui/src/side_nav/components/UserNavBlock.js
+++ b/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,62 +37,129 @@ class UserNavBlock extends Component {
             ? <span className="sidebar--icon sidebar--icon__superadmin icon crown2" />
             : null}
         </div>
-        <div className="sidebar-menu">
-          <div className="sidebar-menu--heading sidebar--no-hover">
-            {me.name}
-          </div>
-          <div className="sidebar-menu--section">Account</div>
-          {isSuperAdmin
-            ? <div className="sidebar-menu--superadmin">
-                <div>
-                  <span className="icon crown2" /> You are a SuperAdmin
-                </div>
+        {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>
-            : null}
-          <a className="sidebar-menu--item" href={logoutLink}>
-            Logout
-          </a>
-          <div className="sidebar-menu--section">Switch Organizations</div>
-          <FancyScrollbar
-            className="sidebar-menu--scrollbar"
-            autoHeight={true}
-            maxHeight={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>
-          {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--triangle" />
-        </div>
+              <div className="sidebar-menu--triangle" />
+            </div>
+          : <div className="sidebar-menu">
+              <div className="sidebar-menu--heading sidebar--no-hover">
+                {me.name}
+              </div>
+              <div className="sidebar-menu--section">Account</div>
+              {isSuperAdmin
+                ? <div className="sidebar-menu--superadmin">
+                    <div>
+                      <span className="icon crown2" /> You are a SuperAdmin
+                    </div>
+                  </div>
+                : null}
+              <a className="sidebar-menu--item" href={logoutLink}>
+                Logout
+              </a>
+              <div className="sidebar-menu--section">Switch Organizations</div>
+              <FancyScrollbar
+                className="sidebar-menu--scrollbar"
+                autoHeight={true}
+                maxHeight={isSmallViewport ? 100 : 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>
+              {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--triangle" />
+            </div>}
       </div>
     )
   }
diff --git a/ui/src/style/layout/sidebar.scss b/ui/src/style/layout/sidebar.scss
index d83c9e6618..0b410a3cb9 100644
--- a/ui/src/style/layout/sidebar.scss
+++ b/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