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.4",
+            Version = "1.0.5",
             PackageName = "SZUAbsolventenverein.Theme.Website",
             ThemeSettingsType = "SZUAbsolventenverein.Theme.Website.ThemeSettings, SZUAbsolventenverein.Theme.Website.Client.Oqtane",
             ContainerSettingsType = "SZUAbsolventenverein.Theme.Website.ContainerSettings, SZUAbsolventenverein.Theme.Website.Client.Oqtane",

Client/Themes/Theme1.razor

@@ -1,27 +1,86 @@
-@namespace SZUAbsolventenverein.Theme.Website
+@namespace SZUAbsolventenverein.Theme.Website
 @inherits ThemeBase
 @inject ISettingService SettingService
 
 <main role="main">
-    <nav class="navbar navbar-dark bg-primary fixed-top">
+    <nav class="navbar navbar-dark bg-primary fixed-top app-navbar">
-        <div class="d-flex align-items-center gap-2 order-1 order-md-1">
+    <!-- Logo links -->
-            <Logo />
+    <div class="d-flex align-items-center gap-2 app-navbar-left">
+        <Logo />
+    </div>
 
-        </div>
+    <!-- Versteckte Checkbox zum Steuern des Menüs (nur HTML, kein Blazor) -->
-        <div class="d-flex align-items-right gap-2 order-1 order-md-1">
+    <input type="checkbox" id="nav-toggle" class="nav-toggle" />
-            <Menu Orientation="Horizontal"></Menu>
 
+    <!-- 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>
+
+    <!-- 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-right">
+        <div class="d-flex align-items-center gap-2">
+            <ControlPanel/>
         </div>
-        <div class="d-flex align-items-center gap-2 order-1 order-md-1">
+       
-            <div class="d-flex align-items-center gap-2 order-1 order-md-1">
+    </div>
-                <ControlPanel/>
+</nav>
-            </div>
-            <div class="d-flex align-items-center gap-2 order-1 order-md-1">
-                <UserProfile ShowRegister="@_register" />
-                <Login ShowLogin="@_login" />
-            </div>
-        </div>
-    </nav>
     <div class="content">
         <div class="container">
             <div class="row">
@@ -105,6 +164,7 @@
         </div>
         <Pane Name="Bottom Full Width" />
     </div>
+    <CookieConsent />
 </main>
 
 

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

@@ -1,5 +1,9 @@
+/* ===========================
+   Standard Layout
+   =========================== */
+
 body {
-    padding-top: 7rem;
+    
 }
 
 /* App Logo */
