Add nav to fund header ready for new pages

Will only show on funds with allocations for now. Makes way for future pages
- overview
- funders
- projects

see #234

app/assets/stylesheets/application.scss

@@ -110,8 +110,13 @@
   .container {
     position: relative;
   }
+  .inverted-nav {
+    border-top: 3px solid $color-purple-dark;
+  }
 }
 
+
+
 .fund-logo {
   max-width: 100px;
   border-radius: 8px;
@@ -179,9 +184,24 @@
 }
 
 .home-search__wrapper {
-
   @include media-breakpoint-up(md) {
     display: flex;
     justify-content: center;
   }
+}
+
+.inverted-nav {
+	.nav-link {
+		color: $color-white;
+    &.disabled {
+      color: $color-purple-light;
+    }
+    &.active {
+      background-color: adjust-color($color-purple-dark, $saturation: -15%, $lightness: -15%);
+      border-bottom: 1px solid $color-purple;
+    }
+    &:hover, &:active, &:focus {
+      background-color: adjust-color($color-purple-dark, $saturation: -15%, $lightness: -7.5%);
+    }
+	}
 }

app/views/funds/_header.html.erb

@@ -45,5 +45,18 @@
 
       </div>
     </div>
+    <% if @allocation %>
+    <div class="row">
+      <div class="col-12">
+          <nav class="inverted-nav mt-2 pt-4">
+            <ul class="nav nav-pills">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="#">Allocations</a>
+              </li>
+            </ul>
+          </nav>
+      </div>
+    </div>
+    <% end %>
   </div>
 </div>