Feature: Active menu highlight, dropdown subpages, Control Panel z-index fix

Client/Themes/Theme1.razor

@@ -1,4 +1,4 @@
-@namespace SZUAbsolventenverein.Theme.Website
+@namespace SZUAbsolventenverein.Theme.Website
 @inherits ThemeBase
 @inject NavigationManager NavigationManager
 @inject ISettingService SettingService
@@ -33,37 +33,59 @@
                 "Search", "Privacy", "Terms", "Not Found", "NotFound"
             };
 
+            // Aktuelle Seite erkennen
+            var currentPath = new Uri(NavigationManager.Uri).AbsolutePath.Trim('/').ToLower();
+
             @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 pagePath = (page.Path ?? "").Trim('/').ToLower();
+                var isActive = currentPath == pagePath;
                 var children = PageState.Pages
                     .Where(c => c.ParentId == page.PageId
                                 && c.IsNavigation
                                 && !c.IsDeleted
                                 && !hiddenNames.Contains(c.Name));
+                var hasChildren = children.Any();
+                // Prüfe ob ein Kind aktiv ist
+                var isChildActive = hasChildren && children.Any(c => currentPath == (c.Path ?? "").Trim('/').ToLower());
+                var activeClass = (isActive || isChildActive) ? "nav-link text-white active" : "nav-link text-white";
+                var wrapperClass = hasChildren ? "nav-item nav-item-dropdown" : "nav-item";
 
-                if (children.Any())
-                {
-                    <div class="app-submenu">
-                        @foreach (var child in children)
+                <div class="@wrapperClass">
+                    <div class="nav-link-row">
+                        <a class="@activeClass" href="@(@page.Path)">
+                            @(@page.Name)
+                        </a>
+                        @if (hasChildren)
                         {
-                            <div class="nav-item">
-                                <a class="nav-link text-white" href="@child.Path">
-                                    @child.Name
-                                </a>
-                            </div>
+                            <button class="dropdown-toggle-btn" onclick="var sub=this.closest('.nav-item-dropdown').querySelector('.app-submenu'); sub.classList.toggle('mobile-open'); this.querySelector('.dropdown-arrow').classList.toggle('open');">
+                                <span class="dropdown-arrow">▾</span>
+                            </button>
                         }
                     </div>
-                }
+
+                    @if (hasChildren)
+                    {
+                        <div class="app-submenu">
+                            @foreach (var child in children)
+                            {
+                                var childPath = (child.Path ?? "").Trim('/').ToLower();
+                                var isThisChildActive = currentPath == childPath;
+                                var childActiveClass = isThisChildActive ? "nav-link text-white active" : "nav-link text-white";
+
+                                <div class="nav-item">
+                                    <a class="@childActiveClass" href="@child.Path">
+                                        @child.Name
+                                    </a>
+                                </div>
+                            }
+                        </div>
+                    }
+                </div>
             }
         }
     </div>
@@ -174,7 +196,6 @@
 
     public override string Panes => PaneNames.Admin + ",Top Full Width,Top 100%,Left 50%,Right 50%,Left 33%,Center 33%,Right 33%,Left Outer 25%,Left Inner 25%,Right Inner 25%,Right Outer 25%,Left 25%,Center 50%,Right 25%,Left Sidebar 66%,Right Sidebar 33%,Left Sidebar 33%,Right Sidebar 66%,Bottom 100%,Bottom Full Width";
 
-    private bool _showDropdown = false;
     private bool _login = true;
     private bool _register = true;
     private bool _navOpen = false;

Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css

@@ -1,9 +1,21 @@
-/* ===========================
+/* ===========================
    Standard Layout
    =========================== */
 
 body {}
 
+/* Oqtane Control Panel / Bootstrap Overlays über dem Menü anzeigen */
+.offcanvas,
+.offcanvas-backdrop,
+.modal,
+.modal-backdrop {
+    z-index: 2000 !important;
+}
+
+.offcanvas.show {
+    z-index: 2001 !important;
+}
+
 /* Login-Button (Mobile + Desktop) */
 .app-menu-footer .btn-login,
 .app-menu-footer .login-btn,
@@ -159,9 +171,60 @@ body {}
     gap: 0.5rem;
 }
 
-/* Untermenü (Kinder-Seiten) etwas eingerückt */
+/* Dropdown-Wrapper: relative positioniert für absolutes Dropdown */
+.nav-item-dropdown {
+    position: relative;
+}
+
+/* Link + Toggle-Button nebeneinander */
+.nav-link-row {
+    display: flex;
+    align-items: center;
+    gap: 0;
+}
+
+/* Toggle-Button für Mobile */
+.dropdown-toggle-btn {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    padding: 6px 8px;
+    font-size: 1rem;
+    line-height: 1;
+}
+
+/* Dropdown-Pfeil */
+.dropdown-arrow {
+    font-size: 0.8em;
+    opacity: 0.7;
+    display: inline-block;
+    transition: transform 0.2s ease;
+}
+
+/* Pfeil dreht sich wenn offen */
+.dropdown-arrow.open {
+    transform: rotate(180deg);
+}
+
+/* Untermenü: standardmäßig versteckt */
 .app-submenu {
-    margin-left: 1rem;
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 180px;
+    background-color: #9a9999;
+    border-radius: 6px;
+    padding: 0.5rem 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    z-index: 2000;
+    flex-direction: column;
+}
+
+/* Dropdown bei Hover öffnen */
+.nav-item-dropdown:hover > .app-submenu {
+    display: flex;
 }
 
 /* Nav-Items */
@@ -169,21 +232,42 @@ body {}
     padding-bottom: 0.25rem;
 }
 
+/* Sub-Items im Dropdown: volle Breite */
+.app-submenu .nav-item {
+    padding: 0;
+    width: 100%;
+}
+
+.app-submenu .nav-link {
+    padding: 6px 16px;
+    border-radius: 0;
+    white-space: nowrap;
+    display: block;
+    width: 100%;
+}
+
+.app-submenu .nav-link:hover {
+    background-color: rgba(0, 0, 0, 0.25);
+}
+
 /* Hover-/Active-Style für Links */
 .app-menu .nav-link {
     padding: 6px 12px;
     border-radius: 6px;
-    transition: background-color 0.2s ease, color 0.2s ease;
+    transition: background-color 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
 }
 
+/* Hover: dunkler Hintergrund */
 .app-menu .nav-link:hover {
-    background-color: #4a4a4a;
+    background-color: rgba(0, 0, 0, 0.35);
     color: #ffffff !important;
 }
 
+/* Aktive Seite: dunkel + fett */
 .app-menu .nav-link.active {
-    background-color: #3b3b3b;
+    background-color: rgba(0, 0, 0, 0.45);
     color: #ffffff !important;
+    font-weight: 700;
 }
 
 
@@ -328,4 +412,22 @@ body {}
         font-size: clamp(12px, 3.5vw, 15px);
     }
 
+    /* Mobile: Dropdown standardmäßig versteckt */
+    .app-submenu {
+        position: static !important;
+        min-width: unset !important;
+        box-shadow: none !important;
+        background-color: transparent !important;
+        padding: 0 !important;
+        padding-left: 1rem !important;
+        border-radius: 0 !important;
+        display: none !important;
+    }
+
+    /* Mobile: Dropdown nur öffnen wenn angeklickt */
+    .app-submenu.mobile-open {
+        display: flex !important;
+        flex-direction: column;
+    }
+
 }