Completes Sub Categories and Measures for "All " Category Tabs -

Milford High School (Milford District).  Add tabs to top navigation [#179727241]

app/assets/stylesheets/colors.scss

@@ -8,6 +8,7 @@ $white: #FFFFFF;
 $blue: #01788E;
 $red: #C93047;
 $light-blue: #FAFCFD;
+$dark-blue: #004D61;
 
 $teal: #00B0B3;
 $mint: #B2D236;
@@ -42,6 +43,12 @@ $ideal: #C0FF73;
   background-color: $light-blue;
 }
 
+.nav-tabs {
+  .bg-color-dark-blue {
+    background-color: $dark-blue;
+  }
+}
+
 .bg-color-blue {
   background-color: $blue;
 }

app/assets/stylesheets/dashboard.scss

@@ -1,4 +1,3 @@
-@import 'fonts';
 @import 'bootstrap';
 @import 'fonts';
 

app/assets/stylesheets/navigation.scss

@@ -0,0 +1,12 @@
+.nav-tabs {
+  margin-bottom: -1rem;
+  border-bottom: 1px solid transparent;
+  .nav-link {
+    color: white;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+  }
+}
+.nav-item {
+  margin-right: 1px;
+}

app/assets/stylesheets/sqm_application.scss

@@ -5,6 +5,7 @@
 @import "fonts";
 @import "borders";
 @import "dashboard";
+@import "navigation";
 @import "buttons";
 @import "scss/fontawesome.scss" ;
 @import "scss/solid.scss";

app/controllers/sqm_categories_controller.rb

@@ -1,8 +1,16 @@
 class SqmCategoriesController < SqmApplicationController
 
   def show
+    @categories = SqmCategory.all.order(:sort_index).map do |category|
+      CategoryPresenter.new(
+        category: category,
+        academic_year: academic_year,
+        school: school,
+      )
+    end
+
     @category = CategoryPresenter.new(
-      category: SqmCategory.find_by_name('Teachers & Leadership'),
+      category: SqmCategory.find_by_slug(params[:id]),
       academic_year: academic_year,
       school: school,
     )

app/models/sqm_category.rb

@@ -1,3 +1,7 @@
 class SqmCategory < ActiveRecord::Base
+  include FriendlyId
+
+  friendly_id :name, use: [:slugged]
+
   has_many :subcategories
 end

app/presenters/category_presenter.rb

@@ -37,4 +37,8 @@ class CategoryPresenter
       )
     end
   end
+
+  def to_model
+    @category
+  end
 end

app/views/layouts/sqm/_header.html.erb

@@ -30,7 +30,7 @@
   <div class="bg-color-blue">
     <div class="container">
       <div class="row py-4 justify-content-between align-items-center">
-        <div class="col">
+        <div class="col align-self-end">
           <% if content_for?(:navigation) %>
             <%= yield(:navigation) %>
           <% end %>

app/views/sqm_categories/show.html.erb

@@ -1,3 +1,15 @@
+<% content_for :navigation do %>
+  <nav class="nav nav-tabs">
+    <% @categories.each do |category| %>
+      <div class="nav-item">
+        <%= link_to [@district, @school, category, { year: @academic_year.range }], class: ["font-bitter", "weight-600","nav-link", "bg-color-dark-blue", current_page?([@district, @school, category, { year: @academic_year.range }]) ? "active" : ""] do %>
+          <i class="fa fa-<%= category.icon %> me-2"></i> <%= category.name %>
+        <% end %>
+      </div>
+    <% end %>
+  </nav>
+<% end %>
+
 <h1 class="sub-header font-bitter color-red"><%= @category.name %></h1>
 <h2 class="col-8 body-large"><%= @category.description %></h2>
 
@@ -19,7 +31,7 @@
         <div class="measure-presenter d-flex flex-column justify-space-between align-items-center px-5">
           <h3 class="measure-description sub-header-4 mb-5 "><%= measure_presenter.name %></h3>
           <div>
-            <%= render partial: "gauge_graph", locals: { gauge: measure_presenter.gauge_presenter, gauge_class: 'gauge-graph-sm', font_class: 'font-cabin'} %>
+            <%= render partial: "gauge_graph", locals: { gauge: measure_presenter.gauge_presenter, gauge_class: 'gauge-graph-sm', font_class: 'font-cabin' } %>
           </div>
           <p class="measure-description body-small mt-5 mb-4 "><%= measure_presenter.description %></p>
         </div>