170 lines
6.6 KiB
Plaintext
170 lines
6.6 KiB
Plaintext
<%# app/views/layouts/application.html.erb %>
|
|
<!DOCTYPE html>
|
|
<html lang="pt-BR" class="<%= @tema == 'light' ? '' : 'dark' %>">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="<%= form_authenticity_token %>">
|
|
<title><%= content_for?(:title) ? yield(:title) + ' · ' : '' %>Gade Logística</title>
|
|
|
|
<%= stylesheet_link_tag 'application', data: { turbo_track: 'reload' } %>
|
|
<%= javascript_importmap_tags %>
|
|
|
|
<style>
|
|
:root {
|
|
--bg-main: #0a0a0a;
|
|
--bg-card: #1a1a1a;
|
|
--accent: #f97316;
|
|
--text-main: #ffffff;
|
|
--text-muted:#9ca3af;
|
|
--border: rgba(255,255,255,0.05);
|
|
}
|
|
html.light {
|
|
--bg-main: #f8fafc;
|
|
--bg-card: #ffffff;
|
|
--text-main: #0f172a;
|
|
--text-muted:#64748b;
|
|
--border: rgba(0,0,0,0.08);
|
|
}
|
|
body { background-color: var(--bg-main); color: var(--text-main); }
|
|
.scrollbar-hidden::-webkit-scrollbar { display: none; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans antialiased min-h-screen" style="background-color: var(--bg-main)">
|
|
|
|
<% if user_signed_in? && !current_user.motorista? %>
|
|
<%# Layout principal com sidebar %>
|
|
<div class="flex min-h-screen">
|
|
|
|
<%# Sidebar Desktop %>
|
|
<aside id="sidebar"
|
|
class="fixed inset-y-0 left-0 z-50 w-64 flex-col hidden lg:flex
|
|
border-r border-white/5"
|
|
style="background-color: var(--bg-card)">
|
|
<%= render 'layouts/sidebar' %>
|
|
</aside>
|
|
|
|
<%# Overlay mobile %>
|
|
<div id="sidebar-overlay"
|
|
class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm hidden lg:hidden"
|
|
onclick="toggleSidebar()"></div>
|
|
|
|
<%# Sidebar Mobile (drawer) %>
|
|
<aside id="sidebar-mobile"
|
|
class="fixed inset-y-0 left-0 z-50 w-64 flex flex-col lg:hidden
|
|
transform -translate-x-full transition-transform duration-300 ease-in-out
|
|
border-r border-white/5"
|
|
style="background-color: var(--bg-card)">
|
|
<%= render 'layouts/sidebar' %>
|
|
</aside>
|
|
|
|
<%# Main content %>
|
|
<div class="flex-1 lg:ml-64 flex flex-col min-h-screen">
|
|
<%# Topbar %>
|
|
<header class="sticky top-0 z-30 px-4 lg:px-6 py-4 flex items-center justify-between
|
|
border-b border-white/5 backdrop-blur-md"
|
|
style="background-color: rgba(10,10,10,0.8)">
|
|
<%# Hamburger mobile %>
|
|
<button onclick="toggleSidebar()"
|
|
class="lg:hidden p-2 text-gray-400 hover:text-white rounded-lg hover:bg-white/10 transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<%# Breadcrumb / título da página %>
|
|
<div class="flex-1 lg:ml-0 ml-3">
|
|
<span class="text-white font-semibold text-sm lg:text-base">
|
|
<%= content_for?(:page_title) ? yield(:page_title) : 'Dashboard' %>
|
|
</span>
|
|
</div>
|
|
|
|
<%# Ações do header %>
|
|
<div class="flex items-center gap-3">
|
|
<%# Toggle tema %>
|
|
<%= button_to toggle_tema_configuracoes_path, method: :post,
|
|
class: 'p-2 text-gray-400 hover:text-white hover:bg-white/10
|
|
rounded-lg transition-colors cursor-pointer',
|
|
title: @tema == 'dark' ? 'Mudar para tema claro' : 'Mudar para tema escuro' do %>
|
|
<% if @tema == 'dark' %>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
|
|
</svg>
|
|
<% else %>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
|
|
</svg>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%# Avatar / menu usuário %>
|
|
<div class="relative" x-data="{ open: false }">
|
|
<button class="flex items-center gap-2 p-1.5 rounded-xl hover:bg-white/10 transition-colors">
|
|
<div class="w-8 h-8 rounded-full bg-[#f97316]/20 border border-[#f97316]/30
|
|
flex items-center justify-center text-[#f97316] font-bold text-sm">
|
|
<%= current_user.name.to_s[0].upcase %>
|
|
</div>
|
|
<span class="hidden sm:block text-white text-sm font-medium pr-1">
|
|
<%= current_user.nome_display %>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<%# Logout %>
|
|
<%= button_to destroy_user_session_path, method: :delete,
|
|
class: 'px-3 py-2 text-gray-500 hover:text-red-400 text-sm
|
|
hover:bg-red-900/20 rounded-lg transition-colors cursor-pointer' do %>
|
|
Sair
|
|
<% end %>
|
|
</div>
|
|
</header>
|
|
|
|
<%# Conteúdo principal %>
|
|
<main class="flex-1 p-4 lg:p-6">
|
|
<%= yield %>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<% elsif user_signed_in? && current_user.motorista? %>
|
|
<%# Layout simplificado para motorista %>
|
|
<div class="min-h-screen" style="background-color: var(--bg-main)">
|
|
<main class="max-w-2xl mx-auto px-4 py-6">
|
|
<%= yield %>
|
|
</main>
|
|
</div>
|
|
|
|
<% else %>
|
|
<%# Layout sem sidebar (login, etc) %>
|
|
<%= yield %>
|
|
<% end %>
|
|
|
|
<script>
|
|
function toggleSidebar() {
|
|
const mobile = document.getElementById('sidebar-mobile');
|
|
const overlay = document.getElementById('sidebar-overlay');
|
|
const isOpen = !mobile.classList.contains('-translate-x-full');
|
|
|
|
if (isOpen) {
|
|
mobile.classList.add('-translate-x-full');
|
|
overlay.classList.add('hidden');
|
|
} else {
|
|
mobile.classList.remove('-translate-x-full');
|
|
overlay.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
// Fecha sidebar ao pressionar Escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
const mobile = document.getElementById('sidebar-mobile');
|
|
if (mobile && !mobile.classList.contains('-translate-x-full')) toggleSidebar();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|