Erstes Formular + QR Integration

FilterCair.Client/Layout/MainLayout.razor

@@ -1,22 +1,67 @@
 @inherits LayoutComponentBase
-
-<PageTitle>FilterCair</PageTitle>
+@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
 
 <div class="d-flex flex-column min-vh-100">
 
-    <main class="flex-fill p-3">
-        @Body
+    <!-- 🔹 NAVBAR -->
+    <nav class="navbar navbar-expand-lg shadow-sm main-nav">
+        <div class="container-fluid">
+            <a class="navbar-brand fw-semibold text-white" href="/">
+                <i class="bi bi-wind me-1"></i> FilterCair
+            </a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <NavLink class="nav-link text-white" href="/" Match="NavLinkMatch.All">
+                            <i class="bi bi-house-door me-1"></i> Start
+                        </NavLink>
+                    </li>
+                    <li class="nav-item">
+                        <NavLink class="nav-link text-white" href="/qrscanner">
+                            <i class="bi bi-qr-code-scan me-1"></i> QR-Scanner
+                        </NavLink>
+                    </li>
+                    <li class="nav-item">
+                        <NavLink class="nav-link text-white" href="/filterform">
+                            <i class="bi bi-funnel me-1"></i> Filter-Form
+                        </NavLink>
+                    </li>
+                </ul>
+
+                <!-- 🔐 Login/Logout -->
+                <AuthorizeView>
+                    <Authorized Context="auth">
+                        <span class="navbar-text me-3 text-white">
+                            
+                        </span>
+                        <NavLink href="authentication/logout" class="btn btn-outline-light btn-sm">
+                            Abmelden
+                        </NavLink>
+                    </Authorized>
+                    <NotAuthorized>
+                        <NavLink href="authentication/login" class="btn btn-light btn-sm">
+                            Anmelden
+                        </NavLink>
+                    </NotAuthorized>
+                </AuthorizeView>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 🔹 Seiteninhalt -->
+    <main class="flex-fill bg-light">
+        <div class="container py-4">
+            @Body
+        </div>
     </main>
 
-    <nav class="navbar navbar-light bg-light border-top fixed-bottom d-flex justify-content-around">
-        <a href="/homezwei" class="text-center text-decoration-none text-dark">
-            <i class="bi bi-house"></i><br /><small>Home</small>
-        </a>
-        <a href="/tasks" class="text-center text-decoration-none text-dark">
-            <i class="bi bi-list-task"></i><br /><small>Tasks</small>
-        </a>
-        <a href="/settings" class="text-center text-decoration-none text-dark">
-            <i class="bi bi-gear"></i><br /><small>Settings</small>
-        </a>
-    </nav>
+    <!-- 🔹 FOOTER -->
+    <footer class="footer text-center small text-secondary py-2 mt-auto border-top">
+        © @DateTime.Now.Year FilterCair - FPM Service GmbH
+    </footer>
 </div>

FilterCair.Client/wwwroot/css/app.css

@@ -115,4 +115,54 @@ code {
 
 .freudenberg-blue {
     color: #005B99 !important;
-}
+}
+
+
+
+/* Freudenberg Corporate Blau */
+:root {
+    --freudenberg-blue: #005B99;
+    --freudenberg-blue-light: #1976ba;
+}
+
+/* Navbar-Design */
+.main-nav {
+    background-color: var(--freudenberg-blue) !important;
+}
+
+.navbar .nav-link {
+    color: rgba(255,255,255,0.8) !important;
+    transition: 0.2s;
+}
+
+    .navbar .nav-link:hover,
+    .navbar .nav-link.active {
+        color: #fff !important;
+        font-weight: 600;
+        border-bottom: 2px solid white;
+    }
+
+/* Footer */
+.footer {
+    background-color: #f8f9fa;
+}
+
+/* Buttons */
+.btn-primary {
+    background-color: var(--freudenberg-blue);
+    border-color: var(--freudenberg-blue);
+}
+
+    .btn-primary:hover {
+        background-color: var(--freudenberg-blue-light);
+        border-color: var(--freudenberg-blue-light);
+    }
+
+/* Progress Spinner / Accent Colors */
+.text-primary {
+    color: var(--freudenberg-blue) !important;
+}
+
+.bg-primary {
+    background-color: var(--freudenberg-blue) !important;
+}