Style side nav bar, add icons, persist active item state

Gemfile

@@ -105,3 +105,5 @@ gem "sidekiq-scheduler", "~> 4.0"
 gem "pagy", "~> 6.0"
 gem "foreman"
 gem 'async', '~> 2.5', '>= 2.5.1'
+
+gem "heroicon"

Gemfile.lock

@@ -172,6 +172,7 @@ GEM
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
     ffi (1.15.5)
+    ffi (1.15.5-x64-mingw-ucrt)
     ffi-compiler (1.0.1)
       ffi (>= 1.0.0)
       rake
@@ -187,6 +188,8 @@ GEM
     geocoder (1.8.1)
     globalid (1.0.0)
       activesupport (>= 5.0)
+    heroicon (1.0.0)
+      rails (>= 5.2)
     i18n (1.12.0)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
@@ -252,13 +255,16 @@ GEM
     nio4r (2.5.8)
     nokogiri (1.13.9-arm64-darwin)
       racc (~> 1.4)
+    nokogiri (1.13.9-x64-mingw-ucrt)
+      racc (~> 1.4)
     nokogiri (1.13.9-x86_64-linux)
       racc (~> 1.4)
     pagy (6.0.2)
     parallel (1.23.0)
     parser (3.2.2.1)
       ast (~> 2.4.1)
     pg (1.4.4)
+    pg (1.4.4-x64-mingw-ucrt)
     pry (0.14.1)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -409,6 +415,8 @@ GEM
       railties (>= 6.0.0)
     tailwindcss-rails (2.0.15-arm64-darwin)
       railties (>= 6.0.0)
+    tailwindcss-rails (2.0.15-x64-mingw-ucrt)
+      railties (>= 6.0.0)
     tailwindcss-rails (2.0.15-x86_64-linux)
       railties (>= 6.0.0)
     thor (1.2.1)
@@ -421,6 +429,8 @@ GEM
       railties (>= 6.0.0)
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
+    tzinfo-data (1.2025.1)
+      tzinfo (>= 1.0.0)
     unicode-display_width (2.4.2)
     uniform_notifier (1.16.0)
     web-console (4.2.0)
@@ -444,6 +454,7 @@ GEM
 PLATFORMS
   arm64-darwin-21
   arm64-darwin-22
+  x64-mingw-ucrt
   x86_64-linux
 
 DEPENDENCIES
@@ -463,6 +474,7 @@ DEPENDENCIES
   foreman
   friendly_id (~> 5.4.0)
   geocoder
+  heroicon
   image_processing (~> 1.2)
   importmap-rails
   jbuilder

app/assets/stylesheets/application.css

@@ -12,4 +12,4 @@
  *
  *= require_tree .
  *= require_self
- */
+ */

app/helpers/heroicon_helper.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module HeroiconHelper
+  include Heroicon::Engine.helpers
+end

app/javascript/controllers/index.js

@@ -6,9 +6,6 @@ import { application } from "controllers/application"
 import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
 eagerLoadControllersFrom("controllers", application)
 
-import NavController from "controllers/nav_controller"
-application.register("nav", NavController)
-
 // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
 // import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
 // lazyLoadControllersFrom("controllers", application)

app/javascript/controllers/sidebar_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["link"];
+
+  connect() {
+    this.updateActiveLink();
+  }
+
+  setActive(event) {
+    this.linkTargets.forEach((link) => link.classList.remove("bg-yellow-500"));
+    event.currentTarget.classList.add("bg-yellow-500");
+    localStorage.setItem("activeSidebarLink", event.currentTarget.dataset.path);
+  }
+
+  updateActiveLink() {
+    const activePath = localStorage.getItem("activeSidebarLink") || window.location.pathname;
+    this.linkTargets.forEach((link) => {
+      if (link.dataset.path === activePath) {
+        link.classList.add("bg-yellow-500");
+      } else {
+        link.classList.remove("bg-yellow-500");
+      }
+    });
+  }
+}

app/models/job.rb

@@ -4,7 +4,7 @@ class Job < ApplicationRecord
 
   belongs_to :author, class_name: "User", foreign_key: "user_id"
 
