Merge pull request #59 from dod-ccpo/ui/navigation

Ui/navigation

scss/atat.scss

@@ -14,6 +14,7 @@
 @import 'components/empty_state';
 
 @import 'sections/main';
-@import 'sections/navigation';
+@import 'sections/topbar';
+@import 'sections/sidenav';
 @import 'sections/footer';
 @import 'sections/login';

scss/core/_grid.scss

@@ -12,6 +12,7 @@
   @include media($medium-screen) {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
   }
 }
 

scss/core/_variables.scss

@@ -3,8 +3,9 @@
  * ===================================================
  */
 
-// Standard gap
 $gap:             .8rem; // 8px at 10px $em-base
+$topbar-height:   4.8rem;
+
 
 
 /*
@@ -110,7 +111,8 @@ $color-transparent:          rgba(#000, 0);
 // Mobile First Breakpoints
 $small-screen:  481px;
 $medium-screen: 600px;
-$large-screen:  1201px;
+$large-screen:  800px;
+$xlarge-screen: 1200px;
 
 // Grid column counts by screen size
 $grid-columns-small: 1;

scss/elements/_panels.scss

@@ -9,11 +9,6 @@
   border-bottom-width: 1px;
   border-top-style: solid;
   border-bottom-style: solid;
-  margin-bottom: $site-margins-mobile * 2;
-
-  @include media($medium-screen) {
-    margin-bottom: $site-margins * 2;
-  }
 }
 
 @mixin panel-theme-default {
@@ -21,9 +16,18 @@
   border-bottom-color: $color-gray-light;
 }
 
+@mixin panel-margin {
+  margin-bottom: $site-margins-mobile * 2;
+
+  @include media($medium-screen) {
+    margin-bottom: $site-margins * 2;
+  }
+}
+
 .panel {
   @include panel-base;
   @include panel-theme-default;
+  @include panel-margin;
 }
 
 /*

scss/elements/_typography.scss

@@ -22,3 +22,13 @@ h1 {
 h2 {
   margin-top: 0;
 }
+
+
+a,
+a > span {
+  transition:
+    background 0.2s,
+    border 0.2s,
+    box-shadow 0.2s,
+    color 0.2s,
+}

scss/sections/_navigation.scss

@@ -1,20 +0,0 @@
-.usa-header {
-  background-color: $color-white;
-}
-
-.usa-navbar {
-  height: 5rem;
-  width: 5%;
-}
-
-.usa-nav {
-  padding-top: 1rem;
-  padding-left: 0;
-}
-
-.usa-nav-primary {
-
-  li:last-child {
-    padding-left: 3rem;
-  }
-}

scss/sections/_sidenav.scss

@@ -0,0 +1,85 @@
+.sidenav {
+  @include grid-pad;
+  @include panel-margin;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  @include media($large-screen) {
+    width: 21rem;
+  }
+
+  .sidenav__link {
+    display: block;
+    border-top: 1px solid $color-black;
+    padding: $gap ($gap * 2);
+    color: $color-black;
+    text-decoration: none;
+
+    &:hover {
+      background-color: $color-white;
+      color: $color-primary;
+    }
+
+    &.sidenav__link--disabled {
+      color: $color-shadow;
+      pointer-events: none;
+    }
+
+    &.sidenav__link--active {
+      @include h4;
+      background-color: $color-white;
+      color: $color-primary;
+      box-shadow: inset .4rem 0 0 0 $color-primary;
+
+      + ul {
+        background-color: $color-white;
+
+        .sidenav__link {
+          &.sidenav__link--active {
+            @include h5;
+            box-shadow: none;
+          }
+        }
+      }
+    }
+
+    + ul {
+      li {
+        .sidenav__link {
+          padding: ($gap * .75) ($gap * 3);
+          border: 0;
+          @include h5;
+          font-weight: normal;
+        }
+
+        &:last-child {
+          .sidenav__link {
+            padding-bottom: $gap * 1.5;
+          }
+        }
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+     li {
+      margin: 0;
+      display: block;
+    }
+  }
+
+  > ul {
+    > li {
+      &:last-child {
+        > .sidenav__link {
+          border-bottom: 1px solid $color-black;
+        }
+      }
+    }
+  }
+}

scss/sections/_topbar.scss

@@ -0,0 +1,54 @@
+.topbar {
+  background-color: $color-white;
+  height: $topbar-height;
+  border-bottom: 1px solid $color-black;
+
+  .topbar__navigation {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: flex-end;
+
+    > .topbar__link {
+      @include h5;
+      color: $color-primary;
+      display: inline-block;
+      height: $topbar-height;
+      line-height: $topbar-height;
+      padding: 0 ($gap * 2);
+      text-decoration: none;
+
+      > span {
+        display: inline-block;
+        height: $topbar-height;
+        line-height: $topbar-height;
+      }
+
+      &.topbar__link--primary {
+        margin-right: auto;
+        > span {
+          @include nav-border;
+        }
+
+        &:hover {
+          color: $color-white;
+          background-color: $color-primary-darkest;
+        }
+      }
+
+      &.topbar__link--secondary {
+        font-weight: normal;
+        > span {
+          @include nav-border;
+          border-bottom-width: 0;
+        }
+
+        &:hover {
+          > span {
+            @include nav-border;
+          }
+        }
+      }
+    }
+  }
+}

templates/base.html.to

@@ -14,6 +14,8 @@
   {% include 'header.html.to' %}
 
   <div class='panel-container'>
+    {% block sidenav %}{% end %}
+
     {% block content %}
       these are not the droids you are looking for
     {% end %}

templates/header.html.to

@@ -1,35 +1,11 @@
-<header class="usa-header usa-header-basic" role="banner">
+<header class="topbar">
-  <div class="usa-nav-container">
+  <nav class="topbar__navigation">
-    <div class="usa-navbar">
+    <a href="/" class="topbar__link topbar__link--primary">
-      <div class="usa-logo" id="basic-logo">
+      <span>JEDI</span>
-        <em class="usa-logo-text">
+    </a>
-          <a href="/" title="Home" aria-label="Home">JEDI</a>
-        </em>
-      </div>
-    </div>
 
-    <nav role="navigation" class="usa-nav">
+    <a href="/" class="topbar__link topbar__link--secondary">
-      <ul class="usa-nav-primary usa-accordion">
+      <span>Tech Lead</span>
-      {% for item in [
+    </a>
-            ['home', 'Home'],
-            ['workspaces', 'Workspaces'],
-            ['requests', 'Requests'],
-            ['users', 'Users' ],
-            ['reports', 'Reports' ],
-            ]
-        %}
-      <li>
-        {% if item[0]==page %}
-            <a class="usa-nav-link usa-current" href='{{ reverse_url(item[0]) }}'><span>{{ item[1] }}</span></a>
-        {% else %}
-            <a class="usa-nav-link" href='{{ reverse_url(item[0]) }}'><span>{{ item[1] }}</span></a>
-        {% end %}
-      </li>
-      {% end %}
-
-        <li>Tech Lead</li>
-      </ul>
   </nav>
-
-  </div>
 </header>

templates/styleguide.html.to

@@ -1,15 +1,36 @@
 {% extends "base.html.to" %}
 
+{% block sidenav %}
+  <nav class='sidenav'>
+    <ul>
+      <li>
+        <a href='/' class='sidenav__link sidenav__link--active' aria-current='true'>Navigation Item</a>
+        <ul>
+          <li><a href='/' class='sidenav__link sidenav__link--active'>Sub Navigation</a></li>
+          <li><a href='/' class='sidenav__link'>Sub Navigation</a></li>
+        </ul>
+      </li>
+      <li><a href='/' class='sidenav__link'>Navigation Item</a>
+        <ul>
+          <li><a href='/' class='sidenav__link'>Sub Navigation</a></li>
+          <li><a href='/' class='sidenav__link'>Sub Navigation</a></li>
+        </ul>
+      </li>
+      <li><a href='/' class='sidenav__link'>Navigation Item</a></li>
+      <li><a href='/' class='sidenav__link'>Navigation Item</a></li>
+      <li><a href='/' class='sidenav__link sidenav__link--disabled' aria-disabled='true'>Navigation Item</a></li>
+    </ul>
+  </nav>
+{% end %}
+
 {% block content %}
-
+  <div class='col'>
-
-<div class='col'>
     <div class='panel'>
       <p>This is a panel</p>
     </div>
-</div>
+  </div>
 
-<div class='col col--grow'>
+  <div class='col col--grow'>
     <div class='panel'>
       <p>This is a panel</p>
 
@@ -22,7 +43,5 @@
     <div class='panel'>
       Another panel
     </div>
-</div>
+  </div>
-
-
 {% end %}