Ad a user card
This commit is contained in:
parent
10211a51ef
commit
59b41eaa70
GPG key ID:
61209BF70A5B18BE
4 changed files with 156 additions and 18 deletions
39
app/javascript/controllers/dropdown_controller.js
Normal file
39
app/javascript/controllers/dropdown_controller.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
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
Normal file
21
app/javascript/controllers/navigation_controller.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
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")
|
||||
}
|
||||
}
|
||||
|
|
@ -12,24 +12,64 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="w-100 py-4 px-6 bg-gray-900 flex items-center justify-between flex-wrap">
|
||||
<div class="flex items-center">
|
||||
<%= link_to root_path, class: "mr-8" do %>
|
||||
<%= image_tag "logo.svg", alt: "Family Funds Logo", class: "h-8" %>
|
||||
<% end %>
|
||||
<ul class="flex">
|
||||
<% if Current.user.registered? %>
|
||||
<li class="mr-6"><%= link_to "Dashboard", root_path, class: "text-white" %></li>
|
||||
<li class="mr-6"><%= link_to "Expenses", expenses_path, class: "text-white" %></li>
|
||||
<li class="mr-6"><%= link_to "Credit Card Bills", credit_card_bills_path, class: "text-white" %></li>
|
||||
<li class="mr-6"><%= link_to "Incomes", incomes_path, class: "text-white" %></li>
|
||||
<li class="mr-6"><%= link_to "Members", members_path, class: "text-white" %></li>
|
||||
<li class="mr-6"><%= link_to "Log out", session_path, data: {turbo_method: :delete}, class: "text-white" %></li>
|
||||
<% else %>
|
||||
<li class="mr-6"><%= link_to "Sign up", new_user_path, class: "text-white" %></li>
|
||||
<li class="mr-6"><%= link_to "Log in", new_session_path, class: "text-white" %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<nav class="w-full py-4 px-4 md:px-6 bg-gray-900" data-controller="navigation">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center flex-shrink-0">
|
||||
<%= link_to root_path, class: "mr-4 md:mr-8" do %>
|
||||
<%= image_tag "logo.svg", alt: "Family Funds Logo", class: "h-8" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!-- Desktop menu -->
|
||||
<div class="hidden lg:flex items-center flex-grow justify-center">
|
||||
<ul class="flex space-x-6">
|
||||
<% if Current.user.registered? %>
|
||||
<li><%= link_to "Dashboard", root_path, class: "text-white hover:text-gray-300" %></li>
|
||||
<li><%= link_to "Expenses", expenses_path, class: "text-white hover:text-gray-300" %></li>
|
||||
<li><%= link_to "Credit Card Bills", credit_card_bills_path, class: "text-white hover:text-gray-300" %></li>
|
||||
<li><%= link_to "Incomes", incomes_path, class: "text-white hover:text-gray-300" %></li>
|
||||
<li><%= link_to "Members", members_path, class: "text-white hover:text-gray-300" %></li>
|
||||
<% else %>
|
||||
<li><%= link_to "Sign up", new_user_path, class: "text-white hover:text-gray-300" %></li>
|
||||
<li><%= link_to "Log in", new_session_path, class: "text-white hover:text-gray-300" %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 flex-shrink-0">
|
||||
<!-- Hamburger menu button -->
|
||||
<button
|
||||
class="lg:hidden text-white hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg p-2"
|
||||
data-navigation-target="hamburger"
|
||||
data-action="click->navigation#toggle"
|
||||
>
|
||||
<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>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<% if Current.user.registered? %>
|
||||
<%= render 'shared/user_dropdown' %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<div class="lg:hidden mt-4 hidden" data-navigation-target="menu">
|
||||
<div class="border-t border-gray-700 pt-4">
|
||||
<ul class="space-y-2">
|
||||
<% if Current.user.registered? %>
|
||||
<li><%= link_to "Dashboard", root_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
|
||||
<li><%= link_to "Expenses", expenses_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
|
||||
<li><%= link_to "Credit Card Bills", credit_card_bills_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
|
||||
<li><%= link_to "Incomes", incomes_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
|
||||
<li><%= link_to "Members", members_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
|
||||
<% else %>
|
||||
<li><%= link_to "Sign up", new_user_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
|
||||
<li><%= link_to "Log in", new_session_path, class: "block text-white hover:text-gray-300 hover:bg-gray-800 px-3 py-2 rounded-md text-base font-medium" %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
|
|
|||
38
app/views/shared/_user_dropdown.html.erb
Normal file
38
app/views/shared/_user_dropdown.html.erb
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<div class="relative" data-controller="dropdown">
|
||||
<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"
|
||||
data-dropdown-target="button"
|
||||
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">
|
||||
<%= Current.user.email.first.upcase %>
|
||||
</div>
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50 hidden"
|
||||
data-dropdown-target="menu"
|
||||
>
|
||||
<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 %>
|
||||
<svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
</svg>
|
||||
Profile
|
||||
<% end %>
|
||||
<hr class="my-1 border-gray-200">
|
||||
<%= link_to session_path,
|
||||
data: {turbo_method: :delete},
|
||||
class: "flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" do %>
|
||||
<svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
||||
</svg>
|
||||
Log out
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue