Merge pull request #1282 from dod-ccpo/tidy-sidenav-and-topbar

Tidy sidenav and topbar

styles/components/_global_navigation.scss

@@ -4,18 +4,4 @@
   height: auto;
   box-shadow: $box-shadow;
   margin-bottom: -$footer-height * 2.5;
-
-  .sidenav__link {
-    padding-right: $gap * 2;
-
-    @include media($large-screen) {
-      padding-right: $gap * 2;
-    }
-  }
-
-  &__context--portfolio {
-    .sidenav__link {
-      padding-right: $gap;
-    }
-  }
 }

styles/components/_topbar.scss

@@ -12,9 +12,10 @@
     flex-direction: row;
     align-items: stretch;
     justify-content: space-between;
+  }
 
-    .topbar__link {
+  &__link {
-      color: $color-white;
+    color: $color-white !important;
     display: inline-flex;
     align-items: center;
     height: $topbar-height;
@@ -38,62 +39,17 @@
       padding-left: $gap / 2;
     }
 
-      &--shield {
-        width: $icon-bar-width;
-        justify-content: center;
-        padding: 0;
-
-        .topbar__link-icon {
-          margin: 0;
-        }
-      }
-
     &:hover {
       background-color: $color-primary-darker;
       color: $color-white;
     }
   }
 
-    .topbar__context {
+  &__context {
     display: flex;
     flex-grow: 1;
     flex-direction: row;
     align-items: stretch;
     justify-content: flex-end;
-
-      .topbar__portfolio-menu {
-        margin-right: auto;
-        position: relative;
-      }
-    }
-  }
-
-  &.topbar--public {
-    background-color: $color-primary;
-
-    .topbar__navigation {
-      justify-content: flex-end;
-      -ms-flex-pack: justify;
-    }
-
-    .topbar__link {
-      color: $color-white;
-
-      &-icon {
-        @include icon-style-inverted;
-      }
-
-      &--home {
-        padding-left: $gap;
-      }
-
-      &:first-child {
-        margin-right: auto;
-      }
-
-      &:hover {
-        background-color: $color-primary-darker;
-      }
-    }
   }
 }

styles/elements/_sidenav.scss

@@ -1,5 +1,4 @@
 .sidenav-container {
-  box-shadow: $box-shadow;
   overflow: hidden;
   position: relative;
   top: $topbar-height + $usa-banner-height;
@@ -9,13 +8,18 @@
     @extend .sidenav-container;
     width: $sidenav-collapsed-width;
   }
+}
 