@@ -13,7 +17,7 @@ body {
 }
 
 .table .form-control {
-    background-color: #ffffff !important; 
+    background-color: #ffffff !important;
     border-width: 0.5px !important;
     border-bottom-color: #ccc !important;
     color: #000 !important;
@@ -25,10 +29,11 @@ body {
     border-bottom-color: #ccc !important;
     color: #000 !important;
 }
+
 .bg-primary {
     background-color: gray !important;
-    
 }
+
 .table .btn-primary {
     background-color: var(--bs-primary);
 }
@@ -40,8 +45,8 @@ body {
 .alert-dismissible .btn-close {
     z-index: 1;
 }
+
 .dropdown-menu {
-    
     background-color: grey;
 }
 
@@ -52,51 +57,6 @@ body {
     margin-right: 10px;
 }
 
-.app-menu .nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-    white-space: nowrap;
-}
-
-    .app-menu .nav-item a {
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-        padding-left: 1rem;
-    }
-
-        .app-menu .nav-item a.active {
-            background-color: dimgrey;
-            color: white;
-        }
-
-        .app-menu .nav-item a:hover {
-            background-color: dimgray;
-            color: white;
-        }
-
-.app-menu .nav-link .oi {
-    width: 1.5rem;
-    font-size: 1.1rem;
-    vertical-align: text-top;
-    top: -2px;
-}
-
-.app-search input {
-    width: auto;
-}
-
-.navbar-toggler {
-    background-color: rgba(255, 255, 255, 0.1);
-    margin: .5rem;
-}
-
-div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu {
-    color: #ffffff;
-}
-
 .footer {
     padding-top: 15px;
     min-height: 40px;
@@ -105,111 +65,233 @@ div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu
     z-index: 1000;
 }
 
-@media (max-width: 991.98px) {
+
-    .app-search {
+/* ===================================================
-        border-radius: 6px;
+   NAVBAR / BURGER / SIDEBAR
+   =================================================== */
+
+/* Navbar als durchgehende Flex-Zeile */
+.app-navbar {
+    display: flex;
+    flex-wrap: nowrap; /* NICHT umbrechen auf Desktop */
+    align-items: center;
+    justify-content: flex-start;
+    z-index: 1000;
+}
+
+.app-navbar-left,
+.app-navbar-right {
+    display: flex;
+    align-items: center;
+}
+
+/* etwas Luft zwischen Logo und Menü */
+.app-navbar-left {
+    margin-right: 1rem;
+}
+
+/* Versteckte Checkbox steuert die Sidebar */
+.nav-toggle {
+    display: none;
+}
+
+/* Burger-Icon (wird nur auf Mobil eingeblendet) */
+.nav-toggle-label {
+    display: none; /* nur auf Mobil sichtbar */
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    margin-left: auto;
+}
+
+    .nav-toggle-label span {
+        display: block;
+        width: 22px;
+        height: 2px;
+        margin: 4px 0;
+        background-color: #ffffff;
     }
 
-        .app-search input {
+/* Menü-Container */
-            display: none !important;
+.app-menu {
-        }
+    display: flex;
+    
+}
 
-            .app-search input + button {
+/* Bereich für die Seitenlinks – Basis: horizontales Flex */
-                position: initial;
+.app-menu-items {
-                padding-top: 7px;
+    display: flex;
-                padding-bottom: 7px;
+    flex-wrap: wrap;
-            }
+    gap: 0.75rem;
+    align-content: center;
+}
 
-        .app-search:active, .app-search:hover {
+/* Bereich für Login/Register */
-            display: block;
+.app-menu-footer {
-            position: fixed;
+    display: flex;
-            top: 0;
+    gap: 0.5rem;
-            min-height: 96px;
+}
-            width: 100%;
-            left: 0;
-            z-index: 999;
-            border-radius: 0;
-        }
 
-            .app-search:active .app-form-inline, .app-search:hover .app-form-inline {
+/* Untermenü (Kinder-Seiten) etwas eingerückt */
-                margin: 10px auto;
+.app-submenu {
-                position: relative;
+    margin-left: 1rem;
-                display: block;
+}
-                max-width: 80%;
-            }
 
-                .app-search:active .app-form-inline input, .app-search:hover .app-form-inline input {
+/* Nav-Items */
-                    width: 100%;
+.app-menu .nav-item {
-                    display: block !important;
+    padding-bottom: 0.25rem;
-                }
+}
 
-                    .app-search:active .app-form-inline input + button, .app-search:hover .app-form-inline input + button {
+/* Hover-/Active-Style für Links */
-                        position: absolute;
+.app-menu .nav-link {
-                        color: rgb(42, 159, 214);
+    padding: 6px 12px;
-                        padding-top: 6px;
+    border-radius: 6px;
-                        padding-bottom: 6px;
+    transition: background-color 0.2s ease, color 0.2s ease;
-                    }
+}
+
+    .app-menu .nav-link:hover {
+        background-color: #4a4a4a;
+        color: #ffffff !important;
+    }
+
+    .app-menu .nav-link.active {
+        background-color: #3b3b3b;
+        color: #ffffff !important;
+    }
+
+
+/* ===========================
+   DESKTOP (ab 768px)
+   =========================== */
+@media (min-width: 768px) {
+
+    /* Navbar: eine Zeile, Positionierungs-Referenz für Absolut-Elemente */
+    .app-navbar {
+        display: flex !important;
+        flex-wrap: nowrap !important;
+        align-items: center !important;
+        justify-content: flex-start !important;
+        position: relative !important;
+    }
+
+    /* Menübereich in der Mitte */
+    .app-menu {
+        display: flex !important;
+        flex-direction: row !important;
+        align-items: center !important;
+        justify-content: center !important;  /* Menüpunkte in der Mitte */
+        flex: 1 1 auto !important;           /* füllt Platz zwischen Logo und rechts */
+        gap: 0.75rem !important;
+        position: static !important;
+        width: auto !important;
+    }
+
+    /* Menüpunkte horizontal zentriert */
+    .app-menu-items {
+        display: flex !important;
+        flex-direction: row !important;
+        flex-wrap: wrap !important;
+        justify-content: center !important;
+        align-items: center !important;
+        gap: 0.75rem !important;
+        width: auto !important;
+    }
+
+    /* Login/Register GANZ RECHTS in der Navbar */
+    .app-menu-footer {
+        display: flex !important;
+        position: absolute !important;
+        right: 1rem !important;          /* Abstand vom rechten Rand */
+        top: 50% !important;
+        transform: translateY(-50%);     /* vertikal mittig ausrichten */
+        gap: 0.75rem !important;
+        padding: 0 !important;
+        border: none !important;
+        background: none !important;
+        width: auto !important;
+    }
+
+    .app-menu .nav-item {
+        display: inline-block !important;
+    }
 }
 
 
-
+/* ===========================
+   MOBILE (unter 768px)
+   =========================== */
 
 @media (max-width: 767px) {
 
-    /* Dynamische Schriftgr<67><72>e im Dropdown-Men<65> */
-    .app-menu .nav-item a {
-        font-size: clamp(3px, 3vw, 13px); /* Dynamische, begrenzte Schriftgr<67><72>e */
-    }
-
-    .app-menu-toggler {
-        position: fixed;
-        top: 1.5rem; /* Abstand von oben */
-        right: 2.75rem; /* Abstand von rechts */
-        left: auto;
-    }
-
-    .app-menu {
-        position: fixed;
-        right: 1rem;
-        margin-top: 5.25rem;
-        width: 25%;
-        background-color: grey;
-    }
-
     .navbar {
         position: fixed;
+        top: 0;
         width: 100%;
+        z-index: 1000;
     }
 
-    .controls {
+    /* Platz unter der Navbar */
-        height: 60px;
-        top: 15px;
-        position: fixed;
-        top: 0px;
-        width: 100%;
-        background-color: grey;
-    }
-
-    .controls-group {
-        float: right;
-        margin-right: 25px;
-    }
-
     .content {
         position: relative;
         top: 60px;
     }
 
-    .app-search:active, .app-search:hover {
+    /* Burger sichtbar machen */
-        min-height: 60px;
+    .nav-toggle-label {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
     }
 
-    .navbar > .d-flex:nth-of-type(3) {
+    /* Sidebar-Wrapper rechts */
-        order: 2;
+    .app-menu {
-        flex-basis: 100%;
+        position: fixed;
+        top: 80px; /* Abstand von oben (über der Navbar + Burger) */
+        right: 0;
+        width: 70%;
+        max-width: 280px;
+        height: calc(100vh - 80px); /* Höhe an das neue top anpassen */
+        background-color: grey;
+        flex-direction: column;
+        align-items: stretch;
+        padding: 1rem;
+        gap: 0.5rem;
+        transform: translateX(100%);
+        transition: transform 0.3s ease;
+        z-index: 1500;
     }
 
-    .navbar > .d-flex:nth-of-type(2) {
+    /* Seitenlinks vertikal + scrollbar + zentriert */
-        order: 3;
+    .app-menu-items {
+        flex: 1;
+        overflow-y: auto;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: 0.25rem;
     }
-}
+
+    /* Footer (Login/Register) fixiert unten */
+    .app-menu-footer {
+        width: 100%;
+        padding-top: 0.5rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.25);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    /* Sidebar öffnen/schließen über Checkbox */
+    .nav-toggle:checked ~ .app-menu {
+        transform: translateX(0);
+    }
+
+    .app-menu .nav-link {
+        width: 100%;
+        display: block;
+        font-size: clamp(12px, 3.5vw, 15px);
+    }
+
+}
+

Package/SZUAbsolventenverein.Theme.Website.nuspec

@@ -2,7 +2,7 @@
 <package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
     <metadata>
         <id>$projectname$</id>
-        <version>1.0.4</version>
+        <version>1.0.5</version>
         <authors>SZUAbsolventenverein</authors>
         <owners>SZUAbsolventenverein</owners>
         <title>Website</title>