From ee9c40391ffc4a35d520441f72ae5283b6b2e0fd Mon Sep 17 00:00:00 2001
From: Jeremy Lecour <jlecour@evolix.fr>
Date: Tue, 9 Feb 2021 14:26:05 +0100
Subject: [PATCH] WIP: mise en place de template et d'interactions avec
 Stimulus

---
 .../controllers/hello_controller.js           |  7 ------
 .../controllers/main_nav_controller.js        | 25 +++++++++++++++++++
 app/javascript/stylesheets/application.scss   | 16 ++++++++++++
 app/views/emails/index.html.erb               |  4 +--
 app/views/emails/show.html.erb                |  4 +--
 app/views/filters/index.html.erb              |  4 +--
 app/views/filters/show.html.erb               |  4 +--
 app/views/layouts/application.html.erb        | 22 ++++++++--------
 8 files changed, 59 insertions(+), 27 deletions(-)
 delete mode 100644 app/javascript/controllers/hello_controller.js
 create mode 100644 app/javascript/controllers/main_nav_controller.js

diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js
deleted file mode 100644
index 612a01f..0000000
--- a/app/javascript/controllers/hello_controller.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Controller } from "stimulus"
-
-export default class extends Controller {
-  connect() {
-    this.element.textContent = "Hello World!"
-  }
-}
diff --git a/app/javascript/controllers/main_nav_controller.js b/app/javascript/controllers/main_nav_controller.js
new file mode 100644
index 0000000..8727798
--- /dev/null
+++ b/app/javascript/controllers/main_nav_controller.js
@@ -0,0 +1,25 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "userButton", "userMenu" ]
+
+  toggle_user_menu () {
+    if (this.userButtonTarget.getAttribute('aria-expanded') == "false") {
+      // Show
+      this.userButtonTargets.forEach((element, index) => {
+        element.setAttribute('aria-expanded', 'true');
+      })
+      this.userMenuTargets.forEach((element, index) => {
+        element.classList.remove("hidden")
+      })
+    } else {
+      // Hide
+      this.userButtonTargets.forEach((element, index) => {
+        element.setAttribute('aria-expanded', 'false');
+      })
+      this.userMenuTargets.forEach((element, index) => {
+        element.classList.add("hidden")
+      })
+    }
+  }
+}
diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
index 76fcadc..add2ff0 100644
--- a/app/javascript/stylesheets/application.scss
+++ b/app/javascript/stylesheets/application.scss
@@ -1,3 +1,19 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+
+
+@layer base {
+  h1 {
+    @apply text-3xl font-bold leading-tight text-gray-900;
+  }
+}
+
+@layer components {
+  .nav-tab--current {
+    @apply bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium;
+  }
+  .nav-tab {
+    @apply text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium;
+  }
+}
diff --git a/app/views/emails/index.html.erb b/app/views/emails/index.html.erb
index f568ab5..73a8f72 100644
--- a/app/views/emails/index.html.erb
+++ b/app/views/emails/index.html.erb
@@ -1,5 +1,5 @@
-<% content_for :main_title do %>
-  Emails
+<% content_for :main_header do %>
+  <h1>Emails</h1>
 <% end %>
 
 <p id="notice"><%= notice %></p>
diff --git a/app/views/emails/show.html.erb b/app/views/emails/show.html.erb
index 2638e49..ed368b9 100644
--- a/app/views/emails/show.html.erb
+++ b/app/views/emails/show.html.erb
@@ -1,5 +1,5 @@
-<% content_for :main_title do %>
-  Email #
+<% content_for :main_header do %>
+  <h1>Email #</h1>
 <% end %>
 
 <p id="notice"><%= notice %></p>
diff --git a/app/views/filters/index.html.erb b/app/views/filters/index.html.erb
index c50b37c..43e9c40 100644
--- a/app/views/filters/index.html.erb
+++ b/app/views/filters/index.html.erb
@@ -1,5 +1,5 @@
-<% content_for :main_title do %>
-  Filters
+<% content_for :main_header do %>
+  <h1>Filters</h1>
 <% end %>
 
 <p id="notice"><%= notice %></p>
