Add main navigation bar

Make donations and invitations accessible to everyone

app/assets/stylesheets/_variables.scss

@@ -0,0 +1,10 @@
+$content-width: 800px;
+$content-max-width: 100%;
+
+$text-color-body: #222;
+$text-color-discreet: #888;
+
+$background-color-notice: #efffc4;
+$background-color-alert: #fff4c2;
+$color-blue: #0d4f99;
+$color-purple: #8955a0;

app/assets/stylesheets/fonts.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 @font-face {
   font-family: 'Raleway';
   src: url('/fonts/raleway-light.woff') format('woff2');
@@ -8,6 +10,7 @@
 body {
   font-family: "Open Sans", Helvetica, Arial, sans-serif;
   font-weight: 400;
+  color: $text-color-body;
 }
 
 h1, h2, h3 {

app/assets/stylesheets/layout.scss

@@ -1,11 +1,6 @@
+@import "variables";
 @import "mediaqueries";
 
-$content-width: 800px;
-$content-max-width: 100%;
-
-body {
-}
-
 #wrapper {
   width: 100%;
   text-align: center;
@@ -14,8 +9,8 @@ body {
     margin: 0 auto;
     padding: 4rem 0;
     text-align: center;
-    background: #0d4f99;
+    background: $color-blue;
-    background: linear-gradient(35deg, #8955a0 0, #0d4f99 100%);
+    background: linear-gradient(35deg, $color-purple 0, $color-blue 100%);
 
     @include media-max(small) {
       padding: 3rem 0;
@@ -77,18 +72,18 @@ body {
   padding: 2rem 0;
 
   &.notice {
-    background: #efffc4;
+    background: $background-color-notice;
   }
 
   &.alert {
-    background: #fff4c2;
+    background: $background-color-alert;
   }
 }
 
 main {
   width: $content-width;
   max-width: $content-max-width;
-  margin: 4rem auto;
+  margin: 4rem auto 6rem auto;
   text-align: left;
 
   @include media-max(medium) {
@@ -135,8 +130,8 @@ main {
 
   section {
     border-bottom: 1px dotted #ccc;
-    padding-bottom: 4rem;
+    padding-bottom: 3rem;
-    margin-bottom: 4rem;
+    margin-bottom: 3rem;
 
     @include media-max(small) {
       padding-bottom: 3rem;
@@ -169,7 +164,7 @@ main {
 
     .grid-item {
       p {
-        color: #888;
+        color: $text-color-discreet;
         font-size: 0.85rem;
       }
     }

app/assets/stylesheets/main_nav.scss

@@ -0,0 +1,31 @@
+@import "variables";
+
+#main-nav {
+  width: 100%;
+  text-align: center;
+  background-color: #efefef;
+
+  .wrapper {
+    width: $content-width;
+    max-width: $content-max-width;
+    margin: 0 auto;
+  }
+
+  ul {
+    li {
+      display: inline;
+
+      a {
+        display: inline-block;
+        padding: 1.5rem;
+        text-decoration: none;
+        color: $text-color-discreet;
+
+        &.active {
+          color: $text-color-body;
+          border-bottom: 2px solid #ffd000;
+        }
+      }
+    }
+  }
+}

app/controllers/dashboard_controller.rb

@@ -2,5 +2,6 @@ class DashboardController < ApplicationController
   before_action :require_user_signed_in
 
   def index
+    @current_section = "dashboard"
   end
 end

app/controllers/donations_controller.rb

@@ -5,5 +5,6 @@ class DonationsController < ApplicationController
   # GET /donations.json
   def index
     @donations = current_user.donations.completed
+    @current_section = "contributions"
   end
 end

app/controllers/invitations_controller.rb

@@ -8,6 +8,7 @@ class InvitationsController < ApplicationController
   def index
     @invitations_unused = current_user.invitations.unused
     @invitations_used   = current_user.invitations.used
+    @current_section = "invitations"
   end
 
   # GET /invitations/a-random-invitation-token

app/views/layouts/application.html.erb

@@ -27,6 +27,10 @@
         <% end %>
       </header>
 
+      <% if user_signed_in? && current_user.confirmed? %>
+        <%= render partial: 'shared/main_nav' %>
+      <% end %>
+
       <% flash.each do |type, msg| %>
         <div class="flash-msg <%= type %>">
           <p><%= msg %></p>

app/views/shared/_main_nav.html.erb

@@ -0,0 +1,22 @@
+<nav id="main-nav">
+  <div class="wrapper">
+    <div class="site">
+    </div>
+    <ul class="pages">
+      <li>
+        <%= link_to "Services", root_path,
+             class: @current_section == "dashboard" ? "active" : nil %>
+      </li>
+      <li>
+        <%= link_to "Donations", donations_path,
+              class: @current_section == "contributions" ? "active" : nil %>
+      </li>
+      <li>
+        <%= link_to "Invitations", invitations_path,
+              class: @current_section == "invitations" ? "active" : nil %>
+      </li>
+    </ul>
+    <div class="user">
+    </div>
+  </div>
+</nav>