WIP: mise en place de template et d'interactions avec Stimulus
This commit is contained in:
parent
69b5e3e542
commit
ee9c40391f
|
@ -1,7 +0,0 @@
|
|||
import { Controller } from "stimulus"
|
||||
|
||||
export default class extends Controller {
|
||||
connect() {
|
||||
this.element.textContent = "Hello World!"
|
||||
}
|
||||
}
|
25
app/javascript/controllers/main_nav_controller.js
Normal file
25
app/javascript/controllers/main_nav_controller.js
Normal file
|
@ -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")
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<% content_for :main_title do %>
|
||||
Emails
|
||||
<% content_for :main_header do %>
|
||||
<h1>Emails</h1>
|
||||
<% end %>
|
||||
|
||||
<p id="notice"><%= notice %></p>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<% content_for :main_title do %>
|
||||
Email #
|
||||
<% content_for :main_header do %>
|
||||
<h1>Email #</h1>
|
||||
<% end %>
|
||||
|
||||
<p id="notice"><%= notice %></p>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<% content_for :main_title do %>
|
||||
Filters
|
||||
<% content_for :main_header do %>
|
||||
<h1>Filters</h1>
|
||||
<% end %>
|
||||
|
||||
<p id="notice"><%= notice %></p>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue