songtianlun
cafe820a64
- Add tailwindcss-rails gem to Gemfile - Create application.tailwind.css for Tailwind styles - Update Procfile.dev for Tailwind CSS watch command - Add demo action and view for showcasing features - Update application layout to use Tailwind CSS classes - Refactor footer and header for improved styling This commit introduces Tailwind CSS for styling the application, enhancing the UI with utility-first CSS. A new demo page is also added to showcase the application features.
76 lines
3.5 KiB
Plaintext
76 lines
3.5 KiB
Plaintext
<header class="fixed top-0 w-full bg-gray-900 text-white">
|
|
<div class="container mx-auto px-4">
|
|
<nav class="flex items-center justify-between h-16">
|
|
<!-- Logo -->
|
|
<%= link_to root_url, class: "text-2xl font-bold uppercase tracking-tighter hover:text-gray-300", id: "logo" do %>
|
|
sample app
|
|
<% end %>
|
|
|
|
<!-- Mobile menu button -->
|
|
<div class="md:hidden">
|
|
<button type="button"
|
|
class="text-gray-300 hover:text-white focus:outline-none"
|
|
data-toggle="collapse"
|
|
data-target="#mobile-menu"
|
|
aria-expanded="false">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<!-- Hamburger icon -->
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Desktop menu -->
|
|
<div class="hidden md:flex md:items-center md:space-x-4">
|
|
<%= link_to "Home", root_url, class: "hover:text-gray-300" %>
|
|
<%= link_to "Help", help_url, class: "hover:text-gray-300" %>
|
|
|
|
<% if logged_in? %>
|
|
<%= link_to "Users", users_path, class: "hover:text-gray-300" %>
|
|
|
|
<!-- Dropdown -->
|
|
<div class="relative group">
|
|
<button class="flex items-center hover:text-gray-300">
|
|
Account
|
|
<svg class="ml-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Dropdown menu -->
|
|
<div class="absolute right-0 hidden group-hover:block mt-2 w-48 bg-white rounded-md shadow-lg py-1">
|
|
<%= link_to "Profile", current_user, class: "block px-4 py-2 text-gray-800 hover:bg-gray-100" %>
|
|
<%= link_to "Settings", edit_user_path(current_user), class: "block px-4 py-2 text-gray-800 hover:bg-gray-100" %>
|
|
<div class="border-t border-gray-100"></div>
|
|
<%= link_to "Log out", logout_path,
|
|
class: "block px-4 py-2 text-gray-800 hover:bg-gray-100",
|
|
data: { turbo_method: :delete } %>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<%= link_to "Log in", login_path, class: "hover:text-gray-300" %>
|
|
<% end %>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Mobile menu -->
|
|
<div class="md:hidden hidden" id="mobile-menu">
|
|
<div class="px-2 pt-2 pb-3 space-y-1">
|
|
<%= link_to "Home", root_url, class: "block px-3 py-2 rounded-md hover:bg-gray-700" %>
|
|
<%= link_to "Help", help_url, class: "block px-3 py-2 rounded-md hover:bg-gray-700" %>
|
|
|
|
<% if logged_in? %>
|
|
<%= link_to "Users", users_path, class: "block px-3 py-2 rounded-md hover:bg-gray-700" %>
|
|
<%= link_to "Profile", current_user, class: "block px-3 py-2 rounded-md hover:bg-gray-700" %>
|
|
<%= link_to "Settings", edit_user_path(current_user), class: "block px-3 py-2 rounded-md hover:bg-gray-700" %>
|
|
<%= link_to "Log out", logout_path,
|
|
class: "block px-3 py-2 rounded-md hover:bg-gray-700",
|
|
data: { turbo_method: :delete } %>
|
|
<% else %>
|
|
<%= link_to "Log in", login_path, class: "block px-3 py-2 rounded-md hover:bg-gray-700" %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header> |