-  default_scope { where(deleted_at: nil).order(created_at: :desc) }
+  # default_scope { where(deleted_at: nil).order(created_at: :desc) }
 
   friendly_id :title, use: :slugged
 

app/views/dashboard/_left_bar.html.erb

@@ -1,13 +1,21 @@
-<div class="w-3/12">
+<div data-controller="sidebar" class="md:w-3/12 w-2/12 rounded-xl border border-gray-300 shadow p-2">
   <div class="flex flex-col">
-    <%= link_to dashboard_path, class: "pb-4 mb-1 rounded font-semibold items-center hover:bg-yellow-500 py-4 p-2" do%>
-      <span class="">Dashboard</span>
-    <%end%>
-    <%= link_to dashboard_jobs_path, class: "pb-4 mb-1 font-semibold rounded hover:bg-yellow-500 py-4 p-2" do%>
-      <span>My Jobs</span>
-    <%end%>
-    <%= link_to dashboard_company_path(current_user.current_company), class: "pb-4 mb-1 rounded font-semibold hover:bg-yellow-500 py-4 p-2" do%>
-      <span>My Company</span>
-    <%end%>
+    <%= link_to dashboard_path, class: "mb-1 flex justify-center md:justify-start rounded-xl items-center hover:bg-yellow-500 py-2 px-2", data: { sidebar_target: "link", action: "click->sidebar#setActive", path: dashboard_path } do %>
+      <%= heroicon "chart-pie", variant: :outline, options: { class: "h-[25px] w-[25px] md:mr-2 text-gray-800" } %>
+
+      <span class="hidden md:block">Dashboard</span>
+    <% end %>
+
+    <%= link_to dashboard_jobs_path, class: "flex items-center justify-center md:justify-start mb-1 rounded-xl hover:bg-yellow-500 py-2 px-2", data: { sidebar_target: "link", action: "click->sidebar#setActive", path: dashboard_jobs_path } do %>
+    <%= heroicon "briefcase", variant: :outline, options: { class: "h-[25px] w-[25px] md:mr-2 text-gray-800" } %>
+
+    <span class="hidden md:block">My Jobs</span>
+    <% end %>
+
+    <%= link_to dashboard_company_path(current_user.current_company), class: "flex items-center justify-center md:justify-start mb-1 rounded-xl hover:bg-yellow-500 py-2 px-2", data: { sidebar_target: "link", action: "click->sidebar#setActive", path: dashboard_company_path(current_user.current_company) } do %> 
+    <%= heroicon "building-office", variant: :outline, options: { class: "h-[25px] w-[25px] md:mr-2 text-gray-800" } %>
+
+    <span class="hidden md:block">My Company</span>
+    <% end %>
   </div>
-</div>
+</div>

app/views/dashboard/_links.html.erb

@@ -1,6 +1,8 @@
-<div class="w-4/12 flex">
+<div class="w-full flex">
   <div class="">
     <p>Create a new job for you Company</p> <br/>
-    <span class="md:ml-2 bg-red-500 rounded text-white p-1 md:p-3 font-semibold m-3 "><%= link_to 'New Job', new_dashboard_job_path %></span>
+    <span class="md:ml-2 bg-red-500 rounded text-white p-1 md:p-3 font-semibold ">
+    <%= link_to 'New Job', new_dashboard_job_path %>
+    </span>
   </div>
 <div>

app/views/dashboard/_main_page.html.erb

@@ -1,15 +1,15 @@
-<div class="w-6/12">
+<div class="ml-4 md:w-6/12 w-10/12 h-auto pb-2">
   <h2 class="text-1xl font-bold ml-2">Hi,
     <% if name?(current_user) %>
       <%= current_user.name %>
     <%end%>
   </h2>
-  <div class="job-overview my-4  flex rounded p-2 w-100">
-    <div class="job-overview--this-week p-2 bg-gray-100 box-border w-1/3 rounded drop-shadow-md">
+  <div class="job-overview my-4  md:flex rounded p-2 w-100">
+    <div class="job-overview--this-week w-full p-2 bg-gray-100 box-border w-1/3 rounded drop-shadow-md">
       <h3 class="font-bold py-2">New Jobs this week</h3>
       <p class=""><%= current_user.jobs.count %></p>
     </div>
