sample_rails_tailwind/app/views/layouts/_header.html.erb

<!-- 固定在顶部容器 -->
<div class="fixed top-0 left-0 right-0 z-50">
  <!-- 响应式内边距 -->
<!--<div class="container mx-auto px-3 sm:px-6 lg:px-1 py-4">-->
  <!-- 顶部菜单栏 -->
<div class="navbar
        backdrop-filter backdrop-blur-lg bg-opacity-30 border-b border-gray-200 border-transparent
        shadow-md min-h-0 h-12 px-8 lg:px-12">
  <div class="navbar-start">
    <%= link_to "Today AI Weather", root_url, id: "logo", class: "btn btn-ghost text-xl" %>
  </div>
  <div class="navbar-end">
    <div class="hidden lg:flex">
      <ul class="menu menu-horizontal px-1">
        <li><%= link_to "Home", root_url %></li>
        <li><%= link_to "Help", help_url %></li>
        <% if logged_in? %>
          <li><%= link_to "Users", users_path %></li>
          <li>
          <details>
            <summary>
              Account <b class="caret"></b>
            </summary>
            <ul class="bg-base-100 rounded-t-none p-2">
              <li><%= link_to "Profile", current_user %></li>
              <li><%= link_to "Settings", edit_user_path(current_user) %></li>
              <div class="divider"></div>
              <li>
                <%= link_to "Log out", logout_path, data: { turbo_method: :delete } %>
              </li>
            </ul>
          </details>
          </li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
        <% end %>
      </ul>
    </div>
    <details class="dropdown dropdown-end">
      <summary tabindex="0" role="button" class="btn btn-ghost lg:hidden">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h8m-8 6h16" />
        </svg>
      </summary>
      <ul
        tabindex="0"
        class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
        <li><%= link_to "Home", root_url %></li>
        <li><%= link_to "Help", help_url %></li>
        <% if logged_in? %>
          <li><%= link_to "Users", users_path %></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><%= link_to "Profile", current_user %></li>
              <li><%= link_to "Settings", edit_user_path(current_user) %></li>
              <li class="divider"></li>
              <li>
                <%= link_to "Log out", logout_path, data: { turbo_method: :delete } %>
              </li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
        <% end %>
      </ul>
    </details>
    <%= render "layouts/theme_swap" %>
  </div>
</div>
<!--</div>-->
</div>

<!-- 添加一个占位 div，防止内容被覆盖 -->
<div aria-hidden="true" class="border-none h-12"></div>