Nav bar enhancement (#5271)

---------

Co-authored-by: Sam Williams <[email protected]>

app/assets/stylesheets/base/breakpoints.scss

@@ -1,4 +1,6 @@
 $small: 640px;
 $medium: 1024px;
-$mobile: $medium;
-$large: 1200px;
+$large: 1200px;
+
+// If you adjust this breakpoint, you also need to adjust the breakpoint value in app/javascript/controllers/sidebar-controller.js
+$mobile: 768px;

app/assets/stylesheets/base/variables.scss

@@ -1,2 +1,7 @@
 $primary: #00447c;
 $red: #dc3545;
+
+// ======== Sidebar colors
+$sidebar-inactive: #9AA4CA;
+$sidebar-active: #365CF5;
+$sidebar-dark: #1A2142;

app/assets/stylesheets/shared/sidebar.scss

@@ -53,6 +53,37 @@
   overflow-y: auto;
 }
 
+.logo-div {
+  height: 80px;
+}
+
+// Stops weird text wrapping when opening and closing sidebar
+.nav-item {
+  width: 250px;
+}
+
+.nav-item > a {
+  color: globals.$sidebar-inactive !important;
+  height: 44px;
+
+  &:hover {
+    color: globals.$sidebar-active !important;
+
+    span {
+      color: globals.$sidebar-dark !important;
+    }
+  }
+}
+
+.nav-item.active > a {
+  color: globals.$sidebar-dark !important;
+}
+
+.btn-sidebar {
+  color: #fff !important;
+  background-color: globals.$sidebar-active !important;
+}
+
 .sidebar-wrapper .sidebar-menu {
   margin-top: 24px;
   .list-group-item {
@@ -151,3 +182,32 @@
     margin-top: 72px;
   }
 }
+
+// These overrides are for larger than mobile screens
+@media only screen and (min-width: screen-sizes.$mobile) {
+  .sidebar-nav-wrapper {
+    -webkit-transform: translateX(0px) !important;
+    -moz-transform: translateX(0px) !important;
+    -ms-transform: translateX(0px) !important;
+    -o-transform: translateX(0px) !important;
+    transform: translateX(0px) !important;
+
+    &.active {
+      width: 66px;
+
+      -webkit-transform: translateX(0px) !important;
+      -moz-transform: translateX(0px) !important;
+      -ms-transform: translateX(0px) !important;
+      -o-transform: translateX(0px) !important;
+      transform: translateX(0px) !important;
+    }
+  }
+
+  .main-wrapper {
+    margin-left: 250px !important;
+
+    &.active {
+      margin-left: 66px !important;
+    }
+  }
+}

app/components/sidebar/group_component.html.erb

@@ -0,0 +1,21 @@
+<li class="nav-item nav-item-has-children group-item" data-sidebar-target="groupList" data-controller="sidebar-group">
+  <a
+    href="#0"
+    class="<%= @class %>"
+    data-bs-toggle="collapse"
+    data-bs-target="#ddmenu_<%= @identifier %>"
+    aria-controls="ddmenu_<%= @identifier %>"
+    aria-expanded="true"
+    aria-label="Toggle navigation"
+    data-sidebar-group-target="title">
+              <span class="icon">
+                <i class="lni mr-10 lni-<%= @icon %>"></i>
+              </span>
+    <span data-sidebar-target="linkTitle"><%= @title %></span>
+  </a>
+  <ul id="ddmenu_<%= @identifier %>" class="collapse dropdown-nav" data-sidebar-group-target="list">
+    <% links.each do |link| %>
+      <%= link %>
+    <% end %>
+  </ul>
+</li>

app/components/sidebar/group_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class Sidebar::GroupComponent < ViewComponent::Base
+  renders_many :links, Sidebar::LinkComponent
+
+  # @param title [String] the title/label for the link
+  # @param icon [String] the lni icon, pass just the name of the icon (ie. for lni-star --> icon: "star")
+  # @param render_check [Boolean] whether or not to display the link
+  def initialize(title:, icon:, render_check: true)
+    @title = title
+    @icon = icon
+    @render_check = render_check
+    @identifier = title.downcase.tr(" ", "-")
+    @class = "#{@identifier} collapsed"
+  end
+
+  # If there are no links or all links fail their render_check, then don't render this group
+  # @return [Boolean]
+  def render?
+    @render_check && !links.empty? && !links.select(&:render?).empty?
+  end
+end

app/components/sidebar/link_component.html.erb

@@ -0,0 +1,8 @@
+<li class="<%= @class %>" data-sidebar-group-target="link">
+  <%= link_to @path do %>
+    <% if @icon %>
+      <i class="lni mr-10 lni-<%= @icon %>"></i>
+    <% end %>
+    <span data-sidebar-target="linkTitle" class="sidebar-link"><%= @title %></span>
+  <% end %>
+</li>