diff --git a/app/views/filters/show.html.erb b/app/views/filters/show.html.erb
index a6ee319..7964a13 100644
--- a/app/views/filters/show.html.erb
+++ b/app/views/filters/show.html.erb
@@ -1,5 +1,5 @@
-<% content_for :main_title do %>
-  Filter #<%= @filter.id %>
+<% content_for :main_header do %>
+  <h1>Filter #<%= @filter.id %></h1>
 <% end %>
 
 <p id="notice"><%= notice %></p>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 4899831..70fc5be 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -13,7 +13,7 @@
 
   <body class="bg-gray-100">
     <div>
-      <nav class="bg-gray-800">
+      <nav class="bg-gray-800" data-controller="main-nav">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div class="flex items-center justify-between h-16">
             <div class="flex items-center">
@@ -23,8 +23,8 @@
               <div class="hidden md:block">
                 <div class="ml-10 flex items-baseline space-x-4">
                   <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-                  <%= link_to "Emails", emails_path, class: "#{ current_page?(emails_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-sm font-medium" %>
-                  <%= link_to "Filters", filters_path, class: "#{ current_page?(filters_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-sm font-medium" %>
+                  <%= link_to "Emails", emails_path, class: (current_page?(emails_path) ? "nav-tab--current" : "nav-tab") %>
+                  <%= link_to "Filters", filters_path, class: (current_page?(filters_path) ? "nav-tab--current" : "nav-tab") %>
                 </div>
               </div>
             </div>
@@ -34,7 +34,7 @@
                 <!-- Profile dropdown -->
                 <div class="ml-3 relative">
                   <div>
-                    <button class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-haspopup="true">
+                    <button id="user-menu-button" data-action="main-nav#toggle_user_menu focusout->main-nav#toggle_user_menu" data-main-nav-target="userButton" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-haspopup="true" aria-expanded="false" aria-controls="user-menu">
                       <span class="sr-only">Open user menu</span>
                       <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
                     </button>
@@ -49,7 +49,7 @@
                       From: "transform opacity-100 scale-100"
                       To: "transform opacity-0 scale-95"
                   -->
-                  <div class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                  <div data-main-nav-target="userMenu" id="user-menu" class="hidden origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button">
                     <%= button_to "Sign out", destroy_user_session_path, class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", role: "menuitem", method: :delete, data: { confirm: 'Are you sure?', "turbo-frame": "_top" } %>
                   </div>
                 </div>
@@ -57,7 +57,7 @@
             </div>
             <div class="-mr-2 flex md:hidden">
               <!-- Mobile menu button -->
-              <button class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+              <button data-action="main-nav#toggle_user_menu" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                 <span class="sr-only">Open main menu</span>
                 <!--
                   Heroicon name: outline/menu
@@ -85,11 +85,11 @@
 
           Open: "block", closed: "hidden"
         -->
-        <div class="hidden md:hidden">
+        <div data-main-nav-target="userMenu" class="hidden md:hidden">
           <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
             <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-whites" -->
-            <%= link_to "Emails", emails_path, class: "#{ current_page?(emails_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-base font-medium" %>
-            <%= link_to "Filters", filters_path, class: "#{ current_page?(filters_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-base font-medium" %>
+            <%= link_to "Emails", emails_path, class: (current_page?(emails_path) ? "nav-tab--current" : "nav-tab") %>
+            <%= link_to "Filters", filters_path, class: (current_page?(filters_path) ? "nav-tab--current" : "nav-tab") %>
           </div>
           <div class="pt-4 pb-3 border-t border-gray-700">
             <div class="flex items-center px-5">
@@ -110,9 +110,7 @@
 
       <header class="bg-white shadow">
         <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-          <h1 class="text-3xl font-bold leading-tight text-gray-900">
-            <%= yield :main_title %>
-          </h1>
+          <%= yield :main_header %>
         </div>
       </header>
       <main>