Fix: Theme

2026-01-30 12:36:03 +01:00
4 changed files with 83 additions and 170 deletions
--- a/Client/ThemeInfo.cs
+++ b/Client/ThemeInfo.cs
@@ -10,7 +10,7 @@ namespace SZUAbsolventenverein.Theme.Website
        public Oqtane.Models.Theme Theme => new Oqtane.Models.Theme
        {
            Name = "SZUAbsolventenverein Website",
-            Version = "1.0.13",
+            Version = "1.0.14",
            PackageName = "SZUAbsolventenverein.Theme.Website",
            ThemeSettingsType = "SZUAbsolventenverein.Theme.Website.ThemeSettings, SZUAbsolventenverein.Theme.Website.Client.Oqtane",
            ContainerSettingsType = "SZUAbsolventenverein.Theme.Website.ContainerSettings, SZUAbsolventenverein.Theme.Website.Client.Oqtane",
--- a/Client/Themes/Theme1.razor
+++ b/Client/Themes/Theme1.razor
@@ -2,17 +2,80 @@
@inherits ThemeBase
@inject NavigationManager NavigationManager
@inject ISettingService SettingService
-@implements IDisposable
+@implements IDisposable  

 <main role="main">
-    <nav class="navbar navbar-dark bg-primary fixed-top">
+    <nav class="navbar navbar-dark bg-primary fixed-top app-navbar">
+    <!-- Logo links -->
+    <div class="d-flex align-items-center gap-2 app-navbar-left">
        <Logo />
-        <Menu Orientation="Horizontal" />
-        
-        <div class="controls ms-auto">
-            <div class="controls-group"><UserProfile ShowRegister="@_register" /> <Login ShowLogin="@_login" /> <ControlPanel ButtonClass="btn-outline-light" /></div>
+    </div>
+
+    <!-- Burger-Icon, das die Checkbox toggelt -->
+    <label for="nav-toggle" class="nav-toggle-label">
+        <span></span>
+        <span></span>
+        <span></span>
+    </label>
+            <!-- Menü-Container, der per :checked ein-/ausgeblendet wird -->
+    <div class="app-menu">
+        <div class="app-menu-items">
+            @if (PageState?.Pages != null)
+            {
+                // Diese Seitennamen sollen NICHT im Menü erscheinen
+                var hiddenNames = new[]
+                {
+                    "Login", "Register", "Reset", "Profile",
+                    "Search", "Privacy", "Terms", "Not Found", "NotFound"
+                };
+                @foreach (var page in PageState.Pages
+                    .Where(p => p.ParentId == null
+                                && p.IsNavigation
+                                && !p.IsDeleted
+                                && !hiddenNames.Contains(p.Name)))
+                {
+                    <div class="nav-item">
+                        <a class="nav-link text-white" href="@(@page.Path)">
+                            @(@page.Name)
+                        </a>
+                    </div>
+                    var children = PageState.Pages
+                        .Where(c => c.ParentId == page.PageId
+                                    && c.IsNavigation
+                                    && !c.IsDeleted
+                                    && !hiddenNames.Contains(c.Name));
+                    if (children.Any())
+                    {
+                        <div class="app-submenu">
+                            @foreach (var child in children)
+                            {
+                                <div class="nav-item">
+                                    <a class="nav-link text-white" href="@child.Path">
+                                        @child.Name
+                                    </a>
+                                </div>
+                            }
+                        </div>
+                    }
+                }
+            }
        </div>
-</nav>
+        <!-- WICHTIG: Footer jetzt AUßERHALB von app-menu-items -->
+                <div class="app-menu-footer ">
+            <UserProfile ShowRegister="@_register" />
+            <Login ShowLogin="@_login" />
+        </div>
+    </div>
+        <!-- Rechts: ControlPanel + User + Login -->
+        <div class="d-flex align-items-center gap-2 app-navbar-left">
+            <div class="d-flex align-items-center gap-2">
+                <ControlPanel/>
+            </div>
+        </div>
+    </nav>
+
+
+
    <div class="content">
        <div class="container">
            <div class="row">
@@ -96,12 +159,6 @@
        </div>
        <Pane Name="Bottom Full Width" />
    </div>
-
-    <footer class="footer">
-        <div class="text text-center">
-            <p>Impressum | Datenschutz | AGB</p>
-        </div>
-    </footer>
 </main>

@code {
--- a/Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css
+++ b/Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css
@@ -2,8 +2,6 @@
   Standard Layout
   =========================== */

-body {}
-
 /* Login-Button (Mobile + Desktop) */
 .app-menu-footer .btn-login,
 .app-menu-footer .login-btn,
@@ -17,73 +15,14 @@ body {}
    font-weight: 500 !important;
 }

-.navigation {
-    max-width: 80vw; /* oder max-width: 100%;*/ 
-    margin: 0 auto;
-    position: fixed; 
-    top: 0;
-    z-index: 1000;
-    background-color: #bbb;
-    padding: 1rem 0;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
-    width: 80vw; /* Wichtig!*/
-    /*left: 50%; /* horizontale Zentrierung mit transform*/ 
-    /*transform: translateX(-50%);*/
-    border: 3px solid #75767B;
-    border-top: none;
-    border-bottom: none;
-}
-
-
-
-body {
-    padding-top: 100px; /* H<>he der fixierten Navigation kompensieren */
-}
-
-.app-logo .img-fluid {
-    max-height: 60px;
-}
-
-.app-menu {
-    display: flex;
-    gap: 1rem; 
-}
-
-.nav-item a {
-    color: black;
-    font-weight: normal;
-    text-decoration: none;
-}
-
-.nav-item a.active {
-    font-weight: bold;
-} 
-
-/* Footer */
-.footer {
-    background-color: #bbb;
-    padding: 1rem 0;
-    text-align: center;
-    border: 3px solid #75767B;
-    border-top: none;
-    border-bottom: none;
-    margin-top: auto;
-}
-
-
-.wrapper {
-    max-width: 80vw; /* max. 80% der Viewport-Breite */ 
-    margin: 0 auto; /* horizontal zentrieren */
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
-
-main.flex-fill {
-    flex: 1 0 auto; /* Flex-grow 1, flex-shrink 0, flex-basis auto */
-    display: flex;
-    flex-direction: column;
-    min-height: 0; /* Wichtig f<>r flexbox overflow*/
+/* Hover-Effekt */
+.app-menu-footer .btn-login:hover,
+.app-menu-footer .login-btn:hover,
+.app-menu-footer button:hover,
+.app-menu-footer a:hover {
+    background-color: #f2f2f2 !important;
+    border-color: #bbb !important;
+    color: #333 !important;
 }

 .content {
@@ -150,7 +89,6 @@ main.flex-fill {
    z-index: 1000;
 }

-
 /* ===================================================
   NAVBAR / BURGER / SIDEBAR
   =================================================== */
@@ -261,49 +199,6 @@ main.flex-fill {
        min-height: 60px;
        /* optional: fixe Höhe */
    }
-
-.hamburger {
-    width: 40px;
-    height: 28px;
-    position: relative;
-    cursor: pointer;
-}
-
-    .hamburger span {
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: 4px;
-        background: #e5e7eb;
-        border-radius: 2px;
-        transition: transform 0.25s ease, opacity 0.25s ease;
-    }
-
-        .hamburger span:nth-child(1) {
-            top: 0;
-        }
-
-        .hamburger span:nth-child(2) {
-            top: 12px;
-        }
-
-        .hamburger span:nth-child(3) {
-            bottom: 0;
-        }
-
-    /* Animation beim Klick (wird aktiv, wenn .active hinzugef<65>gt wird) */
-    .hamburger.active span:nth-child(1) {
-        transform: translateY(12px) rotate(45deg);
-    }
-
-    .hamburger.active span:nth-child(2) {
-        opacity: 0;
-    }
-
-    .hamburger.active span:nth-child(3) {
-        transform: translateY(-12px) rotate(-45deg);
-    }
-
  
    /* Menü nur als Container für den Footer */
    .app-menu {
@@ -418,50 +313,11 @@ main.flex-fill {
        justify-content: right;
    }

-.hamburger {
-    width: 40px;
-    height: 28px;
-    position: relative;
-    cursor: pointer;
-}
-
-    .hamburger span {
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: 4px;
-        background: #e5e7eb;
-        border-radius: 2px;
-        transition: transform 0.25s ease, opacity 0.25s ease;
+    /* Sidebar öffnen/schließen über Checkbox */
+    .nav-toggle:checked~.app-menu {
+        transform: translateX(0);
    }

-        .hamburger span:nth-child(1) {
-            top: 0;
-        }
-
-        .hamburger span:nth-child(2) {
-            top: 12px;
-        }
-
-        .hamburger span:nth-child(3) {
-            bottom: 0;
-        }
-
-    /* Animation beim Klick (wird aktiv, wenn .active hinzugef<65>gt wird) */
-    .hamburger.active span:nth-child(1) {
-        transform: translateY(12px) rotate(45deg);
-    }
-
-    .hamburger.active span:nth-child(2) {
-        opacity: 0;
-    }
-
-    .hamburger.active span:nth-child(3) {
-        transform: translateY(-12px) rotate(-45deg);
-    }
-
-  
-
    .app-menu .nav-link {
        width: 100%;
        display: block;
--- a/Package/SZUAbsolventenverein.Theme.Website.nuspec
+++ b/Package/SZUAbsolventenverein.Theme.Website.nuspec
@@ -2,7 +2,7 @@
 <package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
    <metadata>
        <id>SZUAbsolventenverein.Theme.Website</id>
-        <version>1.0.13</version>
+        <version>1.0.14</version>
        <authors>SZUAbsolventenverein</authors>
        <owners>SZUAbsolventenverein</owners>
        <title>Website</title>