atomaka/budget
1
0
Fork 0
Code Issues 1 Pull requests 3 Activity Actions

Use tailwind peer instead of javascript
All checks were successful
Ruby CI / test (pull_request) Successful in 23s
Details

Browse source
This commit is contained in:
Andrew Tomaka 2025-06-16 22:23:09 -04:00
parent 59b41eaa70
commit 58e21336cd
Signed by: atomaka
GPG key ID: 61209BF70A5B18BE
4 changed files with 19 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/javascript/controllers/dropdown_controller.js
View file

@ -1,39 +0,0 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["button", "menu", "chevron"]
connect() {
this.closeOnClickOutside = this.closeOnClickOutside.bind(this)
}
toggle() {
if (this.menuTarget.classList.contains("hidden")) {
this.open()
} else {
this.close()
}
}
open() {
this.menuTarget.classList.remove("hidden")
this.chevronTarget.classList.add("rotate-180")
document.addEventListener("click", this.closeOnClickOutside)
}
close() {
this.menuTarget.classList.add("hidden")
this.chevronTarget.classList.remove("rotate-180")
document.removeEventListener("click", this.closeOnClickOutside)
}
closeOnClickOutside(event) {
if (!this.element.contains(event.target)) {
this.close()
}
}
disconnect() {
document.removeEventListener("click", this.closeOnClickOutside)
}
}

21
app/javascript/controllers/navigation_controller.js
View file

@ -1,21 +0,0 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["hamburger", "menu"]
toggle() {
if (this.menuTarget.classList.contains("hidden")) {
this.open()
} else {
this.close()
}
}
open() {
this.menuTarget.classList.remove("hidden")
}
close() {
this.menuTarget.classList.add("hidden")
}
}

13
app/views/layouts/application.html.erb
View file

@ -12,7 +12,8 @@
</head> </head>
<body> <body>
<nav class="w-full py-4 px-4 md:px-6 bg-gray-900" data-controller="navigation"> <nav class="w-full py-4 px-4 md:px-6 bg-gray-900">
<input type="checkbox" id="mobile-menu" class="peer hidden" />
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center flex-shrink-0"> <div class="flex items-center flex-shrink-0">
<%= link_to root_path, class: "mr-4 md:mr-8" do %> <%= link_to root_path, class: "mr-4 md:mr-8" do %>
@ -38,15 +39,13 @@
<div class="flex items-center space-x-4 flex-shrink-0"> <div class="flex items-center space-x-4 flex-shrink-0">
<!-- Hamburger menu button --> <!-- Hamburger menu button -->
<button <label for="mobile-menu"
class="lg:hidden text-white hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg p-2" class="lg:hidden text-white hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg p-2 cursor-pointer"
data-navigation-target="hamburger"
data-action="click->navigation#toggle"
> >
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg> </svg>
</button> </label>
<% if Current.user.registered? %> <% if Current.user.registered? %>
<%= render 'shared/user_dropdown' %> <%= render 'shared/user_dropdown' %>
@ -55,7 +54,7 @@
</div> </div>
<!-- Mobile menu --> <!-- Mobile menu -->
<div class="lg:hidden mt-4 hidden" data-navigation-target="menu"> <div class="lg:hidden mt-4 hidden peer-checked:block">
<div class="border-t border-gray-700 pt-4"> <div class="border-t border-gray-700 pt-4">
<ul class="space-y-2"> <ul class="space-y-2">
<% if Current.user.registered? %> <% if Current.user.registered? %>

19
app/views/shared/_user_dropdown.html.erb
View file

@ -1,21 +1,22 @@
<div class="relative" data-controller="dropdown"> <div class="relative group">
<button <input type="checkbox" id="user-dropdown" class="peer hidden" />
class="flex items-center space-x-2 text-white hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg p-2" <label for="user-dropdown"
data-dropdown-target="button" class="flex items-center space-x-2 text-white hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg p-2 cursor-pointer"
data-action="click->dropdown#toggle"
> >
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold text-sm flex-shrink-0"> <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold text-sm flex-shrink-0">
<%= Current.user.email.first.upcase %> <%= Current.user.email.first.upcase %>
</div> </div>
<span class="hidden xl:block font-medium truncate max-w-48"><%= Current.user.email %></span> <span class="hidden xl:block font-medium truncate max-w-48"><%= Current.user.email %></span>
<svg class="w-4 h-4 transform transition-transform duration-200 flex-shrink-0" data-dropdown-target="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 transform transition-transform duration-200 flex-shrink-0 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg> </svg>
</button> </label>
<!-- Invisible overlay to close dropdown when clicking outside -->
<label for="user-dropdown" class="fixed inset-0 z-40 hidden peer-checked:block cursor-default"></label>
<div <div
class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50 hidden" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50 hidden peer-checked:block"
data-dropdown-target="menu"
> >
<div class="py-1"> <div class="py-1">
<%= link_to user_path(Current.user), class: "flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" do %> <%= link_to user_path(Current.user), class: "flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" do %>