145 lines
8.4 KiB
Plaintext
145 lines
8.4 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 -->
|
|
<%= render "layouts/sidebar" %>
|
|
|
|
<!-- 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 %>
|
|
|
|
<%
|
|
repo_url = "https://gitea.daboh.ipv64.de/daboh/vault171/"
|
|
commit_url = CURRENT_COMMIT.present? ? "#{repo_url}/commit/#{CURRENT_COMMIT}" : repo_url
|
|
%>
|
|
<%= link_to commit_url, target: "_blank",
|
|
class: "group flex items-center justify-center px-3 py-1 text-[11px] rounded-md text-gray-400 hover:text-gray-700 hover:bg-gray-50/50 transition w-full",
|
|
title: "Aktuelle Git-Revision anzeigen" do %>
|
|
|
|
<!-- Das Icon bleibt klein und zentriert -->
|
|
<svg class="h-3.5 w-3.5 shrink-0 text-gray-400 group-hover:text-gray-700 transition-colors" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
|
|
</svg>
|
|
|
|
<!-- Durch 'w-0 group-data-[collapsed]:w-0' oder ähnliche Selektoren blockiert der Text beim Einklappen 0 Pixel Platz -->
|
|
<span class="collapse-text ml-1.5 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap font-mono tracking-wider origin-left">
|
|
<% if CURRENT_COMMIT.present? %>
|
|
<%= CURRENT_COMMIT %>
|
|
<% else %>
|
|
repository
|
|
<% end %>
|
|
</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>
|