<!DOCTYPE html> <html> <head> <title>FamilyBudget</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> </head> <body> <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 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 --> <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 cursor-pointer" > <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> </label> <% if Current.user.registered? %> <%= render 'shared/user_dropdown' %> <% end %> </div> </div> <!-- Mobile menu --> <div class="lg:hidden mt-4 hidden peer-checked:block"> <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> <% if flash.any? %> <% flash.each do |type, msg| %> <div class="py-2 px-4 font-bold msg-<%= type %>"> <%= msg %> </div> <% end %> <% end %> <main class="container mx-auto mt-28 px-5 flex"> <%= yield %> </main> </body> </html>