songtianlun
5efe441fa8
- Add padding and flex layout to the sign out button - Wrap the icon and text in a div for better structure These changes update the sign out button in the navbar for improved accessibility and aesthetics, aligning it better with the overall UI style.
88 lines
5.6 KiB
Plaintext
88 lines
5.6 KiB
Plaintext
<div class="navbar bg-base-100/80 backdrop-blur-sm fixed top-0 z-50">
|
|
<div class="container mx-auto px-4">
|
|
<!-- Logo -->
|
|
<div class="flex-1">
|
|
<%= link_to root_path, class: "text-xl md:text-2xl font-display font-bold hover:text-primary transition-colors" do %>
|
|
Today AI Weather
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden md:flex flex-none gap-2 items-center">
|
|
<%= link_to "Cities", cities_path, class: "btn btn-ghost btn-sm font-sans" %>
|
|
<%= link_to "Arts", arts_path, class: "btn btn-ghost btn-sm font-sans" %>
|
|
|
|
<% if user_signed_in? %>
|
|
<div class="dropdown dropdown-end">
|
|
<label tabindex="0" class="btn btn-ghost btn-sm">
|
|
<div class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<span class="hidden lg:inline"><%= current_user.email %></span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</div>
|
|
</label>
|
|
<%= render 'layouts/user_menu' %>
|
|
</div>
|
|
<% else %>
|
|
<%= link_to new_user_session_path, class: "btn btn-primary btn-sm" do %>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
|
|
</svg>
|
|
<span>Sign in</span>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div class="flex md:hidden">
|
|
<div class="dropdown dropdown-end">
|
|
<label tabindex="0" class="btn btn-ghost btn-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
</label>
|
|
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
|
|
<li><%= link_to "Cities", cities_path %></li>
|
|
<li><%= link_to "Arts", arts_path %></li>
|
|
<div class="divider my-1"></div>
|
|
<% if user_signed_in? %>
|
|
<li>
|
|
<%= link_to edit_user_registration_path do %>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Settings
|
|
<% end %>
|
|
</li>
|
|
<li>
|
|
<%= button_to destroy_user_session_path,
|
|
method: :delete,
|
|
class: "flex items-center gap-2 w-full p-2" do %>
|
|
<div class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
|
|
</svg>
|
|
<span>Sign out</span>
|
|
</div>
|
|
<% end %>
|
|
</li>
|
|
<% else %>
|
|
<li>
|
|
<%= link_to new_user_session_path do %>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
|
|
</svg>
|
|
Sign in
|
|
<% end %>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |