From 7c8020178222de3a31728cce8e11aebab5e3d205 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 25 Sep 2018 14:09:31 -0700
Subject: [PATCH] Make navbar horizontal until breakpoint is reached

---
 chronograf/ui/src/page_layout/PageLayout.scss |  2 +-
 .../ui/src/page_layout/components/Nav.scss    | 34 +++++++++++++++----
 .../ui/src/page_layout/components/Page.scss   |  4 +--
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/chronograf/ui/src/page_layout/PageLayout.scss b/chronograf/ui/src/page_layout/PageLayout.scss
index 10ef4cc77f..0f67f02cb3 100644
--- a/chronograf/ui/src/page_layout/PageLayout.scss
+++ b/chronograf/ui/src/page_layout/PageLayout.scss
@@ -4,7 +4,7 @@
 */
 
 $nav-size: 54px;
-$nav-breakpoint: 660px;
+$nav-breakpoint: 800px;
 $page-header-size: 80px;
 $page-max-width: 1300px;
 $page-gutter: 32px;
diff --git a/chronograf/ui/src/page_layout/components/Nav.scss b/chronograf/ui/src/page_layout/components/Nav.scss
index 6ff83346dc..c87d674f08 100644
--- a/chronograf/ui/src/page_layout/components/Nav.scss
+++ b/chronograf/ui/src/page_layout/components/Nav.scss
@@ -10,10 +10,10 @@ $nav--bg-accent: $c-comet;
 
 .nav {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   background-color: $g3-castle;
-  border-radius: 0 $radius $radius 0;
-  width: $nav-size;
+  border-radius: 0 0 $radius $radius;
+  height: $nav-size;
 
   a:link,
   a:active,
@@ -49,13 +49,14 @@ $nav--bg-accent: $c-comet;
 
 .nav--item-menu {
   position: absolute;
-  top: 0;
-  left: $nav-size;
-  @include gradient-h($nav--bg,$nav--bg-accent);
+  top: $nav-size;
+  left: 50%;
+  transform: translateX(-50%);
+  @include gradient-v($nav--bg,$nav--bg-accent);
   display: none;
   flex-direction: column;
   align-items: stretch;
-  border-radius: 0 $radius $radius 0;
+  border-radius: $radius;
   overflow: hidden;
 }
 
@@ -106,3 +107,22 @@ $nav--bg-accent: $c-comet;
       0 0 20px $c-laser;
   }
 }
+
+// Vertical Menu
+@media screen and (min-width: $nav-breakpoint) {
+  .nav {
+    flex-direction: column;
+    height: auto;
+    width: $nav-size;
+    border-radius: 0 $radius $radius 0;
+  }
+
+  .nav--item-menu {
+    top: 0;
+    left: $nav-size;
+    border-radius: 0 $radius $radius 0;
+    transform: translateX(0);
+    @include gradient-h($nav--bg,$nav--bg-accent);
+  }
+}
+
diff --git a/chronograf/ui/src/page_layout/components/Page.scss b/chronograf/ui/src/page_layout/components/Page.scss
index 7fd9a45386..8b3e7b893b 100644
--- a/chronograf/ui/src/page_layout/components/Page.scss
+++ b/chronograf/ui/src/page_layout/components/Page.scss
@@ -20,7 +20,6 @@
 
 .page-header {
   height: $page-header-size;
-  padding: 0 $page-gutter;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -28,11 +27,12 @@
 
 .page-header--container {
   display: flex;
+  padding: 0 $page-gutter;
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
   width: 100%;
-  max-width: ($page-max-width - ($page-gutter * 2));
+  max-width: $page-max-width;
 }
 
 .page-header.full-width .page-header--container {