daboh/vault171
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added autohide with animation for flash message
Some checks failed
CI / scan_ruby (push) Has been cancelled
Details
CI / scan_js (push) Has been cancelled
Details
CI / lint (push) Has been cancelled
Details
CI / test (push) Has been cancelled
Details
CI / system-test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
David Böhm
2026-05-24 04:21:47 +02:00
parent b73f614f1c
commit 04f48acf95
4 changed files with 108 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/views/layouts/application.html.erb
View File

@@ -25,40 +25,40 @@
</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" />
<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" />
<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
<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
<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 %>
@@ -112,7 +112,7 @@
<!-- HAUPTBEREICH (Inhaltsfläche rückt bei verkleinerter Sidebar nach) -->
<div class="main-content flex-1 flex flex-col min-h-screen w-full transition-all duration-300 ease-in-out pl-0 md:pl-64">
<!-- OBERE LEISTE (Top Bar) -->
<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">
<div class="flex items-center gap-3">
@@ -129,20 +129,21 @@
<!-- INHALT DER JEWEILIGEN VIEW -->
<main class="p-4 md:p-6 flex-1 w-full mx-auto px-4 md:px-8">
<!-- Platzhalter für Flash-Meldungen (z.B. erfolgreiches Speichern) -->
<!-- Platzhalter für Flash-Meldungen (z.B. erfolgreiches Speichern)
<% flash.each do |type, message| %>
<div class="mb-4 p-4 text-sm rounded-lg border <%= type == 'notice' ? 'bg-green-50 text-green-800 border-green-200' : 'bg-red-50 text-red-800 border-red-200' %>">
<%= message %>
</div>
<% end %>
-->
<%= render "layouts/flash" %>
<%= yield %>
</main>
</div>
</div>
<!-- Globaler Platzhalter für das optionale Turbo-Frame-Modal (z.B. neue Personen anlegen) -->
<%= turbo_frame_tag "modal" %>
</body>
</html>