Files
Reem-Notas/app/views/layouts/_navbar.html.erb

94 lines
3.7 KiB
Plaintext

<%# app/views/layouts/_navbar.html.erb %>
<%# Sidebar lateral — responsiva (esconde no mobile, hamburguer abre) %>
<%# Overlay mobile %>
<div id="sidebar-overlay"
class="fixed inset-0 bg-black/70 z-30 hidden md:hidden"
onclick="toggleSidebar()"></div>
<%# Sidebar %>
<aside id="sidebar"
class="fixed top-0 left-0 h-full w-64 bg-[#111111] border-r border-[#2a2a2a] z-40
transform -translate-x-full md:translate-x-0 transition-transform duration-300">
<%# Logo / Marca %>
<div class="flex items-center gap-3 px-6 py-5 border-b border-[#2a2a2a]">
<div class="w-9 h-9 bg-orange-500 rounded-lg flex items-center justify-center font-black text-black text-lg">G</div>
<div>
<p class="font-bold text-white text-sm leading-tight">Reem Transporte</p>
<p class="text-orange-500 text-xs">Logística</p>
</div>
</div>
<%# Usuário logado %>
<div class="px-6 py-4 border-b border-[#2a2a2a]">
<p class="text-xs text-gray-500 mb-1">Logado como</p>
<p class="text-white font-semibold text-sm truncate"><%= current_user.nome_display %></p>
<span class="inline-block mt-1 px-2 py-0.5 text-xs rounded-full
<%= current_user.admin? ? 'bg-orange-500 text-black' :
current_user.gerente? ? 'bg-orange-800 text-white' :
current_user.operador? ? 'bg-gray-700 text-white' :
'bg-gray-900 text-orange-400 border border-orange-500' %>">
<%= current_user.role_label %>
</span>
</div>
<%# Navegação %>
<nav class="px-3 py-4 space-y-1 flex-1 overflow-y-auto">
<%# Dashboard — admin/gerente/operador %>
<% unless current_user.motorista? %>
<%= nav_link_to '📊 Dashboard', dashboard_path %>
<%= nav_link_to '📦 Consolidações', consolidacoes_path %>
<%= nav_link_to '📁 Arquivadas', arquivadas_consolidacoes_path %>
<% end %>
<%# Motorista %>
<% if current_user.motorista? %>
<%= nav_link_to '🏠 Meu Painel', motorista_dashboard_path %>
<% end %>
<%# Admin/Gerente — Configurações %>
<% if current_user.pode_ver_config? %>
<div class="pt-4 mt-4 border-t border-[#2a2a2a]">
<p class="px-3 text-xs text-gray-600 uppercase tracking-wider mb-2">Administração</p>
<%= nav_link_to '👥 Usuários', admin_usuarios_path %>
<%= nav_link_to '⚙️ Configurações', admin_configuracoes_path %>
<%= nav_link_to '🔍 Auditoria', admin_auditoria_logs_path %>
</div>
<% end %>
</nav>
<%# Footer da sidebar — sair %>
<div class="px-6 py-4 border-t border-[#2a2a2a]">
<%= link_to destroy_user_session_path, data: { turbo_method: :delete, turbo_confirm: 'Deseja sair?' },
class: "flex items-center gap-2 text-gray-400 hover:text-red-400 text-sm transition-colors" do %>
<span>🚪</span> Sair
<% end %>
</div>
</aside>
<%# Topbar mobile %>
<header class="md:hidden fixed top-0 left-0 right-0 z-30 bg-[#111111] border-b border-[#2a2a2a] px-4 py-3 flex items-center justify-between">
<button onclick="toggleSidebar()"
class="text-orange-500 text-2xl min-h-[48px] min-w-[48px] flex items-center justify-center">
</button>
<div class="flex items-center gap-2">
<div class="w-7 h-7 bg-orange-500 rounded flex items-center justify-center font-black text-black text-sm">G</div>
<span class="font-bold text-white text-sm">Reem Logística</span>
</div>
<div class="w-12"></div>
</header>
<%# Espaço para topbar no mobile %>
<div class="h-14 md:hidden"></div>
<script>
function toggleSidebar() {
const s = document.getElementById('sidebar');
const o = document.getElementById('sidebar-overlay');
s.classList.toggle('-translate-x-full');
o.classList.toggle('hidden');
}
</script>