143 lines
9.8 KiB
Plaintext
143 lines
9.8 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title><%= content_for(:title) || "Vault171" %></title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="application-name" content="Vault171">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<%= csrf_meta_tags %>
|
|
<%= csp_meta_tag %>
|
|
|
|
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
|
|
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
|
|
|
|
<link rel="icon" href="/icon.png" type="image/png">
|
|
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="/icon.png">
|
|
|
|
<%# Includes all stylesheet files in app/assets/stylesheets %>
|
|
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
|
<%= javascript_importmap_tags %>
|
|
|
|
<!-- Globaler Platzhalter für dynamische Scripte (wie den QR-Kamera-Scanner) -->
|
|
<%= yield :head %>
|
|
</head>
|
|
|
|
<body class="bg-gray-100 text-gray-800 antialiased">
|
|
|
|
<!-- APPLIKATIONS-LAYOUT FÜR EINGELOGGTE NUTZER -->
|
|
<div class="min-h-screen bg-gray-100 flex relative overflow-x-hidden">
|
|
|
|
<!-- STEUERUNG 1: Mobile Sidebar (Standard-Burger via CSS) -->
|
|
<input type="checkbox" id="mobile-sidebar-toggle" class="peer hidden">
|
|
|
|
<!-- STEUERUNG 2: Desktop Sidebar (Einklappen via CSS) -->
|
|
<input type="checkbox" id="desktop-sidebar-toggle" class="hidden">
|
|
|
|
<!-- DUNKLES HINTERGRUND-OVERLAY (Ausblend-Animation nur auf Mobile aktiv) -->
|
|
<label for="mobile-sidebar-toggle"
|
|
class="fixed inset-0 bg-gray-900/50 z-40 md:hidden backdrop-blur-sm
|
|
opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out
|
|
peer-checked:opacity-100 peer-checked:pointer-events-auto"></label>
|
|
|
|
<!-- SIDEBAR NAVIGATION -->
|
|
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col fixed h-full z-50
|
|
transition-all duration-300 ease-in-out transform -translate-x-full
|
|
md:translate-x-0 peer-checked:translate-x-0">
|
|
|
|
<!-- Logo-Bereich (Desktop-Klickfläche zum Einklappen) -->
|
|
<div class="h-16 flex items-center justify-between px-4 border-b border-gray-200 min-w-0">
|
|
<label for="desktop-sidebar-toggle" class="flex items-center gap-3 select-none group w-full overflow-hidden pointer-events-none md:cursor-pointer md:pointer-events-auto">
|
|
<svg class="h-6 w-6 text-blue-600 shrink-0 transition-transform md:group-hover:scale-110 ml-1" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" /></svg>
|
|
<span class="collapse-text text-xl font-bold text-gray-800 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Vault171</span>
|
|
</label>
|
|
|
|
<!-- Schließen X (Nur auf Smartphones aktiv) -->
|
|
<label for="mobile-sidebar-toggle" class="md:hidden p-1 text-gray-400 hover:text-gray-600 rounded-lg cursor-pointer">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Navigations-Links mit dynamischen Helper-Klassen -->
|
|
<nav class="flex-1 p-3 space-y-1 overflow-hidden">
|
|
<%= link_to root_path, class: nav_link_class("dashboard") do %>
|
|
<svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h2.25A1.125 1.125 0 0 1 7.5 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" /></svg>
|
|
<span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Dashboard</span>
|
|
<% end %>
|
|
|
|
<%= link_to items_path, class: nav_link_class("items") do %>
|
|
<svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.007 5.25H3.75v.008h.008V12Zm0 5.25H3.75v.008h.008v-.008Z" /></svg>
|
|
<span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Bestandsliste</span>
|
|
<% end %>
|
|
|
|
<%= link_to "", class: nav_link_class("inbound_shipments") do %>
|
|
<svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
|
|
<span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Wareneingang</span>
|
|
<% end %>
|
|
<%= link_to categories_path, class: nav_link_class("categories") do %>
|
|
<svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-19.5 0A2.25 2.25 0 0 0 2.25 15v2.25m0-4.5A2.25 2.25 0 0 1 4.5 12h15a2.25 2.25 0 0 1 2.25 2.25m-19.5 0v4.5A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V15M2.25 12V6a2.25 2.25 0 0 1 2.25-2.25h2.25c.59 0 1.157.234 1.576.652L9.75 5.85a2.25 2.25 0 0 0 1.576.652h6.924a2.25 2.25 0 0 1 2.25 2.25v3.25" />
|
|
</svg>
|
|
<span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Kategorien</span>
|
|
<% end %>
|
|
</nav>
|
|
|
|
<!-- DER NEUE, AUFGERÄUMTE SIDEBAR-FOOTER -->
|
|
<div class="border-t border-gray-200 bg-gray-50 flex flex-col p-3 space-y-1 shrink-0">
|
|
<!-- Link 1: Mein Profil (Aufgebaut exakt wie ein normaler Nav-Link) -->
|
|
<%= link_to edit_password_path, class: "flex items-center gap-3 px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-200/50 transition group relative" do %>
|
|
<!-- Das Icon (Deine Initialen im blauen Kreis) -->
|
|
<div class="w-5 h-5 rounded-full bg-blue-600 text-white font-bold text-[9px] flex items-center justify-center shrink-0">
|
|
<%= Current.user.email.first(2).upcase %>
|
|
</div>
|
|
<!-- Der Text blendet weich aus wie bei den anderen Links -->
|
|
<span class="collapse-text transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap text-xs font-semibold">
|
|
Mein Profil
|
|
</span>
|
|
<% end %>
|
|
|
|
<!-- Link 2: Ausloggen (Eigene Zeile darunter) -->
|
|
<%= link_to Current.session, data: { turbo_method: :delete }, class: "flex items-center gap-3 px-3 py-2 rounded-lg text-gray-500 hover:text-red-600 hover:bg-red-50 transition group relative" do %>
|
|
<!-- Heroicon: log-out -->
|
|
<svg class="h-5 w-5 shrink-0 text-gray-400 group-hover:text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
|
|
</svg>
|
|
<span class="collapse-text transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap text-xs font-medium">
|
|
Ausloggen
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
<!-- HAUPTBEREICH (Fixiert die Gesamthöhe auf den Bildschirm und steuert das Scrollen intern) -->
|
|
<div class="main-content flex-1 flex flex-col h-screen w-full transition-all duration-300 ease-in-out pl-0 md:pl-64 overflow-hidden">
|
|
|
|
<!-- OBERE LEISTE (Bleibt durch 'sticky' oben, da der umschließende Container nicht mehr mitwächst) -->
|
|
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 md:px-6 sticky top-0 z-30 shrink-0">
|
|
<div class="flex items-center gap-3">
|
|
<!-- BURGER BUTTON (Nur mobil sichtbar) -->
|
|
<label for="mobile-sidebar-toggle" class="md:hidden p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition cursor-pointer">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
|
|
</label>
|
|
<h1 class="text-base md:text-lg font-bold text-gray-800"><%= yield :title %></h1>
|
|
</div>
|
|
<div>
|
|
<%= yield :top_bar_actions %>
|
|
</div>
|
|
</header>
|
|
|
|
<%= render "layouts/flash" %>
|
|
|
|
<!-- INHALTSFLÄCHE (Nur dieser Bereich scrollt jetzt flexibel nach unten weg!) -->
|
|
<main class="p-4 md:p-6 flex-1 w-full mx-auto px-4 md:px-8 overflow-y-auto bg-gray-50/30">
|
|
<%= yield %>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Globaler Platzhalter für das optionale Turbo-Frame-Modal (z.B. neue Personen anlegen) -->
|
|
<%= turbo_frame_tag "modal" %>
|
|
</body>
|
|
</html>
|