app/components/sidebar/link_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class Sidebar::LinkComponent < ViewComponent::Base
+  include SidebarHelper
+
+  # @param title [String] the title/label for the link
+  # @param path [String] the path to navigate to
+  # @param icon [String] the lni icon, pass just the name of the icon (ie. for lni-star --> icon: "star")
+  # @param nav_item [Boolean] whether or not the link should have the nav-item class
+  # @param render_check [Boolean] whether or not to display the link
+  def initialize(title:, path:, icon: nil, nav_item: true, render_check: true)
+    @title = title
+    @icon = icon
+    @path = path
+    @nav_item = nav_item
+    @render_check = render_check
+  end
+
+  # Must be moved to this method in order to use the SidebarHelper
+  def before_render
+    @class = @nav_item ? "nav-item #{active_class(@path)}" : ""
+  end
+
+  # @return [Boolean]
+  def render?
+    @render_check
+  end
+end

app/helpers/sidebar_helper.rb

@@ -15,10 +15,6 @@ def menu_item(label:, path:, visible: false)
     link_to label, path, class: "list-group-item #{active_class(path)}" if visible
   end
 
-  def get_case_contact_link(casa_case)
-    case_contacts_path(casa_case_id: casa_case.id)
-  end
-
   private # private doesn't work in modules. It's here for semantic purposes
 
   def active_class(link_path)

app/javascript/application.js

@@ -23,13 +23,11 @@ require('./src/dashboard')
 require('./src/emancipations')
 require('./src/import')
 require('./src/password_confirmation')
-require('./src/plainadmin')
 require('./src/read_more')
 require('./src/reimbursements')
 require('./src/reports')
 require('./src/require_communication_preference')
 require('./src/select')
-require('./src/sidebar')
 require('./src/tooltip')
 require('./src/time_zone')
 require('./src/session_timeout_poller.js')

app/javascript/controllers/index.js

@@ -5,11 +5,19 @@
 import { application } from './application'
 
 import DismissController from './dismiss_controller'
+
 import ExtendedNestedFormController from './extended_nested_form_controller'
+
 import HelloController from './hello_controller'
-import RevealController from 'stimulus-reveal-controller'
 
+import NavbarController from './navbar_controller'
+
+import SidebarController from './sidebar_controller'
+
+import SidebarGroupController from './sidebar_group_controller'
 application.register('dismiss', DismissController)
 application.register('extended-nested-form', ExtendedNestedFormController)
 application.register('hello', HelloController)
-application.register('reveal', RevealController)
+application.register('navbar', NavbarController)
+application.register('sidebar', SidebarController)
+application.register('sidebar-group', SidebarGroupController)

app/javascript/controllers/navbar_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static outlets = ['sidebar']
+
+  click () {
+    // This simulates a click action on the sidebar-controller
+    this.sidebarOutlet.click()
+  }
+}

app/javascript/controllers/sidebar_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['sidebar', 'menu', 'logo', 'linkTitle', 'groupList']
+  static values = {
+    open: Boolean,
+    breakpoint: { type: Number, default: 768 }
+  }
+
+  static outlets = ['sidebar-group']
+
+  click () {
+    this.openValue = !this.openValue
+    this.toggleSidebar()
+    if (this.isNotMobile()) {
+      this.toggleLinks()
+      const mainWrapper = document.querySelector('.main-wrapper')
+      mainWrapper.classList.toggle('active')
+    } else {
+      this.toggleOverlay()
+    }
+  }
+
+  hoverOn () {
+    this.toggleHover()
+  }
+
+  hoverOff () {
+    this.toggleHover()
+  }
+
+  toggleHover () {
+    if (!this.openValue && this.isNotMobile()) {
+      this.toggleSidebar()
+      this.toggleLinks()
+    }
+  }
+
+  toggleSidebar () {
+    this.sidebarTarget.classList.toggle('active')
+  }
+
+  toggleLinks () {
+    this.linkTitleTargets.forEach((target) => {
+      target.classList.toggle('d-none')
+    })
+    this.groupListTargets.forEach((list) => {
+      list.classList.toggle('nav-item-has-children')
+    })
+    this.logoTarget.classList.toggle('d-none')
+  }
+
+  toggleOverlay () {
+    const overlay = document.querySelector('.overlay')
+    overlay.classList.toggle('active')
+  }
+
+  isNotMobile () {
+    return window.innerWidth >= this.breakpointValue
+  }
+}

app/javascript/controllers/sidebar_group_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['title', 'list', 'link']
+
+  connect () {
+    this.toggleShow()
+  }
+
+  // Expands list if a link is active
+  toggleShow () {
+    this.linkTargets.forEach((link) => {
+      if (link.classList.contains('active')) {
+        this.titleTarget.classList.remove('collapsed')
+        this.listTarget.classList.add('show')
+      }
+    })
+  }
+}

app/views/layouts/_header.html.erb

@@ -4,15 +4,9 @@
   <div class="container-fluid pt-30">
     <div class="row">
       <div class="col-lg-5 col-md-5 col-6">
-        <div class="header-left d-flex align-items-center">
-          <div class="menu-toggle-btn mr-20">
-            <button
-              id="menu-toggle"
-              class="main-btn primary-btn btn-hover">
-              <i class="lni lni-chevron-left me-2"></i> Menu
-            </button>
-          </div>
-        </div>
+        <button type="button" class="btn btn-sidebar d-md-none" data-controller="navbar" data-action="click->navbar#click" data-navbar-sidebar-outlet=".sidebar-controller">
+          <i class="lni lni-menu"></i>
+        </button>
       </div>
 
       <div class="col-lg-7 col-md-7 col-6">