-  &__fixed {
+.sidenav {
-    position: fixed;
-  }
-
-  .sidenav {
   width: $sidenav-expanded-width;
+  position: fixed;
+
+  &--minimized {
+    @extend .sidenav;
+
+    width: $sidenav-collapsed-width;
+    margin: 0px;
+  }
 
   @include media($large-screen) {
     margin: 0px;
@@ -53,8 +57,9 @@
     padding: $gap;
     display: inline-flex;
     align-items: center;
+  }
 
-      .toggle-arrows {
+  &__toggle-arrows {
     vertical-align: middle;
     @include icon-size(20);
 
@@ -66,10 +71,8 @@
       margin-right: 0;
     }
   }
-    }
 
-    ul {
+  &__list {
-      &.sidenav__list--padded {
     margin-top: 3 * $gap;
     margin-bottom: $footer-height;
     padding-bottom: ($gap * 2);
@@ -80,65 +83,47 @@
     left: 0;
     width: $sidenav-expanded-width;
     background-color: $color-white;
-      }
-
     list-style: none;
     padding: 0;
 
-      li {
+    &--no-header {
-        margin: 0;
+      top: $topbar-height + $usa-banner-height;
-        display: block;
-        color: $color-black-light;
     }
   }
 
-    &__divider--small {
-      display: block;
-      width: 4 * $gap;
-      border: 1px solid #d6d7d9;
-      margin-left: 2 * $gap;
-      margin-bottom: $gap;
-    }
-
   &__text {
     margin: 2 * $gap;
     color: $color-gray;
     font-style: italic;
   }
 
+  &__item {
+    margin: 0;
+    display: block;
+    color: $color-black-light !important;
+  }
+
   &__link {
     display: block;
     padding: $gap ($gap * 2);
     white-space: nowrap;
     overflow: hidden;
-      color: $color-black-light;
+    color: $color-black-light !important;
     text-decoration: none;
     text-overflow: ellipsis;
 
     &--active {
       @include h4;
 
-        background-color: $color-aqua-lightest;
+      background-color: $color-aqua-lightest !important;
+      color: $color-primary-darker !important;
       box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;
       position: relative;
-        color: $color-primary-darker;
     }
 
     &:hover {
-        color: $color-primary;
+      color: $color-primary !important;
       background-color: $color-aqua-lightest;
-
-        .sidenav__link-icon {
-          @include icon-style-active;
     }
   }
-    }
-  }
-
-  &--minimized {
-    @extend .sidenav;
-
-    width: $sidenav-collapsed-width;
-    margin: 0px;
-  }
 }

templates/components/sidenav_item.html

@@ -1,5 +1,5 @@
 {% macro SidenavItem(label, href, active=False) -%}
-  <li>
+  <li class="sidenav__item">
     <a class="sidenav__link {% if active %}sidenav__link--active{% endif %}" href="{{href}}" title="{{label}}">
       <span class="sidenav__link-label">
         {{label}}

templates/help/index.html

@@ -6,29 +6,26 @@
 
 {% block content %}
   <div class='global-layout'>
-    <div class='global-navigation sidenav'>
+    <div class='global-navigation'>
-      <ul>
+      <div class="sidenav-container">
-
+        <div class="sidenav">
+          <ul class="sidenav__list sidenav__list--no-header">
             {{ SidenavItem("JEDI Cloud Help",
               href = url_for("atst.helpdocs"),
               active = not doc,
             )}}
-
             {% for doc_item in docs %}
               {% set active = doc and doc == doc_item %}
-
               {{ SidenavItem(doc_item | title,
                 href = url_for("atst.helpdocs", doc=doc_item),
                 active = active,
               )}}
             {% endfor %}
-
           </ul>
         </div>
-
+      </div>
-
+    </div>
     <div class='global-panel-container'>
-
       <div class='panel'>
         <div class='panel__heading panel__heading--divider'>
           <h1>
@@ -40,16 +37,12 @@
             {% endif %}
           </h1>
         </div>
-
         <div class='panel__content'>
-
           {% block doc_content %}
             <p>Welcome to the JEDI Cloud help documentation.</p>
           {% endblock %}
-
         </div>
       </div>
     </div>
-
   </div>
 {% endblock %}

templates/navigation/global_sidenav.html

@@ -1,29 +1,26 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/sidenav_item.html" import SidenavItem %}
 
-
+<div class="global-navigation">
-<div v-cloak is="SidenavToggler" class="global-navigation">
+  <sidenav-toggler v-cloak inline-template>
-  <template slot-scope='props'>
+    <div v-bind:class="{'sidenav-container': isVisible, 'sidenav-container--minimized': !isVisible}">
-    <div v-bind:class="{'sidenav-container': props.isVisible, 'sidenav-container--minimized': !props.isVisible}">
+      <div v-bind:class="{'sidenav': isVisible, 'sidenav--minimized': !isVisible}">
-      <div class="sidenav-container__fixed">
+        <div v-bind:class="{'sidenav__header': isVisible, 'sidenav__header--minimized': !isVisible}" class="row">
-        <div v-bind:class="{'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
+          <template v-if="isVisible">
-          <div v-bind:class="{'sidenav__header': props.isVisible, 'sidenav__header--minimized': !props.isVisible}" class="row">
-            <template v-if="props.isVisible">
             <span class="sidenav__title col col--grow">My Portfolios</span>
-              <a href="#" v-on:click="props.toggle" class="sidenav__toggle col">
+            <a href="#" v-on:click="toggle" class="sidenav__toggle col">
-                {{ Icon('angle-double-left-solid', classes="toggle-arrows icon--primary") }}
+              {{ Icon('angle-double-left-solid', classes="sidenav__toggle-arrows icon--primary") }}
               <span>Hide</span>
             </a>
           </template>
           <template v-else>
-              <a href="#" v-on:click="props.toggle" class="sidenav__toggle col">
+            <a href="#" v-on:click="toggle" class="sidenav__toggle col">
               <span>Show</span>
-                {{ Icon('angle-double-right-solid', classes="toggle-arrows icon--primary") }}
+              {{ Icon('angle-double-right-solid', classes="sidenav__toggle-arrows icon--primary") }}
             </a>
           </template>
         </div>
-          <div v-if="props.isVisible">
+        <ul class="sidenav__list" v-if="isVisible">
-            <ul class="sidenav__list--padded">
           {% for other_portfolio in portfolios|sort(attribute='name') %}
             {{ SidenavItem(other_portfolio.name,
               href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
@@ -33,7 +30,5 @@
         </ul>
       </div>
     </div>
-      </div>
+  </sidenav-toggler>
-    </div>
-  </template>
 </div>

templates/navigation/topbar.html

@@ -8,7 +8,6 @@
         {{ "navigation.topbar.jedi_cloud_link_text" | translate }}
       </span>
     </a>
-
     <div class="topbar__context">
       {% if g.current_user %}
         <a href="{{ url_for('users.user') }}" class="topbar__link">