-    <div class="job-overview--this-week p-2 bg-gray-100 box-border w-1/3 ml-4 rounded drop-shadow-md">
+    <div class="job-overview--this-week w-full p-2 bg-gray-100 box-border w-1/3 md:ml-4 mt-2 md:mt-0 rounded drop-shadow-md">
       <h3 class="font-bold py-2">Top categories this week</h3>
       <% @top_categories.each do |category| %>
         <span class="flex ">
@@ -18,7 +18,7 @@
         </span>
       <%end%>
     </div>
-    <div class="job-overview--this-week p-2 bg-gray-100 box-border w-1/3 ml-4 rounded drop-shadow-md">
+    <div class="job-overview--this-week p-2 w-full bg-gray-100 box-border w-1/3 md:ml-4 mt-2 md:mt-0 rounded drop-shadow-md">
       <h3 class="font-bold py-2">Top locations this week</h3>
       <p><%= current_user.jobs.count %></p>
     </div>

app/views/dashboard/index.html.erb

@@ -1,4 +1,4 @@
-<div class="flex w-full">
+<div class="flex w-full px-2">
   <%= render partial: '/dashboard/left_bar' %>
   <%= render partial: '/dashboard/main_page' %>
 </div>

app/views/dashboard/jobs/edit.html.erb

@@ -1,6 +1,6 @@
 <div class="flex w-full">
   <%= render partial: '/dashboard/left_bar' %>
-  <div class="w-6/12">
+  <div class="w-6/12 ml-2 md:ml-4">
     <h1><%= t(".page_title") %></h1>
     <%= render partial: '/dashboard/jobs/form', locals: { url: dashboard_job_path(@job), method: :put}%>
   </div>

app/views/dashboard/jobs/index.html.erb

@@ -1,6 +1,6 @@
 <div class="flex w-full">
   <%= render partial: '/dashboard/left_bar' %>
-  <div class="w-11/12 md:w-1/2 mx-auto" id="jobs">
+  <div class="w-11/12 md:w-1/2 mx-auto ml-2 md:ml-4" id="jobs">
     <%= render partial: '/dashboard/jobs/job_preview', collection: @jobs, as: :job %>
   </div>
 </div>

app/views/dashboard/jobs/new.html.erb

@@ -1,6 +1,6 @@
 <div class="flex w-full">
   <%= render partial: '/dashboard/left_bar' %>
-  <div class="w-6/12">
+  <div class="w-6/12 ml-2 md:ml-4">
     <h1><%= t(".page_title") %></h1>
     <%= render partial: '/dashboard/jobs/form', locals: { url: dashboard_jobs_path, method: :post}%>
   </div>

config/database.yml

@@ -17,9 +17,11 @@
 default: &default
   adapter: postgresql
   encoding: unicode
-  # For details on connection pooling, see Rails configuration guide
-  # https://guides.rubyonrails.org/configuring.html#database-pooling
   pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
+  username: <%= ENV.fetch("DB_USERNAME") { "postgres" } %>
+  password: <%= ENV.fetch("DB_PASSWORD") { "jospin" } %>
+  host: <%= ENV.fetch("DB_HOST") { "localhost" } %>
+  port: <%= ENV.fetch("DB_PORT") { 5432 } %>
 
 development:
   <<: *default

config/initializers/heroicon.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+Heroicon.configure do |config|
+  config.variant = :solid # Options are :solid, :outline and :mini
+
+  ##
+  # You can set a default class, which will get applied to every icon with
+  # the given variant. To do so, un-comment the line below.
+  # config.default_class = {solid: "h-5 w-5", outline: "h-6 w-6", mini: "h-4 w-4"}
+end

db/schema.rb

@@ -89,10 +89,10 @@
     t.bigint "location_id", null: false
     t.bigint "category_id", null: false
     t.string "slug"
+    t.datetime "deleted_at"
     t.bigint "user_id", null: false
     t.integer "views", default: 0
     t.integer "translation", default: 0
-    t.datetime "deleted_at"
     t.index ["category_id"], name: "index_jobs_on_category_id"
     t.index ["company_id"], name: "index_jobs_on_company_id"
     t.index ["location_id"], name: "index_jobs_on_location_id"